- 매년 발간하는 방대한 보고서
- 8.36M개의 웹사이트, 43.88TB의 데이터를 처리해서 만든 지표
- 올해는 4개파트 총 22개의 챕터로 구성
- Page Content : CSS, JAvascript, Markup, Structured Data, Fonts, Media, WebAssembly, Third Parties, Interoperability
- User Experience : SEO, Accessibility, Performance, Privacy, Security, Mobile Web, Capabilities, PWA
- Content Publishing : CMS, Jamstack, Sustainability
- Content Distribution : Page Weight, HTTP
@stefanjudis 가 정리한 재미난 것들 (fun facts)
CSS
- 가장 큰 데스크탑 페이지 CSS 파일은 62MB, 모바일 페이지용 CSS는 78MB
- 가장 CSS 파일을 로딩 많이 한 사이트는 1387개를 로딩한 모바일 사이트
- 가장 많이 사용한 클래스 명은 active(47%), fa(33%), wp-*(31%), button(27%), pull-right (26%)
- 가장 많이 사용한 폰트 사이트 단위는 px(71%) em(15%) rem(6%) pt(2%)
- 가장 많이 사용하는 컬러 포맷은 #rrggbb(49%) , #rgb(25%), rgba(14%), transparent(8%)
- 가장 적게 사용된 컬러명은 mediumspringgreen < darksalmon < mediumorchid < darkorchid
- 0.3%의 페이지만 accent-color 를 사용
- 가장 많이 사용한 미디어 쿼리 기능은 max-width(83%) min-width(79%) -webkit-min-device-pixel-ratio(35%) prefers-reduced-motion(34%) orientation(30%)
JS
- 데스크탑/모바일에서 async(76%) defer(42%) async and defer(28%/29%) module(4%)
- async 와 defer를 같이 쓰는 것은 안티패턴. defer는 항상 무시되고 async가 우선순위를 가짐
- 77%의 모바일 페이지가 <head> 안에 렌더링을 블로킹하는 스크립트를 포함하고 있음
- 가장 많이 쓰는 라이브러리 jQuery 81% > core-js 41% > jQuery Migrate 34% > jQuery UI 23% > Modernizr 13% > Lodash 9%
Media
- 이미지 포맷 : jpg 40% > png 28.2% > gif 15.9% > webp 8.9% > svg 4.7% > ico 1.6%
- Hero 이미지의 1/10만 Lazy Loading 됨
- 28%의 img 태그만 height 와 width를 가지고 있음