Google I/O 2021 で発表されたコンテンツから、日本のデベロッパーへ向けて特にお届けしたいテーマに焦点を当て紹介をするウェビナーを拝見した
developersonair.withgoogle.com
その中でCWV（Core Web Vitals）に関する話の個人的メモ
指標のアップデートについて紹介されていた
LCP（Largetst Contentful Paing） background imageの除外とカルーセルの判定改善
CLS（Cumulative Layout Shift） 滞在時間の長いページでより公平に計測を行うため、セッションウィンドウを用いてCLSを計測する
滞在時間ないで発生するCLSを累積でカウントしていたが、CLSが発生して最大５秒間内に発生したCLSがカウントされるようになった
改善方法
LCP
- サーバーのレスポンス時間の改善
- レンダーブロッキングスクリプトを避ける
- 効率的な画像エンコード
- 次世代フォーマットでの画像配信
- テキスト圧縮の有効化
- オリジンへの事前接続
- リソースのプリロード
- JS/CSSのminify
- 未使用のCSSの削除
- など
CLS
- 画像に幅と高さを与える
- レイアウト変更が発生するフレームの挿入を避ける
- ウェブフォントにはfont-display: optionalをつけて、かつプリロードする
- など
FID & TBT
- JSの実行時間を削減する
- メインスレッドでのタスクを最小化する
- サードパーティコードは可能な限り遅延ロードする
- 未使用のJSの削除
- JSバンドルファイルに含まれた重複したモジュールを削除
- モダンブラウザにレガシーなJSを配信するのを避ける
- など
ツールについてはLighthouse8の件を以前に雑にまとめたので割愛
