③ テクニカルSEO

ページ速度の改善方法を徹底解説|計測から実装まで手順で紹介

ページ速度の改善方法を徹底解説|計測から実装まで手順で紹介

「ページが遅くて直帰率が下がらない…」「改善したいけど何から手をつければいい?」

ページ速度の問題は、ユーザー体験だけでなくSEOや売上にまで影響するため、多くのWeb担当者が悩むテーマのひとつです。

本記事では、ページ速度の計測ツールの使い方から8つの改善施策と優先順位の決め方まで解説しました。

最後まで読むことで、自分のサイトで今日から着手できる改善ステップが明確になり、スピード改善を体系的に進められるようになります。

ページ速度がSEO・CVR・直帰率に与える影響

ページ速度がSEO・CVR・直帰率に与える影響

ページ速度は、ユーザー体験だけでなく検索順位やビジネス成果にも直接影響する重要な指標です。

表示が遅いと直帰率・CVR・SEO評価の三方向でダメージが発生するため、改善の優先度は高いと言えます。

ページ速度がビジネスに与える主な影響は以下のとおりです。

  • 表示速度が遅くなるとユーザー離脱率はどう変わるか
  • GoogleのSEO評価におけるページ速度の位置づけ
  • CVRと売上への実害:遅延1秒あたりのビジネス損失

それぞれ順番に見ていきましょう。

表示速度が遅くなるとユーザー離脱率はどう変わるか

ページが遅くて直帰率が高いと感じている方は、まず速度と離脱の関係を数字で確認しておくことが重要です。

Think with Googleの調査(Google/SOASTA Research, 2017)によると、読み込み時間が1秒から5秒に増えると直帰率は90%増加します。

モバイルサイトで3秒以上の読み込みが生じると53%ものユーザーが離脱するという調査結果もあり、表示速度への許容度はきわめて低いと言えるでしょう。

つまり、表示速度の改善は単なる技術的な最適化ではなく、見込み客の流出を防ぐための緊急対策と捉えるべきです。

速度改善に取り組むことで、離脱率の低下とページ評価の向上が期待できます。

参考:Find out how you stack up to new industry benchmarks for mobile page speed(Think with Google) ※「Probability of Bounce」データより、読み込み1秒→5秒で直帰率90%増加の数値を引用

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

GoogleのSEO評価におけるページ速度の位置づけ

Googleは2018年7月、「スピードアップデート(Speed Update)」を正式に導入し、ページの読み込み速度をモバイル検索のランキング要素として採用しました。

ページ速度がSEO評価に影響する主な経路は以下のとおりです。

  • スピードアップデートによる直接的なランキング評価(極端に遅いページの評価が下がる)
  • Core Web Vitalsを通じたページエクスペリエンスシグナルへの影響
  • 直帰率の悪化がユーザー行動シグナルとして検索評価に間接的に影響する経路

ただし、スピードアップデートが影響するのはごくわずかな割合のクエリに限られており、検索クエリの意図は引き続き強力なランキングシグナルです。

したがって、良質なコンテンツを前提としながら、速度改善を上乗せで進める姿勢が現実的なアプローチと言えるでしょう。

参考:ページの読み込み速度をモバイル検索のランキング要素に使用します(Google Search Central) ※2018年7月からページ速度をモバイル検索のランキング要素として採用した事実を引用

関連記事:GoogleのSEOガイドライン6選|チェックリスト150個紹介!

CVRと売上への実害:遅延1秒あたりのビジネス損失

ページ速度の遅さがビジネスに与える打撃を理解しておくことで、改善への投資判断がしやすくなります。

遅延時間ごとのビジネス影響を整理すると以下のとおりです。

遅延状況 影響の種類 主な具体的影響
1秒→3秒 直帰率 直帰率が32%増加
1秒→5秒 直帰率 直帰率が90%増加
1秒→10秒 直帰率 直帰率が123%増加
読み込み遅延 CVR・売上 購入・申込のコンバージョンが低下

表示速度の遅さはCVRにも直結し、ページが読み込まれるまでに待ちきれないユーザーは購入や申込を完了せずに離脱してしまいます。

特にECサイトや問い合わせフォームを持つページでは、わずかな表示速度の改善が売上・リード数に大きな差をもたらすことが知られています。

参考:Find out how you stack up to new industry benchmarks for mobile page speed(Think with Google) ※直帰率増加の数値データ(1→3秒:32%増、1→5秒:90%増、1→10秒:123%増)を引用

関連記事:SEOの目標の5つの手順を解説!KPIの決め方と進捗管理

ページ速度が遅くなる5つの原因

ページ速度が遅くなる5つの原因

ページ速度の問題は多岐にわたりますが、多くのサイトで頻出する原因はある程度パターン化されています。

原因を正確に把握することが、効率よく改善施策を打てる最短ルートです。

ページ速度が遅くなる主な原因は以下のとおりです。

  1. 画像・動画ファイルが最適化されていない
  2. JavaScriptやCSSのコードが肥大化している
  3. サーバーの応答時間(TTFB)が長い
  4. ブラウザキャッシュが未設定または期限切れ
  5. リダイレクトやHTTPリクエストが過剰に発生している

各項目を詳しく解説します。

① 画像・動画ファイルが最適化されていない

ページ速度の問題に悩んでいる方の多くは、まず画像ファイルの扱いを見直す必要があります。

画像や動画の容量が大きいまま配信されると、ブラウザが全要素を読み込むまでの時間が大幅に延びてしまうからです。

特にスマートフォンでは回線速度が不安定なことも多く、大容量の画像ファイルが直帰率を直接引き上げる原因になります。

対策としては画像圧縮ツールの活用やWebP形式への変換が有効で、これだけで数秒単位の速度改善が見込めるでしょう。

動画についてもファーストビューへの自動再生を避け、遅延読み込みを設定するなど、初期表示に影響しない工夫が重要です。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

② JavaScriptやCSSのコードが肥大化している

JavaScriptやCSSのファイルが大きくなると、ブラウザはページのレンダリングを開始する前にこれらのファイルを全て読み込む必要があります。

不要なスクリプトやスタイルが積み重なると「レンダリングブロック」が発生し、特にモバイルではユーザーが何も表示されない画面を長時間見ることになります。

対策には不要コードの削除・ミニファイ(圧縮)・非同期読み込みの設定などがあり、いずれもPageSpeed Insightsで指摘される項目として頻出します。

ミニファイとは、コメントや余分なスペースを除去してファイルサイズを小さくする処理のことで、WordPressではプラグインで自動化できます。

また、使用しているテーマやプラグインが不要なCSSを大量に読み込んでいないか確認することも、改善の第一歩となるでしょう。

関連記事:GoogleのSEOガイドライン6選|チェックリスト150個紹介!

③ サーバーの応答時間(TTFB)が長い

サーバーの応答時間を示す指標がTTFB(Time To First Byte)で、ブラウザがリクエストを送信してから最初の1バイトを受け取るまでの時間を表します。

TTFBが長いと、その後の全ての読み込み処理が後ろにずれ込むため、TTFB改善はページ速度全体の底上げにつながります。

原因と改善策を整理すると以下のとおりです。

TTFBが長くなる原因 主な改善手段
低スペックのサーバー利用 高性能プランへの移行・VPS・専用サーバーへのアップグレード
データベースのクエリが遅い クエリの最適化・サーバーサイドキャッシュの活用
PHPバージョンが古い 最新のPHPバージョン(PHP 8系)に更新する
サーバーとユーザーの物理的距離 CDN(コンテンツデリバリネットワーク)の導入

Googleが推奨するTTFBの目安は600ミリ秒以内とされており、これを超えるサイトはサーバー起因の問題を優先的に調査することが大切です。

PageSpeed InsightsでもTTFBは主要な指摘項目として表示されるため、改善の優先度を判断する際の目安として活用するとよいでしょう。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

④ ブラウザキャッシュが未設定または期限切れ

ブラウザキャッシュとは、一度読み込んだ画像やCSS・JavaScriptなどのファイルをユーザーの端末に一時保存しておく仕組みです。

キャッシュが設定されていないと、再訪問したユーザーも毎回すべてのファイルをサーバーから取得することになります。

そのため、リピーターが多いサイトほどキャッシュ未設定による表示速度への悪影響が大きくなる傾向があります。

WordPressを利用している場合はW3 Total CacheやWP Rocketなどのキャッシュプラグインを使えば、設定ファイルの直接編集なしにキャッシュを有効化できます。

なお、キャッシュの有効期限を長く設定しすぎると更新が反映されにくくなるため、コンテンツの更新頻度に合わせてバランスよく設定することが大切です。

関連記事:オウンドメディアのSEO対策5選!内部SEOとAI対策も解説します

⑤ リダイレクトやHTTPリクエストが過剰に発生している

リダイレクトとは、あるURLにアクセスしたユーザーを別のURLへ転送する処理で、1回のリダイレクトごとに追加の通信が発生してページ速度が下がります。

特にリダイレクトが連鎖している場合(AがBに、BがCに転送されるなど)は、それだけ待ち時間が積み重なりユーザーに遅さを感じさせてしまいます。

また、ページ表示に必要なHTTPリクエストの数が多すぎることも速度低下の原因となり、リクエスト数を削減するだけで体感速度が大幅に改善されるケースがあります。

改善のためには、不要なリダイレクトを整理してURLを正規化し、複数のCSSやJavaScriptファイルを結合してリクエスト回数を減らすことが有効です。

サードパーティのタグやトラッキングコードが増えるとリクエスト数が急増するため、Google Tag Managerで一元管理しながら定期的に棚卸しすることをおすすめします。

関連記事:GoogleのSEOガイドライン6選|チェックリスト150個紹介!

ページ速度の計測ツールと確認方法

ページ速度の計測ツールと確認方法

ページ速度の改善に着手する前に、まず現状を正確に計測することが不可欠です。

Googleが無料で提供するツールを活用すれば、問題のある指標とその原因を素早く特定できます。

ページ速度の計測に活用できる主なツールは以下のとおりです。

  • PageSpeed Insightsでスコアと改善提案を確認する
  • Google Search ConsoleのCore Web Vitalsレポートを読む
  • Chrome DevToolsでボトルネックを特定する

一つずつ確認していきましょう。

PageSpeed Insightsでスコアと改善提案を確認する

ページ速度を計測したいと考えているなら、最初に試すべきツールがPageSpeed Insightsです。

URLを入力するだけでモバイルとPCそれぞれのスコアを0〜100点で算出し、具体的な改善提案もあわせて表示されます。

スコアの目安は次のとおりです。

  • 90以上:高速(Good)—そのまま維持しつつ細部を磨く
  • 50〜89:改善が必要(Needs Improvement)—指摘事項に順次対応する
  • 49以下:低速(Poor)—優先的に対処が必要

スコアが低い場合は「改善できる項目」に表示される指摘を優先的に確認し、節約できるバイト数や時間が多いものから着手することが効率的です。

なお、PageSpeed Insightsのスコアはラボデータ(模擬測定)とフィールドデータ(実ユーザーデータ)の両方が表示されるため、特にフィールドデータを重視して改善優先度を判断するとよいでしょう。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

Google Search ConsoleのCore Web Vitalsレポートを読む

Google Search Consoleには、Core Web Vitalsの状況をURL単位で確認できるレポート機能があります。

このレポートでは、LCP・INP・CLSの各指標ごとに「良好(Good)」「改善が必要(Needs Improvement)」「不良(Poor)」の3段階で評価されます。

重要なのは、Search ConsoleのデータがChromeのユーザー実測値(CrUX)に基づいているため、PageSpeed Insightsのラボデータより実態に近い評価となっていることです。

「不良」と判定されたURLグループを確認し、どの指標が問題になっているかを特定してから施策を検討することで、改善の優先度が明確になります。

なお、Search Consoleのデータは過去28日分の実績値を集計したものであるため、改善施策を実施してからスコアに反映されるまでおおむね数週間かかる点にも注意が必要です。

関連記事:SEOの目標の5つの手順を解説!KPIの決め方と進捗管理

Chrome DevToolsでボトルネックを特定する

PageSpeed InsightsやSearch Consoleで問題を把握したら、次はChrome DevToolsを使ってボトルネックを詳しく調べましょう。

DevToolsはChromeブラウザのF12キーで起動でき、ページ速度に関連する以下のパネルが特に有用です。

パネル名 確認できる内容
Lighthouseパネル スコアと改善提案(PageSpeed Insightsと同エンジン)
Networkパネル ファイルごとの読み込み時間・サイズ・リクエスト順序
Performanceパネル レンダリングの詳細な時系列分析(LCP・INPの発生箇所)
Coverageパネル JavaScriptとCSSの未使用コード割合の可視化

Networkパネルで転送量の多いリソースを特定することから始めると、原因の絞り込みが効率的に行えます。

モバイルでの表示速度を擬似的に確認したい場合は、NetworkパネルでCPUスロットリングとネットワーク速度の制限を設定してからテストするとよいでしょう。

関連記事:SEOのおすすめChrome拡張機能20選!初心者からプロも愛用

ページ速度を改善する8つの施策

ページ速度を改善する8つの施策

ページ速度の計測が完了したら、次は具体的な改善施策を実施する段階です。

優先度と効果の大きい施策を把握した上で、着実に実装していくことが重要です。

ページ速度改善の主な施策は以下のとおりです。

  1. 画像を圧縮してWebP形式に変換する
  2. 不要なJavaScript・CSSを削除・ミニファイする
  3. 遅延読み込み(Lazy Load)で画像描画を後回しにする
  4. ブラウザキャッシュの有効期限を適切に設定する
  5. gzip・Brotli圧縮でテキストファイルを軽量配信する
  6. CDNを導入してサーバー距離の影響を減らす
  7. サーバーを増強・移行してTTFBを短縮する
  8. WordPressの不要プラグインを削除・整理する

各ポイントをしっかり把握しておきましょう。

① 画像を圧縮してWebP形式に変換する

ページ速度改善の施策の中で、最も効果が出やすく着手しやすいのが画像の最適化です。

SquooshやImageOptimなどの無料ツールを使って既存の画像を圧縮し、次世代フォーマットであるWebPへ変換することを検討しましょう。

WebPはJPEGに比べて同等の画質でファイルサイズを25〜35%程度削減できるとされており、ページ全体のデータ量を大幅に軽量化できます。

WordPressの場合はShortPixelやEWWW Image Optimizerなどのプラグインを導入すると、アップロード時に自動的に圧縮・変換が行われるため手間を省けます。

また、ファーストビューに表示されるメイン画像(ヒーロー画像)は特に優先的に最適化することで、LCPスコアの改善にも直結するでしょう。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

② 不要なJavaScript・CSSを削除・ミニファイする

JavaScriptとCSSのコードが肥大化しているページでは、ミニファイと不要コードの削除を組み合わせた対応が有効です。

具体的な対処手順は以下のとおりです。

  1. Chrome DevToolsのCoverageパネルで未使用コードを特定する
  2. 使用頻度の低いスクリプトをasync/defer属性で非同期読み込みに変更する
  3. ミニファイツール(TerserやCSSNanoなど)またはWordPressプラグインで圧縮する

特にテーマやプラグインが自動で読み込む不要なCSSを削除するだけで、大幅なサイズ削減が見込めることがあります。

ミニファイ後は実際にページが正しく表示されるかを必ず確認し、スクリプトの衝突やデザイン崩れが起きていないかをテストするとよいでしょう。

関連記事:SEOのおすすめChrome拡張機能20選!初心者からプロも愛用

③ 遅延読み込み(Lazy Load)で画像描画を後回しにする

画像ファイルが多いページでは、スクロールしないと見えない位置の画像を最初から一括で読み込むことが速度低下の原因になります。

そこで有効なのが遅延読み込み(Lazy Load)で、スクロールして画像が表示範囲に近づいたタイミングで読み込みを開始する仕組みです。

HTML5ではimgタグにloading="lazy"を追加するだけで遅延読み込みが有効になり、追加のJavaScriptなしにファーストビューの読み込みを軽量化できます。

ただし、ファーストビューに表示されるメイン画像(LCP要素)には遅延読み込みを設定しないことが重要で、設定するとLCPスコアを悪化させてしまう原因となります。

WordPressでは多くのテーマがLazy Loadに標準対応していますが、プラグインで個別設定する場合は対象範囲を慎重に確認することをおすすめします。

関連記事:SEOの目標の5つの手順を解説!KPIの決め方と進捗管理

④ ブラウザキャッシュの有効期限を適切に設定する

ブラウザキャッシュの設定は、再訪問ユーザーのページ速度を劇的に改善できる施策のひとつです。

設定方法はサーバー環境によって異なりますが、基本的な手順は以下のとおりです。

  1. .htaccessファイルにCache-Controlヘッダーを記述し、ファイルの種類ごとに有効期限を設定する
  2. 画像・フォントは長期間(1年程度)、CSS・JSはバージョンアップのたびにキャッシュを無効化できるよう設定する
  3. WordPressの場合はキャッシュプラグイン(W3 Total CacheやWP Rocket等)で自動設定する

キャッシュの有効期限を適切に管理することで、ページ全体のサーバーへのリクエスト数を大幅に削減できます。

コンテンツを更新した際にキャッシュが残って古いページが表示されないよう、更新時のキャッシュクリア手順も合わせて整備しておくことが重要です。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

⑤ gzip・Brotli圧縮でテキストファイルを軽量配信する

gzipやBrotli圧縮は、サーバーからブラウザへ送信するHTMLやCSS・JavaScriptなどのテキストファイルを圧縮して送る仕組みです。

圧縮を有効にするだけでテキストファイルのデータ量を60〜80%程度削減できるとされており、コード変更を伴わない施策として効果が大きいと言えます。

gzipよりもBrotliのほうが圧縮率が高く、モダンなブラウザはいずれもBrotliに対応しているため、可能であればBrotliを優先的に設定することをおすすめします。

設定はサーバー側のhttpd.confや.htaccess、またはNginxの設定ファイルで行うことが一般的で、レンタルサーバーによっては管理画面から有効化できます。

PageSpeed InsightsでもgzipやBrotliが有効化されているかを確認できるため、計測の際に合わせてチェックしておくとよいでしょう。

関連記事:オウンドメディアのSEO対策5選!内部SEOとAI対策も解説します

⑥ CDNを導入してサーバー距離の影響を減らす

CDN(コンテンツデリバリネットワーク)は、世界各地に分散したサーバーにコンテンツを複製して配置し、ユーザーに最も近いサーバーから配信する仕組みです。

日本国内向けのサイトであっても、データセンターが地理的に遠い場合はCDNによってTTFBを短縮できます。

特に画像や動画などの静的ファイルをCDN経由で配信するだけで、ページ読み込み速度が目に見えて改善されるケースが多くあります。

主要なCDNサービスとしてはCloudflare・Fastly・Amazon CloudFrontなどがあり、Cloudflareは無料プランでも基本的な速度改善効果が期待できます。

ただし、CDNを導入してもオリジンサーバー自体が遅い場合は効果が限定的になるため、サーバーとCDNを組み合わせた施策が望ましいでしょう。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

⑦ サーバーを増強・移行してTTFBを短縮する

TTFBが恒常的に高い場合、アプリケーション層の最適化だけでは限界があり、サーバー自体の性能改善が必要になることがあります。

共有サーバー(レンタルサーバー)を利用している場合は他のユーザーとリソースを共有しているため、VPSや専用サーバーへの移行によってTTFBを大幅に短縮できるケースがあります。

また、Webサーバーソフトウェアをより高速なNginxに変更したり、データベースのクエリキャッシュを有効化することでも応答時間を改善できます。

PHPのバージョンを最新に保つことも効果的で、PHP 8系ではPHP 7系と比べて処理速度が大幅に向上しているため、WordPress運営者は特に確認しておくべき事項です。

サーバー移行はリスクを伴う大きな変更になるため、PageSpeed InsightsでTTFBが繰り返し指摘される場合に限定して検討することをおすすめします。

関連記事:GoogleのSEOガイドライン6選|チェックリスト150個紹介!

⑧ WordPressの不要プラグインを削除・整理する

WordPressサイトのページ速度が遅い原因として、多くの場合プラグインの過多が関係しています。

プラグインは一つひとつは小さな機能追加でも、積み重なると大量のJavaScriptやCSSを読み込み、表示速度を著しく低下させることがあります。

改善のためには、管理画面から使用していないプラグインを無効化・削除し、有効なプラグインについてもPageSpeed Insightsで有効化前後のスコアを比較するとよいでしょう。

とはいえ、プラグインによる速度低下は内容によって異なるため、一概に「プラグインが多い=遅い」とは言えず、個別に計測して判断する必要があります。

定期的にプラグインの棚卸しを行い、更新が停止しているものや同機能のものが重複している場合は整理することが、長期的な速度維持のための大切な習慣となります。

関連記事:SEOの目標の5つの手順を解説!KPIの決め方と進捗管理

ページ表示速度の改善施策に優先順位をつける考え方

ページ表示速度の改善施策に優先順位をつける考え方

ページ速度の改善施策は多岐にわたるため、すべてを同時に対応しようとするとリソースが分散してしまいます。

効果対コストを意識しながら施策に優先順位をつけることが、最短で成果を出すためのカギとなります。

施策の優先順位をつける主な考え方は以下のとおりです。

  • コスト・効果マトリクスで着手順を決める
  • PageSpeed Insightsのスコア50以下の指摘から潰す
  • モバイルとPCで優先順位を変えるべき理由

具体的な内容を見ていきましょう。

コスト・効果マトリクスで着手順を決める

施策の優先順位を決める際に有効な考え方が、コスト(工数・費用)と効果(改善幅・影響範囲)を二軸にした「コスト・効果マトリクス」です。

施策をコストと効果で分類すると以下のとおりです。

分類 コスト 効果 具体的な施策例
最優先着手 画像圧縮・WebP変換・Lazy Load設定
次点対応 gzip圧縮有効化・不要プラグイン削除
計画立案後対応 CDN導入・サーバー移行
保留 細かいコードリファクタリング等

最優先着手の施策から確実に消化することで、最小のコストで最大の改善効果が得られます。

なお、サイトの規模や構成によって「効果」の大きさは異なるため、PageSpeed Insightsの「節約できる量」を参考に施策ごとの実際の効果量を把握することをおすすめします。

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

PageSpeed Insightsのスコア50以下の指摘から潰す

PageSpeed Insightsのスコアが50以下(低速・Poor)のサイトは、ユーザーの離脱リスクが高く、スピードアップデートの影響を受けやすいため、優先的に改善に取り組む必要があります。

スコアが低い場合の対処手順は以下のとおりです。

  • まず「改善できる項目」に表示される指摘を「節約できるバイト数」が多い順に確認する
  • 指摘ごとに対応難度を確認し、自分で対応できるものとエンジニア依頼が必要なものに分類する
  • ページごとではなくサイト全体で同じ問題が発生していないかを確認し、共通原因を先に潰す

スコアが50を下回っている段階では、個別指標よりもまず全体スコアを50〜60台に引き上げることを短期目標にする考え方が現実的です。

複数の施策を同時に実施するよりも一つずつ改善してスコアを計測し直す方が原因特定がしやすく、改善効果の検証もしやすくなるでしょう。

関連記事:SEOのおすすめChrome拡張機能20選!初心者からプロも愛用

モバイルとPCで優先順位を変えるべき理由

PageSpeed InsightsはモバイルとPCのスコアを別々に表示しますが、多くのサイトでモバイルのスコアはPCよりも大幅に低くなる傾向があります。

これはモバイル端末のCPU性能が低く、ネットワーク環境も不安定なためで、GoogleのインデックスはモバイルファーストIndexingが基本となっているため、SEO観点ではモバイルのスコアを優先すべきです。

また、スマートフォンユーザーが検索の中心である現在、モバイルでの離脱率改善がCVR向上に直結するため、ビジネス的にもモバイルを先に対処する合理的な理由があります。

ただし、PCユーザーがメインターゲットのBtoBサービスや管理ツール系サイトでは、PCスコアを先に改善する判断も正当化されるでしょう。

自サイトのアクセス解析でデバイス比率を確認し、ユーザーの多い環境に合わせて優先順位を設定することが最も合理的な取り組みとなります。

関連記事:SEOの目標の5つの手順を解説!KPIの決め方と進捗管理

Core Web Vitalsの3指標とページ速度の関係

Core Web Vitalsの3指標とページ速度の関係

Core Web Vitalsは、Googleがページ速度とユーザー体験の品質を評価するための中核指標です。

LCP・INP・CLSの3指標を理解して改善することが、SEO評価と体感速度の両面で成果につながります。

Core Web Vitalsの3指標と改善方法は以下のとおりです。

  • LCP(最大コンテンツ描画)を2.5秒以内に抑える方法
  • INP(次のペイントへの応答)を改善するJavaScript対策
  • CLS(累積レイアウトシフト)を防ぐ画像・広告の扱い方

それぞれの内容を理解していきましょう。

LCP(最大コンテンツ描画)を2.5秒以内に抑える方法

LCP(Largest Contentful Paint)は、ページ読み込み開始からビューポート内で最も大きなコンテンツ要素が表示されるまでの時間を測定する指標です。

web.devによると、LCPの良好な基準は2.5秒以内とされており、これを超えると「改善が必要」または「不良」と評価されます。

LCPを改善する主な施策は次のとおりです。

  1. ヒーロー画像をWebP形式に変換・圧縮してファイルサイズを削減する
  2. ヒーロー画像にfetchpriority="high"を付与して優先読み込みを設定する
  3. CDNを導入してサーバー応答時間(TTFB)を短縮する
  4. レンダリングブロックを引き起こすJavaScript・CSSを非同期化またはミニファイする

LCPの対象要素はimgタグや背景画像、テキストブロックなど複数のパターンがあるため、PageSpeed Insightsの診断結果でどの要素がLCPになっているかを確認してから施策を選択するとよいでしょう。

参考:Web Vitals(web.dev) ※LCPの良好な基準値(2.5秒以内)を引用

関連記事:テクニカルSEOとは?優先順位の決め方と主要施策を解説

INP(次のペイントへの応答)を改善するJavaScript対策

INP(Interaction to Next Paint)は、2024年3月にFID(First Input Delay)に代わってCore Web Vitalsの指標として採用された、ページの応答性を測定する指標です。

Googleが定めるINPの良好な基準は200ミリ秒以内で、クリックやタップなどページ上のすべてのインタラクションの応答時間を評価します。

INPが悪化する主な原因はJavaScriptのメインスレッド占有であり、改善するためには以下の対策が有効です。

  • 長いJavaScriptタスクを小さな単位に分割(タスク分割)する
  • サードパーティスクリプトの読み込みを遅延させるか非同期化する
  • イベントハンドラ内の処理を軽量化し、重い計算処理をWeb Workerに移す

INPはリアルユーザーデータ(CrUX)に基づくため、Lighthouseの模擬測定では正確に測定できない点に注意が必要です。

Search ConsoleのCore Web VitalsレポートでINPが「不良」となっているURLを特定し、Chrome DevToolsのPerformanceパネルで原因を詳しく分析するとよいでしょう。

関連記事:GoogleのSEOガイドライン6選|チェックリスト150個紹介!

CLS(累積レイアウトシフト)を防ぐ画像・広告の扱い方

CLS(Cumulative Layout Shift)は、ページ読み込み中に発生する予期しないレイアウトのズレを測定する指標で、良好な基準は0.1以下とされています。

CLSが高いと、ユーザーが読もうとしたテキストがズレて別の場所をタップしてしまうような体験につながり、UXを著しく損なってしまいます。

CLSの主な原因と対策は以下のとおりです。

CLSの主な原因 推奨される対策
画像にwidth/height属性がない imgタグに明示的なwidth・height属性を指定する
遅れて挿入される広告・バナー 広告スペースを事前に確保するスタイルを設定する
Webフォントの遅延読み込みによるズレ font-display: swapを設定してテキストを先行表示する
動的コンテンツの挿入 スケルトンUIで表示領域を事前に確保する

特に画像への属性指定漏れはCLS悪化の最多原因であり、既存コンテンツの画像を一括でチェックして属性を追加するだけで大幅にスコアが改善するケースがあります。

CLSはPageSpeed Insightsのフィールドデータ上でも確認できるため、現在のスコアを把握した上で高頻度で発生している原因から順に対処していくとよいでしょう。

参考:Web Vitals(web.dev) ※CLSの良好な基準値(0.1以下)を引用

関連記事:SEOのおすすめChrome拡張機能20選!初心者からプロも愛用

ページ速度に関するよくある質問

ページ速度に関するよくある質問

ページ速度に関するよくある質問について解説します。

PageSpeed Insightsのスコアは何点を目標にすればいい?

目標スコアはモバイル・PCともに90点以上(「Good」判定)を目指すのが理想ですが、まず50点台への改善から着実に進めることが現実的です。

競合サイトのスコアも確認しながら、相対的な差を縮める戦略で優先度を判断するとよいでしょう。

スコアそのものに過度にこだわるより、実際のLCP・INP・CLSの改善を重視することがユーザー体験向上につながります。

ページ速度を改善してもSEO効果が出るまで時間はかかる?

改善施策を実施してからSearch ConsoleのCore Web Vitalsレポートに反映されるまで、おおむね28日程度の期間がかかります。

Googleがデータを28日分の実績値で集計するため、施策直後にはスコアが変化しないケースが多いでしょう。

SEO順位への影響も数週間〜数か月単位で現れることが一般的で、継続的な計測と改善が重要です。

WordPress以外のサイトでも同じ施策は使える?

本記事で紹介した画像圧縮・WebP変換・キャッシュ設定・gzip圧縮・CDN導入などの施策はCMSを問わず適用可能です。

ただし、WordPressのプラグインを利用した方法は他のCMSでは使えないため、PHP/サーバー設定での直接対応やフレームワーク固有の設定が必要になります。

静的サイトジェネレーター(Next.jsやNuxt.js等)ではビルド時最適化によって初期から高速なスコアが出やすい構造となっています。

モバイルとPCでスコアが大幅に違う場合はどう対処する?

モバイルスコアがPCよりも大幅に低い場合は、まず画像の最適化とLazy Loadの設定から着手することをおすすめします。

モバイルはCPU性能や回線速度が低い環境を前提に測定されるため、PCで問題ないJavaScriptの量でもモバイルでは大きなボトルネックになることがあります。

スコア差が20点以上ある場合はJavaScriptの削減・ミニファイ・非同期化を優先的に検討しましょう。

まとめ|計測ツールで現状を把握して改善を始めよう

まとめ|計測ツールで現状を把握して改善を始めよう

本記事では、ページ速度の改善方法について、SEO・CVR・直帰率への影響から遅くなる5つの原因、計測ツールの使い方、8つの改善施策と優先順位の決め方、Core Web Vitalsの3指標まで解説しました。

ページ速度の改善において最も大切なのは、まずPageSpeed InsightsやGoogle Search Consoleで現状のスコアと問題箇所を正確に把握することです。

なぜなら、原因を特定せずに施策を試みても効果が分散してしまい、優先度を誤ると限られたリソースが無駄になるためです。

まずはPageSpeed Insightsでサイトを計測し、スコアが50以下であれば画像圧縮とgzip圧縮から着手することをおすすめします。

速度改善は一度で完了するものではなく、定期的な計測と改善を繰り返すことで、ユーザー体験の向上とSEO評価の底上げが着実に積み重なっていくでしょう。

-③ テクニカルSEO