7月21日、CSSでWeb Vitalsを改善する方法が公開された。

この記事はCSSがWeb Vitalsにどのような影響を与えるか、それを最適化する方法について、4つポイントを挙げている。

1. DOMにコンテンツを挿入する際のレイアウトのズレを最小限に抑える

アプリケーションの読み込み時間とUXを向上させるためには、コンテンツのズレを最小限に抑える。

Lighthouseの項目「Avoid large layout shifts」に、ズレたページ要素がすべて表示される。

画像クレジット: Piumi Liyana Gunawardhana

2. 背景画像の代わりにCSSを使用する

サイズの大きい画像や動画はLCP(Largest Contentful Paint)を長くする。
代替が可能であれば、背景には画像の代わりに、CSSのグラデーションプロパティなどを使用する。

画像クレジット: Piumi Liyana Gunawardhana

LCP(Largest Contentful Paint): ユーザーがURLをリクエストしてから、ビューポートに表示される最大のコンテンツ要素がレンダリングされるまでの時間
https://support.google.com/webmasters/answer/9205520?hl=ja

3. 画像の幅と高さを明示的に定義する

ページがレンダリングされた後に画像が読み込まれた場合、スペースが確保されていないと、レイアウトが大きくズレる。

Lighthouseの項目「Image elements have explicit width and height」に、レイアウトがズレている画像が表示される。

画像クレジット: Piumi Liyana Gunawardhana

4. アニメーションCSSへの置き換え

アニメーションは、レイアウトのズレという点で、Web Vitalsに最も影響を与える。

Lighthouseの項目「Avoid non-composited animations」で、パフォーマンスの低いアニメーションを見つけることができる。

画像クレジット: Piumi Liyana Gunawardhana

詳細はCSSでウェブのバイタルを改善する方法を参照。