サイト表示速度の改善方法｜Core Web Vitals対策ガイド

表示速度の改善はどこから手をつけるか｜優先順位の考え方

表示速度の改善は施策の数が多く、どれから着手するかで結果が変わります。効果の大きさと実装にかかる手間の2つの軸で並べ替えると、優先順位を判断しやすくなります。

最初に着手すべきなのは、効果が大きく手間が小さい施策です。ファーストビューに表示される画像の形式と寸法の指定、不要な外部スクリプトの削除、画像の遅延読み込みの設定などが該当します。設定の追加や削除で完結するため、着手から効果の確認までが短く済みます。

次に検討するのが、効果は大きいものの相応の作業を伴う施策です。CDNの導入、フォント配信の見直し、サーバー応答時間の短縮などが含まれます。実施には設計の判断が必要になるため、計測の結果で改善の余地が確認できてから進めます。

手間が大きく効果の読みにくい施策は、後回しにするか、別の目的と合わせて実施します。レンダリング方式の変更やCMSの入れ替えは、表示速度だけを理由に単独で行うと投資に見合わないことがあります。サイトの作り直しや構成変更の予定があるときに、まとめて検討するのが現実的です。

着手の順番を決める際は、対象ページの優先度も合わせてください。すべてのページを一律に扱うのではなく、流入の多いページと、問い合わせや申し込みにつながるページから改善すると、同じ工数でも成果が見えやすくなります。

Core Web Vitalsの3指標（LCP・INP・CLS）と目標値

Core Web Vitalsは、表示速度と操作性を利用者の体感に近い形で数値化した指標です。現在は次の3つで構成されています。

LCPは、画面内で最も大きな要素が表示されるまでの時間です。多くの場合、ファーストビューの画像や見出しが対象になります。数値が悪い場合は、画像の重さ、サーバーの応答時間、読み込みの順序のいずれかに原因があります。

INPは、利用者の操作に対して画面が反応するまでの時間です。ボタンを押してから表示が変わるまでの待ち時間が該当し、JavaScriptの処理が重い場合に悪化します。

CLSは、読み込みの途中で表示位置がずれる量を示します。画像や広告の表示領域があらかじめ確保されていない場合や、Webフォントの差し替えで文字の大きさが変わる場合に発生します。

これらの指標には、実際の利用者の環境で計測されたデータと、一定の条件で計測したデータの2種類があり、判断の基準になるのは前者です。計測ツール上のスコアが良好でも、実際の利用環境での数値が基準を満たしていないことがあるため、両方を確認してください。

計測から改善までの進め方

改善を単発の作業で終わらせないために、次の順序で進めます。

第1段階は現状の把握です。改善の対象とするページを決め、実際の利用環境での数値と、計測ツール上の数値の両方を記録します。この時点の数値が、後で効果を判断する基準になります。

第2段階は原因の特定です。指標が悪い理由が、画像・スクリプト・フォント・サーバー応答のどこにあるかまで切り分けます。読み込みの経過を時系列で表示する機能を使うと、待ち時間が発生している箇所を特定できます。

第3段階は施策の選定と実施です。効果と手間で並べた優先順位に沿って、上から順に対応します。複数の施策を同時に入れると、どれが効いたのかを判断できなくなるため、可能な範囲で分けて反映します。

第4段階は効果の確認です。実際の利用環境の数値は、一定期間のデータが蓄積されてから反映されます。反映前の数値と比較して判断してください。

第5段階は継続的な監視です。公開後にページを追加したり、外部のタグを追加したりすると数値は変動します。定期的に確認する仕組みを用意しておくと、悪化に早く気づけます。

サイト表示速度の改善方法について学ぶ

計測する

改善する

進め方と事例