【Web高速化】Web Vitals

サーチコンソールでステータス「不良」のページが多く存在するため「良好」になるようにしたい

そのためにはGoogleが定めるWeb Vitalsの改善がよいとされている

developers-jp.googleblog.com

Web Vitalsは、ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組み

Web Vitalsのうち特に重要視されるCore Web Vitalsと呼ばれる以下の３つを改善するとよいとされている

• LCP (Largest Contentful Paint)
  ユーザーが URL をリクエストしてから、ビューポートに表示される最大のコンテンツ要素がレンダリングされるまでの時間
• FID（First Input Delay）
  最初にページ内でリンクのクリックなどの操作をして、その操作にブラウザが応答するまでの時間
• CLS（Cumulative Layout Shift）
  読み込み時のページレイアウトの移動量。評価スコアの範囲は 0～1 で、0 は移動なし、1 は移動量が最大を意味する

	良好	改善が必要	低速
LCP	2.5 秒未満	4 秒以下	4 秒を超える
FID	100 ミリ秒未満	300 ミリ秒以下	300 ミリ秒を超える
CLS	0.1 未満	0.25 以下	0.25 を超える

LCPについて

サイトにはトップページと一覧ページにキービジュアルがあり、それがLCPの対象要素になる

この要素の描画が4秒以上のため「不良」という判定となっている

要因

https://web.dev/optimize-lcp/

• サーバーの応答時間が遅い
• レンダリングをブロックするJavaScriptとCSSがある
• リソースの読み込み時間が遅い
  • jsやcssの最小化
  • 他のリソースのロード
    • img要素
    • image要素内のsvg要素
    • video要素
    • url()（CSSグラデーションではなく）関数を介してロードされた背景画像を持つ要素
    • テキストノードまたはその他のインラインレベルのテキスト要素を含むブロックレベルの要素
• クライアント側のレンダリング

FIDについて

ユーザーが最初にページを操作してから、ブラウザがその操作に実際に応答できるまでの時間が遅い

実際のユーザ操作が必要になるので、代替としてTBT（Total Blocking Time）を改善する

対策

• ロングタスクをみなおす
• ページを最適化する
  • 重要ではないコンポーネントのコストのかかるスクリプトの読み込み（および実行）をクリティカルパスから外す
  • サードパーティのスクリプトの実行を減らす
• ウェブワーカーを使用する
• JavaScriptの実行時間を短縮する
  • コード分割（遅延読み込み）

CLS

画面のガタつき度

ロードが終わった画像などのコンテンツが急にでてきたことで、他のコンテンツが下に押し出されて、クリックしようとしたら別のものをクリックしてしまったなど
https://web.dev/optimize-cls/

対策

• 寸法のない画像
• サイズのない広告、埋め込み、iframe
• 動的に挿入されたコンテンツ
• FOIT / FOUTを引き起こすWebフォント
• アニメーション

寸法のない画像

• imgタグにwidthとheightを入れる 　レスポンシブデザインにするため100%にすることが多かったが最新のブラウザでは指定した縦横幅をアスペクト比として解釈するので、とりあえず指定しておくのが良い

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">`

あとは、ChromeとFirefoxでは以下のスタイルが使える

img {
    aspect-ratio: attr(width) / attr(height);
}

参考

https://seopack.jp/seoblog/searchconsole-cls-lcp-fid/#LCPFIDCLS