2022 Web Almanac - Webの現状レポート

 (almanac.httparchive.org)
11 ポイント 投稿者 xguru 2022-10-03 | 1件のコメント | WhatsAppで共有
  • 毎年発行される膨大なレポート
  • 8.36M件のWebサイト、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
  • accent-color を使っているページは 0.3% のみ
  • 最も多く使われたメディアクエリ機能は 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 されていない
  • img タグのうち height と width を持っているのは 28% のみ

関連記事