2021.06.09
Core Web Vitalsを改善するときの基本的な考え方
Core Web Vitalsの改善では、ファーストビュー（Above the fold）で使用するコンテンツを最優先で表示することが基本となります。
参照元：Extract critical CSS
（図1：ファーストビューのイメージ図）
一般的に表示速度の改善はWebサイトへの機能追加や要素追加とトレードオフの関係にあります。ファーストビューの表示速度を意識しつつ、ユーザーの優先順位に沿ってWebサイトの機能や要素を設計することが重要です。表示速度に悪影響を及ぼしやすく、ユーザーにとっての優先順位も低い設計として、例えば以下のようなものがあります。担当しているWebサイトに該当している箇所がないか見直すと良いでしょう。
・Webサイトのトップページに見せたいコンテンツを詰め込みすぎている
・ユーザーの行動分析用に大量の計測ツールを埋め込んでいる
・モバイルデバイスに対して解像度の高すぎる画像を表示している
また、日々機能追加や要素追加がおこなわれるWebサイトでは、Core Web Vitalsを一度改善しても時間経過とともに元の状態に戻ってしまうことも少なくありません。Googleの社内調査によると40%のWebサイトが表示速度改善の6か月後にリグレッション（後退）を起こすというデータもあるそうです。
参照元：Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19)
（図2：Google I/O 2019で、40%のWebサイトが表示速度改善の6か月後にリグレッションを起こすと発表された様子）
これを防ぐため、Googleはページのパフォーマンスを「バジェット（予算）」と捉え、その範囲内でWebサイトを構築するという考え方を推奨しています。あらかじめ、ページごとにJavaScriptは200KB以内、画像は300KB以内、のようなルールを定めておき、この範囲内でWebサイトが運用されているかをモニタリングするという方法です。バジェットを超えそうな場合には機能削減などのトレードオフを検討できるようにしておくことで、Core Web Vitalsを良好な状態に保ちやすくなります。自社のWebサイトに沿ったバジェットの定義をおこなうことを推奨します。
参考：Google Developers Japan: パフォーマンスバジェットのご紹介 - ウェブパフォーマンスのための予算管理、Performance budgets 101
Core Web Vitalsの主な課題とその改善策
本章では、Core Web Vitalsの改善に向けてPageSpeed Insightsで表示される主要な課題についてご紹介します。Core Web Vitalsの課題は、大きく「JavaScript/CSSに関する課題」「画像やその他のリソースに関する課題」「リソース取得方式の課題」の3つに分類されるため、この分類ごとに解説します。
JavaScript/CSSに関する課題
・レンダリングを妨げるリソースの除外 / 使用していない JavaScript の削除 / 使用していない CSS を削除してください
JavaScriptやCSSファイルの読み込みがレンダリングを妨げている場合や、未使用のJavaScriptやCSSがある場合に表示されます。これらの課題が表示されたら以下のステップで改善します。
1.重要でないリソースを特定する
Google Chromeのデベロッパーツールの[カバレッジ] タブを利用すると、未使用のリソースやファーストビューで使われていないリソースを確認することができます。使われていない（赤色）リソースを確認して、レンダリングを妨げないよう非同期化して読み込むべきか、削除するべきかを決めましょう。
参照元：Eliminate render-blocking resources
（図3：Google Chromeのデベロッパーツールの[カバレッジ] タブ）
2.方針に沿って特定したリソースを改善する
ファーストビューに必要のないJavaScriptやCSSは、すべて非同期で読み込みましょう。JavaScriptにはasyncまたはdefer属性をつけてローディング後の実行を非同期化します。CSSは、ファーストビューで使う定義のみインライン（styleタグ）で読み込みます。未使用のリソースがある場合は、読み込まないようにしましょう。
・JavaScript の最小化 / CSS の最小化
JavaScriptやCSSのファイルサイズや転送量が大きい場合に表示されます。JavaScriptやCSSをまとめることのできるwebpackなどのツールを用いて、圧縮・軽量化しましょう。CSSファイルでは、改行やインデントを減らしてファイルサイズを圧縮する手法も有効です。
参照元：Minify CSS
（図4：CSSファイルのサイズ削減イメージ）
画像やその他のリソースに関する課題
・画像要素で width と height が明示的に指定されていない
CLSに影響する課題です。画像要素のサイズが指定されていないためにレイアウトシフトが起こっているケースで表示されます。画像や動画の要素には、常にwidthとheightの属性をつけてサイズを指定するようにしましょう。CSSのaspect-ratioプロパティを利用する方法もあります。また、Webサイト内で広告を配信している場合は、広告が表示されるスペースを事前に確保することでレイアウトシフトを防ぎましょう。
レイアウトシフトが発生している要素は、PageSpeed Insightsから確認できます。
（図5：PageSpeed InsightsでCLSに該当する要素を確認できる）
・次世代フォーマットでの画像の配信
Webpなどの次世代画像フォーマットを利用していない場合に表示されます。次世代画像フォーマットに置き換えると、これまでと同じ画質の画像をより小さなファイルサイズで配信できることになり、表示速度の改善に効果があります。一方で次世代画像フォーマットはブラウザによっては対応していないこともあるので、未対応のブラウザには従来の画像フォーマットを表示するなど、個別の対応が必要となる点に注意が必要です。
・オフスクリーン画像の遅延読み込み
ファーストビュー以外で表示する画像も初回ロード時にダウンロードしており、表示速度に悪影響を及ぼしている場合に表示されます。原則として、ファーストビュー以外の画像はすべて遅延ローディングするようにしましょう。Web標準となっている、Intersection Observer APIに準拠したライブラリの利用が推奨されています。
リソース取得方式の課題
・最初のサーバー応答時間を速くしてください
最初にリクエストしてからサーバーが応答するまでの時間が600ms以上かかる場合に表示されます。サーバーの応答に時間がかかる原因は、速度の遅いアプリケーションロジックやデータベースクエリ、ルーティング、フレームワーク、ライブラリ、リソースによるCPU消費、メモリ不足など多岐に渡ります。この課題の解決には、何がボトルネックになっているのかを特定して対処することが重要になります。
・Largest Contentful Paint の画像のプリロード
LCPに関連する課題です。ファーストビュー内で最大の画像またはテキストブロック要素がプリロードされておらず、表示に時間がかかっている場合に表示されます。<link rel="preload">を用いて、先に読み込むようにしましょう。
該当する要素は、PageSpeed Insightsから確認できます。
（図6：PageSpeed InsightsでLCPに該当する要素を確認できる）
まとめ
本記事ではCore Web Vitalsの改善について、基本的な考え方と主要な課題への対応方法を紹介しました。Core Web Vitalsを良好な状態に保つには、一度の取り組みで十分ということはありません。ページエクスペリエンス アップデート以降も、継続的にモニタリングして良好な状態を保てるようにしましょう。
▼関連資料
