11P by xguru 2달전 | favorite | 댓글 1개
  • 매년 발간하는 방대한 보고서
  • 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를 가지고 있음