# 2022 Web Almanac - 웹의 현재 보고서

> Clean Markdown view of GeekNews topic #7522. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=7522](https://news.hada.io/topic?id=7522)
- GeekNews Markdown: [https://news.hada.io/topic/7522.md](https://news.hada.io/topic/7522.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-10-03T10:24:50+09:00
- Updated: 2022-10-03T10:24:50+09:00
- Original source: [almanac.httparchive.org](https://almanac.httparchive.org/en/2022/)
- Points: 11
- Comments: 1

## Topic Body

- 매년 발간하는 방대한 보고서  
- 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](https://twitter.com/stefanjudis/status/1574692009926967297) 가 정리한 재미난 것들 (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%의 모바일 페이지가 &lt;head&gt; 안에 렌더링을 블로킹하는 스크립트를 포함하고 있음   
- 가장 많이 쓰는 라이브러리 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를 가지고 있음

## Comments



### Comment 12577

- Author: xguru
- Created: 2022-10-03T10:24:59+09:00
- Points: 2

[2019 Web Almanac - 웹의 현재 보고서](https://news.hada.io/topic?id=921)  
[2020 Web Almanac - 웹의 현재 보고서](https://news.hada.io/topic?id=3391)  
[2021 Web Almanac - 웹의 현재 보고서](https://news.hada.io/topic?id=5477)