Webサイトの表示速度は、ユーザー体験とSEOの両方に直結する重要な指標です。ページの読み込みに3秒以上かかると、約53%のモバイルユーザーがサイトを離脱するというGoogleの調査結果も報告されています。さらに、GoogleはCore Web Vitalsをランキング要因として公式に採用しており、表示速度の遅いサイトは検索順位で不利になる可能性があります。
しかし、多くのWebサイトは適切な最適化を行うだけで、表示速度を大幅に改善できます。画像の最適化、コードの圧縮、キャッシュの活用など、基本的な施策だけでも劇的な効果が期待できます。
この記事では、Core Web Vitalsの3つの指標を軸に、Webサイトの表示速度を改善する具体的な方法を解説します。
Core Web Vitalsとは？3つの指標を理解する
LCP（Largest Contentful Paint）
LCPは、ページの中で最も大きなコンテンツ要素（メインビジュアル画像、見出しテキストなど）が表示されるまでの時間を計測する指標です。ユーザーが「ページが読み込まれた」と体感するタイミングに近い指標で、Googleの基準では2.5秒以内が「良好」と判定されます。
- 良好（Good）：2.5秒以下
- 改善が必要（Needs Improvement）：2.5秒超〜4.0秒以下
- 不良（Poor）：4.0秒超
INP（Interaction to Next Paint）
INPは、ユーザーの操作（クリック、タップ、キーボード入力など）から、画面が次に描画更新されるまでの時間を計測する指標です。以前のFID（First Input Delay）に代わって採用された新しい指標で、ページ全体を通じたインタラクティブ性を評価します。
- 良好（Good）：200ミリ秒以下
- 改善が必要：200ミリ秒超〜500ミリ秒以下
- 不良：500ミリ秒超
CLS（Cumulative Layout Shift）
CLSは、ページの読み込み中に要素が予期せずずれる現象（レイアウトシフト）の累積量を計測する指標です。「読もうとしたテキストが広告の読み込みで突然ずれた」「クリックしようとしたボタンが画像の読み込みで移動した」といったユーザーのストレスを数値化しています。
- 良好（Good）：0.1以下
- 改善が必要：0.1超〜0.25以下
- 不良：0.25超
Core Web Vitalsのスコアは、PageSpeed Insightsで簡単に計測できます。URLを入力するだけで、LCP・INP・CLSのスコアと改善提案が表示されます。まずは自分のサイトの現状を確認するところから始めましょう。
LCPを改善する方法
画像の最適化
LCPの遅延原因の多くは、メインビジュアルなどの大きな画像の読み込みに時間がかかることです。以下の対策で画像の読み込みを高速化できます。
- 次世代フォーマットへの変換：JPEG/PNGをWebPまたはAVIF形式に変換する。WebPはJPEGと比較して25〜35%ファイルサイズを削減でき、AVIFはさらに高い圧縮率を実現します
- 適切なサイズの提供：表示サイズに合わせた画像を用意する。幅600pxの領域に幅2000pxの画像を表示するのは無駄が大きい
- srcset属性の活用：デバイスの画面幅や解像度に応じて最適なサイズの画像を自動的に選択させる
- 遅延読み込み（lazy loading）：ファーストビュー外の画像にloading=”lazy”を付与し、スクロール時に読み込む
LCPの対象となるメインビジュアル画像にloading=”lazy”を付けてはいけません。遅延読み込みは「ファーストビュー外の画像」に対して使用するものであり、LCPの対象要素に適用すると逆にLCPが悪化します。LCPの対象画像にはfetchpriority=”high”を指定して、優先的に読み込ませましょう。
サーバー応答時間の短縮
サーバーがHTMLを返すまでの時間（TTFB: Time to First Byte）が遅いと、LCPも遅くなります。以下の対策が有効です。
- サーバーのスペック向上：共用サーバーからVPSや専用サーバーへの移行を検討する
- CDN（Content Delivery Network）の導入：CloudflareやCloudFrontなどのCDNを導入し、ユーザーに近いサーバーからコンテンツを配信する
- データベースの最適化：不要なデータの削除、インデックスの追加、クエリの最適化を行う
レンダリングを妨げるリソースの排除
CSSやJavaScriptの読み込みがHTMLの描画をブロック（レンダリングブロック）している場合、LCPが遅延します。
- CSSの最適化：ファーストビューに必要なCSSだけをインライン化し、残りは非同期で読み込む
- JavaScriptの非同期読み込み：script要素にdeferまたはasync属性を追加する
- 不要なCSSとJSの削除：使用していないCSSルールやJSファイルを特定して削除する
INPを改善する方法
JavaScriptの実行時間を短縮する
INPの遅延の主な原因は、JavaScriptの処理がメインスレッドを長時間ブロックすることです。ユーザーの操作（クリック、タップなど）に対してJavaScriptの処理が割り込み、画面の更新が遅れると、INPのスコアが悪化します。
- 長時間タスクの分割：50ミリ秒以上かかるJavaScriptタスクを複数の小さなタスクに分割する
- 不要なJavaScriptの削除：使われていないJSライブラリやプラグインを洗い出して削除する
- コード分割（Code Splitting）：WebpackやViteなどのバンドラーを使い、ページごとに必要なJSだけを読み込む
サードパーティスクリプトの管理
広告スクリプト、アクセス解析、SNSウィジェットなどのサードパーティスクリプトは、INPを悪化させる主要因の一つです。以下の対策で影響を軽減できます。
- 不要なサードパーティスクリプトを削除する
- 必須のスクリプトにはdeferを付けて非同期で読み込む
- ユーザーの操作後に読み込む遅延実行パターンを検討する
CLSを改善する方法
画像・動画にサイズを明示する
CLSの最も一般的な原因は、画像や動画のサイズが明示されていないことです。ブラウザは画像のダウンロードが完了するまでサイズが分からないため、読み込み後にレイアウトがずれます。
- すべてのimg要素にwidthとheight属性を指定する
- CSSでaspect-ratioプロパティを使い、画像の縦横比を事前に確保する
- 動画やiframeにも同様にサイズを明示する
Webフォントの読み込みによるシフトを防ぐ
Webフォントの読み込み中にシステムフォントで表示され、フォント読み込み完了後に切り替わる際にレイアウトがずれることがあります（FOUT: Flash of Unstyled Text）。
- font-display: swapを指定してフォントの切り替え動作を制御する
- Webフォントをpreloadで先行読み込みする
- フォールバックフォントのサイズ調整（size-adjust）でずれを最小化する
広告スペースの事前確保
広告の読み込みによるレイアウトシフトを防ぐには、広告の表示領域をCSSであらかじめ確保しておきます。min-heightを指定してプレースホルダー的なスペースを確保することで、広告が読み込まれてもレイアウトがずれなくなります。
その他の高速化テクニック
ブラウザキャッシュの活用
ブラウザキャッシュを適切に設定することで、2回目以降のアクセス時にサーバーへのリクエストを減らし、表示速度を大幅に向上させることができます。.htaccessやサーバーの設定でCache-Controlヘッダーを追加し、静的ファイル（画像、CSS、JS）のキャッシュ期間を設定しましょう。
テキスト圧縮（Gzip/Brotli）
サーバーからクライアントに送信されるHTML、CSS、JavaScriptなどのテキストファイルを圧縮することで、転送量を大幅に削減できます。Brotli圧縮はGzipよりもさらに高い圧縮率を実現し、主要なブラウザで広くサポートされています。
CSSとJavaScriptの圧縮（Minify）
CSSとJavaScriptファイルから、コメント、空白、改行などの不要な文字を除去してファイルサイズを削減します。ビルドツール（Webpack、Viteなど）を使えば、ビルド時に自動的にMinify処理が実行されます。
プリフェッチとプリコネクト
link要素のrel属性を活用して、必要なリソースを事前に準備させることができます。
- dns-prefetch：外部ドメインのDNSルックアップを事前に行う
- preconnect：外部ドメインへの接続（DNS＋TCP＋TLS）を事前に確立する
- preload：重要なリソース（フォント、ヒーロー画像など）を優先的に読み込む
WordPressサイトの高速化
キャッシュプラグインの導入
WordPressサイトの場合、キャッシュプラグインの導入が最も効果的な高速化施策の一つです。WP Fastest Cache、W3 Total Cache、WP Super Cacheなどのプラグインを導入することで、動的に生成されるページを静的HTMLとしてキャッシュし、サーバーの負荷を軽減できます。
画像最適化プラグインの活用
ShortPixel、Imagify、EWWWなどの画像最適化プラグインを使えば、アップロードした画像を自動的にWebP形式に変換し、ファイルサイズを圧縮できます。過去にアップロードした画像の一括最適化にも対応しています。
不要なプラグインの整理
WordPressのプラグインが増えると、それぞれのプラグインが読み込むCSS・JSファイルが増加し、ページの表示速度が低下します。使っていないプラグインは「無効化」ではなく「削除」し、定期的にプラグインの棚卸しを行いましょう。
キャッシュプラグインを複数導入するのは避けましょう。キャッシュの競合が発生し、かえって不具合やパフォーマンス低下を招く原因になります。キャッシュプラグインは1つに絞り、その他の高速化はプラグインの設定内で行うのが安全です。
計測と継続的な改善
定期的な計測の重要性
高速化は一度対策して終わりではありません。コンテンツの追加、プラグインの更新、サードパーティスクリプトの追加などにより、パフォーマンスは徐々に劣化します。Google Search ConsoleのCore Web Vitalsレポートで定期的にスコアを確認し、問題が発生したら迅速に対応しましょう。
ラボデータとフィールドデータの違い
パフォーマンスの計測には「ラボデータ」と「フィールドデータ」の2種類があります。
- ラボデータ：Lighthouse、PageSpeed Insightsなどのツールが特定の条件で計測した結果。再現性が高く、開発時の改善指標として有用
- フィールドデータ：実際のユーザーが体験した結果の集計（Chrome UX Report）。Googleのランキング評価に使用されるのはこちら
ランキングへの影響を確認するにはフィールドデータを重視しつつ、改善施策の効果検証にはラボデータを活用するという使い分けがおすすめです。
よくある質問（Q&A）
Q：PageSpeed Insightsのスコアが低いと検索順位に影響しますか？
A：Googleはcore Web Vitalsをランキング要因として使用していますが、コンテンツの質や関連性が依然として最も重要な要因です。表示速度だけで順位が大きく変動することは少ないですが、同程度のコンテンツ品質のサイト間では、Core Web Vitalsのスコアが良い方が有利になる可能性があります。
Q：モバイルとPCで速度が大きく違うのですが、どちらを優先すべきですか？
A：Googleはモバイルファーストインデックスを採用しているため、モバイルの速度を優先的に改善すべきです。モバイルは回線速度やデバイス性能がPCより劣るため、画像の最適化やJavaScriptの軽量化がより大きな効果を発揮します。
Q：WebPとAVIF、どちらの画像フォーマットを使うべきですか？
A：AVIFの方が高い圧縮率を実現しますが、一部のブラウザではまだサポートが限定的です。現時点ではWebPが最も安全な選択肢です。picture要素を使ってAVIF → WebP → JPEG/PNGの優先順位でフォールバックを設定するのが理想的です。
Q：高速化のために最初に取り組むべき施策は何ですか？
A：最も費用対効果が高いのは画像の最適化（WebP変換＋サイズ適正化）です。次にキャッシュの設定、テキスト圧縮（Brotli/Gzip）の順で取り組むのがおすすめです。この3つだけでも多くのサイトでCore Web Vitalsのスコアが大幅に改善します。
Q：CDNを導入する効果はどのくらいありますか？
A：CDNはユーザーとサーバーの物理的な距離を短縮するため、特にグローバルなアクセスがあるサイトや、画像・動画などの静的コンテンツが多いサイトで大きな効果を発揮します。TTFBが200〜500ミリ秒短縮されるケースも珍しくありません。Cloudflareの無料プランから手軽に試すことができます。
まとめ
Webサイトの高速化は、Core Web Vitalsの3指標（LCP、INP、CLS）を基準に、それぞれの指標に適した改善施策を実施することが基本です。LCPには画像最適化とサーバー応答時間の短縮、INPにはJavaScriptの実行時間削減、CLSには画像サイズの明示と広告スペースの事前確保が効果的です。
まずはPageSpeed Insightsで現状のスコアを確認し、最も効果の大きい施策（画像のWebP変換、キャッシュ設定、テキスト圧縮）から順に対応していきましょう。高速化は一度の対応で完了するものではなく、定期的な計測と継続的な改善が重要です。
