HTTP Archiveは先頃、Webの状況の年次報告書であるWeb Almanac 2020を完成させた。レポートは、合計600ページからなる、4つのセクション (ページコンテンツ、ユーザエクスペリエンス、コンテンツの公開と配布など) で構成された22の章で結論をまとめている。jQueryは依然としてWebの80％だ。CSS Houdiniはほぼ使用されていない。2020年のWebサイトの中央値は400KBのJavaScriptをリリースし、2019年より14％多くなっている、などである。
CSSの章では、CSS標準を強化するいくつかの輝かしい追加や提案の採用が遅れている可能性があることを強調した:
全体として、CSSの採用に関しては、2つの異なるギアのWebが観察されました。私たちのブログ投稿やTwitterのバブルでは、ほとんどが最新で最も輝かしいものについて議論する傾向がありますが、10年前のコードを使用しているサイトはまだ何百万もあります。[… 一方で] 多くの新機能の印象的な採用も観察されました。min() や max() のように、今年全面的にサポートされただけの機能でさえ、[…] 一般的に いかにクールな事であるかを知ることと、実際にどれだけ使用されるかの間には逆相関があります。たとえば、最先端のHoudini機能は事実上存在しませんでした。[…] 実際のCSSの使用法のほとんどはかなり単純です。
CSSの章では、CSSの重みの中央値は、400を超えるルールと5,000の宣言を集約して約60KBだ。現在、大多数のWebサイトはFlexboxレイアウトを使用している (2020年は約60％、2019年は40％)。CSS Gridレイアウト (display:grid) は増加しているが (2019年と比較してシェアが2倍になっている)、依然として少数派だ (Webサイトの5％)。TransitionsとAnimationsはWeb全体にかなり拡張されており、ページの80％以上で transition プロパティを、70％以上が animation プロパティを備えている。視覚効果 (ブレンドモード、画像フィルター、クリッピングパス) は一般的なCSS機能だ。CSSフィルターはページの80％で使用されている。ブレンドモードは前年の2倍のシェアを占め、ページの13％に達した。
対照的に、CSS-in-JSはWeb開発者の間で十分に議論されているが、CSS-in-JSメソッドを使用しているWebサイトはわずか2％だ。CSS Houdiniも、Webページでごく僅かにしか使用されていない。レポートによると:
CSS Painting APIは、より広く実装されたHoudini仕様で、開発者は、例えばカスタムグラデーションやパターンを実装して、
<image>値を返すカスタムCSS関数を作成できます。paint()を使用しているのは12ページのみでした。各ワークレット名 (六角形 (hexagon)、定規 (ruler)、トローチ (lozenge)、イメージクロス (image-cross)、グリッド (grid)、破線 (dashed-line)、波紋 (ripple)) が、それぞれ1ページにしか表示されていないため、実際のユースケースはデモである可能性が高いようです。
別のHoudini仕様であるTyped OMを使用すると、従来のCSS OMの文字列の代わりに構造化された値にアクセスできます。全体的にはまだ低いものの、他のHoudini仕様と比較するとかなり高い採用率を示しているようです。これは、9,864のデスクトップページ (0.18％) と6,391のモバイルページ (0.1％) で使用されています。
レポートのJavaScriptの章では、ページごとに読み込まれるJavaScriptのサイズが約14％増加し、約400KBのJavaScriptがページの中央値であることが示されている。 レポートでは、モバイルを対象とするページとデスクトップを対象とするページのJavaScriptペイロードは類似しているが、ネットワーク機能と処理機能では大きく異なる。また、中央値でJavaScript未使用のWebページは37％だ。レポートによると:
見方によっては、デスクトップブラウザとモバイルブラウザに送信されるコードの量のわずかなギャップをあまり気にしない可能性があります。結局のところ、中央値で30KB程度余分にかかります。正しいですか? […]
デスクトップサイトの中央値は、すべてのJavaScriptを処理するブラウザのメインスレッドに891ミリ秒を費やしています。しかし、モバイルサイトの中央値では1,897ミリ秒を費やしています。これは、デスクトップで費やされる時間の2倍以上です。サイトのロングテールではさらに悪化しています。90パーセンタイルでは、モバイルサイトはJavaScriptの処理に呆然とさせる8,921ミリ秒のメインスレッド時間を費やしますが、デスクトップサイトの場合は3,838ミリ秒です。
明るい面としては、JavaScriptロードのネットワークコストの一部を相殺できるリソースヒントがページのほぼ17％で使用され、その使用のほぼすべてが preload からだ。
レポートのサードパーティの章では、サードパーティスクリプトの存在、配布、および影響を分析し、それらを管理することの重要性を強調している:
広告リクエストは、CPU時間に大きな影響を与えるようです。広告スクリプトのある中央値のページは、それがないページの3倍のCPUを消費します。
開発者は、4つの異なる言語でオンラインで完全なレポートを参照できる。HTTP Archiveは、数百万のWebサイトのデータを精査する数百人の貢献者とともにWeb Almanacをまとめるのに5か月以上かかった。HTTP Archiveは、毎月数百万のWebページの構成を評価し、テラバイトのメタデータをBigQueryでの分析に利用できるようにする。