# サイト表示速度の改善方法｜Core Web Vitals対策ガイド 元のページ: サイト表示速度の改善方法、Core Web Vitalsの最適化など、パフォーマンス改善の知識をまとめています。 ## **表示速度の改善はどこから手をつけるか｜優先順位の考え方** 表示速度の改善は施策の数が多く、どれから着手するかで結果が変わります。効果の大きさと実装にかかる手間の2つの軸で並べ替えると、優先順位を判断しやすくなります。 最初に着手すべきなのは、効果が大きく手間が小さい施策です。ファーストビューに表示される画像の形式と寸法の指定、不要な外部スクリプトの削除、画像の遅延読み込みの設定などが該当します。設定の追加や削除で完結するため、着手から効果の確認までが短く済みます。 次に検討するのが、効果は大きいものの相応の作業を伴う施策です。CDNの導入、フォント配信の見直し、サーバー応答時間の短縮などが含まれます。実施には設計の判断が必要になるため、計測の結果で改善の余地が確認できてから進めます。 手間が大きく効果の読みにくい施策は、後回しにするか、別の目的と合わせて実施します。レンダリング方式の変更やCMSの入れ替えは、表示速度だけを理由に単独で行うと投資に見合わないことがあります。サイトの作り直しや構成変更の予定があるときに、まとめて検討するのが現実的です。 着手の順番を決める際は、対象ページの優先度も合わせてください。すべてのページを一律に扱うのではなく、流入の多いページと、問い合わせや申し込みにつながるページから改善すると、同じ工数でも成果が見えやすくなります。 | **施策** | **効果の大きさ** | **実装の手間** | **着手順** | | - | - | - | - | | ファーストビュー画像の形式・寸法の指定 | 大 | 小 | 1 | | 不要な外部スクリプトの削除 | 大 | 小 | 1 | | 画像の遅延読み込みの設定 | 中 | 小 | 1 | | フォント読み込みの見直し | 中 | 中 | 2 | | CDN・エッジキャッシュの導入 | 大 | 中 | 2 | | サーバー応答時間の短縮 | 大 | 中〜大 | 2 | | レンダリング方式の見直し | 大 | 大 | 3 | | CMS・基盤の入れ替え | 大 | 大 | 3 | ## **Core Web Vitalsの3指標（LCP・INP・CLS）と目標値** Core Web Vitalsは、表示速度と操作性を利用者の体感に近い形で数値化した指標です。現在は次の3つで構成されています。 LCPは、画面内で最も大きな要素が表示されるまでの時間です。多くの場合、ファーストビューの画像や見出しが対象になります。数値が悪い場合は、画像の重さ、サーバーの応答時間、読み込みの順序のいずれかに原因があります。 INPは、利用者の操作に対して画面が反応するまでの時間です。ボタンを押してから表示が変わるまでの待ち時間が該当し、JavaScriptの処理が重い場合に悪化します。 CLSは、読み込みの途中で表示位置がずれる量を示します。画像や広告の表示領域があらかじめ確保されていない場合や、Webフォントの差し替えで文字の大きさが変わる場合に発生します。 これらの指標には、実際の利用者の環境で計測されたデータと、一定の条件で計測したデータの2種類があり、判断の基準になるのは前者です。計測ツール上のスコアが良好でも、実際の利用環境での数値が基準を満たしていないことがあるため、両方を確認してください。 | **指標** | **測っているもの** | **良好** | **要改善** | **不良** | | - | - | - | - | - | | LCP | 最も大きな要素が表示されるまでの時間 | 2.5秒以下 | 2.5秒超〜4.0秒 | 4.0秒超 | | INP | 操作に対して画面が反応するまでの時間 | 200ミリ秒以下 | 200ミリ秒超〜500ミリ秒 | 500ミリ秒超 | | CLS | 読み込み中に表示位置がずれる量 | 0.1以下 | 0.1超〜0.25 | 0.25超 | ## **計測から改善までの進め方** 改善を単発の作業で終わらせないために、次の順序で進めます。 第1段階は現状の把握です。改善の対象とするページを決め、実際の利用環境での数値と、計測ツール上の数値の両方を記録します。この時点の数値が、後で効果を判断する基準になります。 第2段階は原因の特定です。指標が悪い理由が、画像・スクリプト・フォント・サーバー応答のどこにあるかまで切り分けます。読み込みの経過を時系列で表示する機能を使うと、待ち時間が発生している箇所を特定できます。 第3段階は施策の選定と実施です。効果と手間で並べた優先順位に沿って、上から順に対応します。複数の施策を同時に入れると、どれが効いたのかを判断できなくなるため、可能な範囲で分けて反映します。 第4段階は効果の確認です。実際の利用環境の数値は、一定期間のデータが蓄積されてから反映されます。反映前の数値と比較して判断してください。 第5段階は継続的な監視です。公開後にページを追加したり、外部のタグを追加したりすると数値は変動します。定期的に確認する仕組みを用意しておくと、悪化に早く気づけます。 ## サイト表示速度の改善方法について学ぶ ### 計測する - ### [サイト表示速度とは？なぜUXとSEOの両方に影響するのか](https://chot-inc.com/knowledge/what-is-site-speed) [サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説します。直帰率・CV率・Core Web Vitalsのランキング要因としての位置づけ・速度が遅くなる6つの原因をまとめています。](https://chot-inc.com/knowledge/what-is-site-speed) - ### [Core Web Vitalsとは？LCP・INP・CLSの意味と目標値](https://chot-inc.com/knowledge/core-web-vitals-explained) [Core Web VitalsのLCP・INP・CLSの意味と目標値を解説します。各指標の定義・良好・要改善・不良の基準・悪化する原因・Field DataとLab Dataの違いをまとめています。](https://chot-inc.com/knowledge/core-web-vitals-explained) - ### [Lighthouseの使い方｜スコアの見方と表示速度の改善手順](https://chot-inc.com/knowledge/lighthouse-guide) [LighthouseとはGoogleのパフォーマンス計測ツールです。PageSpeed Insights・Chrome DevTools・CLIの3つの起動方法・スコアの読み方・改善サイクルの回し方をまとめています。](https://chot-inc.com/knowledge/lighthouse-guide) - ### [表示速度の計測方法｜PageSpeed Insights・GTmetrixの読み方](https://chot-inc.com/knowledge/pagespeed-gtmetrix-guide) [表示速度の計測方法としてPageSpeed InsightsとGTmetrixの読み方を解説します。スコアの構成・ウォーターフォールの読み方・2つのツールの使い分けをまとめています。](https://chot-inc.com/knowledge/pagespeed-gtmetrix-guide) ### 改善する - ### [画像最適化の完全ガイド｜WebP・遅延読み込み・next/imageの活用](https://chot-inc.com/knowledge/image-optimization-guide) [画像最適化の完全ガイドとしてWebP・遅延読み込み・next/imageの活用を解説します。フォーマット選択・srcset・lazy loading・CLSを防ぐwidth/height設定をまとめています。](https://chot-inc.com/knowledge/image-optimization-guide) - ### [フォント読み込み最適化｜CLSを防ぐフォント戦略](https://chot-inc.com/knowledge/font-optimization-cls) [フォント読み込み最適化としてCLSを防ぐフォント戦略を解説します。FOITとFOUTの違い・font-displayの5つの設定値・next/fontによる自動最適化・日本語フォント対策をまとめています。](https://chot-inc.com/knowledge/font-optimization-cls) - ### [Next.jsでCore Web Vitalsを改善する設定まとめ](https://chot-inc.com/knowledge/nextjs-core-web-vitals) [Next.jsでCore Web Vitalsを改善する設定をまとめて解説します。next/image・next/font・Metadata API・next/script・Vercel SpeedInsightsの活用方法を整理しています。](https://chot-inc.com/knowledge/nextjs-core-web-vitals) - ### [CDN・エッジキャッシュとは？Vercelのエッジネットワークの活用](https://chot-inc.com/knowledge/cdn-edge-cache) [CDN・エッジキャッシュとは何か、Vercelのエッジネットワーク活用を解説します。CDNの仕組み・キャッシュ戦略・ISRとOn-Demand Revalidation・CloudflareとVercelの比較をまとめています。](https://chot-inc.com/knowledge/cdn-edge-cache) - ### [WordPressが遅い・重い原因の切り分け方｜プラグイン・サーバー・DBの改善策](https://chot-inc.com/knowledge/wordpress-slow-fix) [WordPressが遅い原因と改善策をプラグイン・サーバー・コードの問題別に解説します。WP Rocket・Imagify・Cloudflare・Kinstaへの移行など施策の優先順位をまとめています。](https://chot-inc.com/knowledge/wordpress-slow-fix) ### 進め方と事例 - ### [表示速度改善プロジェクトの進め方｜診断から施策実装まで](https://chot-inc.com/knowledge/speed-improvement-project) [表示速度改善プロジェクトの進め方として診断から施策実装までを解説します。現状診断・優先順位付け・実装チェックリスト・効果測定・継続的モニタリング体制の設計をまとめています。](https://chot-inc.com/knowledge/speed-improvement-project) ## よくある質問 順位を決める要素の1つではありますが、これだけで大きく順位が動くものではありません。内容の適合性が同程度の場合に差が出る位置づけと捉え、コンテンツの改善と並行して進めるのが現実的です。 点数そのものよりも、3つの指標が良好の範囲に入っているかを基準にしてください。スコアは計測する環境によって変動するため、同じ条件で複数回計測し、傾向で判断します。 実際の利用環境の数値は一定期間のデータをもとに算出されるため、反映までに時間差があります。また、改善した箇所が対象ページの指標に影響していない場合もあります。切り分けのため、計測ツール上の数値も合わせて確認してください。 改善できます。画像の最適化、キャッシュの設定、不要なプラグインの整理で数値が変わることは多くあります。それでも基準に届かない場合に構成の見直しを検討する、という順序が無理のない進め方です。