Webサイトを運営する上で、ページの表示速度は切っても切り離せない重要な課題です。
ユーザーはほんの数秒の遅延でもストレスを感じ、サイトから離脱してしまう傾向があります。
また、Googleの検索ランキングにおいても、ページエクスペリエンスは重要な評価指標の一つとして位置付けられています。
2026年現在、ユーザーの期待値はさらに高まり、より瞬時なレスポンスが求められるようになりました。
本記事では、速度測定ツール「PageSpeed Insights」の正しい見方と、具体的な改善手法について詳しく解説します。
PageSpeed Insightsとは何か
PageSpeed Insights(ページスピードインサイト、以下PSI)は、Googleが提供している無料のパフォーマンス診断ツールです。
特定のURLを入力するだけで、モバイルとデスクトップの両方における表示速度のスコアを確認できます。
PSIの最大の特徴は、実際のユーザー体験に基づいた「フィールドデータ」と、シミュレートされた環境での「ラボデータ」の両方を確認できる点にあります。
フィールドデータは、Chromeユーザーエクスペリエンスレポート(CrUX)から収集された過去28日間の実際のデータに基づいています。
一方、ラボデータはGoogleのツールであるLighthouseを使用して、制御された条件下で測定された数値です。
Webサイトの健全性を評価する際には、この「実ユーザーがどう感じているか」というフィールドデータを重視する必要があります。
主要な指標「コアウェブバイタル」の理解
PSIを使いこなすためには、Googleが提唱する「コアウェブバイタル(Core Web Vitals)」という3つの指標を正しく理解しなければなりません。
これらの指標は、ユーザーがページを快適に閲覧できているかを客観的に数値化したものです。
LCP(Largest Contentful Paint)
LCPは、ページ内のメインコンテンツ(最も大きな画像やテキストブロック)が表示されるまでの時間を測定します。
ユーザーにとって「ページが表示された」と認識されるタイミングを示す重要な指標です。
良好なユーザー体験を提供するためには、LCPを2.5秒以内に抑えることが推奨されています。
INP(Interaction to Next Paint)
INPは、ユーザーがページ上で行ったクリックやタップなどの操作に対して、ブラウザがどれだけ早く反応したかを測定する指標です。
以前使用されていたFID(First Input Delay)に代わり、2024年からコアウェブバイタルの主要指標として採用されました。
ページの応答性を示すこの指標は、200ミリ秒以下であれば「良好」と判定されます。
CLS(Cumulative Layout Shift)
CLSは、ページの読み込み中に発生する予期しないレイアウトのズレを数値化したものです。
画像が遅れて読み込まれた際に、既に表示されているテキストが押し下げられる現象などがこれに該当します。
視覚的な安定性を示す指標であり、スコアを0.1以下に保つことが理想とされています。
PSIのスコアと判定基準
PSIの診断結果には、0から100までのパフォーマンススコアが表示されます。
このスコアは、複数のラボデータを独自に重み付けして算出されたものです。
以下の表は、PSIにおけるスコアの判定基準をまとめたものです。
| スコア範囲 | 評価 | 改善の必要性 |
|---|---|---|
| 90 ~ 100 | 良好(グリーン) | 現在の状態を維持しましょう。 |
| 50 ~ 89 | 改善が必要(オレンジ) | 優先度の高い項目から改善を検討してください。 |
| 0 ~ 49 | 不良(レッド) | 即時の対策が必要です。 |
ただし、スコアが100点であっても、コアウェブバイタルのフィールドデータが不合格であれば改善の余地があります。
逆にスコアが多少低くても、実ユーザーの体験(フィールドデータ)が良好であれば、検索順位への悪影響は少ないと考えられます。
スコアの数値だけに一喜一憂せず、実際のユーザー体験指標を確認することが重要です。
表示速度を高速化する具体的な改善方法
診断結果を確認した後は、具体的な改善作業に移ります。
PSIの「改善できる項目」セクションには、サイトに合わせて最適化すべきポイントが提示されます。
画像の最適化と次世代フォーマットの採用
多くのWebサイトにおいて、表示速度の最大のボトルネックとなっているのが画像ファイルです。
高解像度の画像をそのまま掲載すると、データ通信量が増大し、読み込み時間が大幅に遅延します。
まずは、WebP(ウェッピー)やAVIF(アビフ)といった、高圧縮かつ高品質な次世代画像フォーマットへの変換を行いましょう。
また、タグに
loading="lazy"属性を付与することで、画面外にある画像の読み込みを遅らせる「遅延読み込み」も有効です。
さらに、画像の幅と高さをwidthおよびheight属性で指定することで、CLSの悪化を防ぐことができます。
CSSとJavaScriptの最適化
ブラウザがWebページを表示する際、CSSやJavaScriptの読み込みが完了するまでレンダリングが一時停止されることがあります。
これを「レンダリングブロック」と呼び、表示速度低下の大きな原因となります。
不要なコードを削除し、ファイルを圧縮(Minify)することで、ファイルサイズを最小限に抑えましょう。
重要なCSS(Critical CSS)はHTML内にインラインで記述し、それ以外のCSSは非同期で読み込ませる手法が効果的です。
JavaScriptについては、defer属性を使用して、HTMLの解析が完了した後に実行されるように制御します。
<!-- JavaScriptの実行を遅延させる例 -->
<script src="main.js" defer></script>
<!-- LCPに関連する重要な画像を優先的に読み込ませる例 -->
<link rel="preload" as="image" href="hero-banner.webp" fetchpriority="high">
サーバー応答時間の改善(TTFBの短縮)
TTFB(Time to First Byte)とは、ブラウザがサーバーから最初の1バイトを受け取るまでの時間です。
この時間が長いと、その後のあらゆる読み込みプロセスが遅れてしまいます。
サーバーサイドの改善策としては、PHPのバージョンを最新に保つことや、データベースのクエリを最適化することが挙げられます。
また、コンテンツデリバリネットワーク(CDN)を活用することで、ユーザーに最も近い拠点からデータを配信でき、物理的な距離による遅延を解消できます。
高性能なホスティングサービスへの移行も、手軽かつ強力な改善手段の一つです。
INPを改善するための高度なテクニック
2026年のWebサイト運営において、特に重要視されているのがINPのスコアです。
INPが悪い原因の多くは、JavaScriptのメインスレッドを長時間占有してしまう処理にあります。
重い処理をWeb Workerに移譲することで、バックグラウンドで処理を実行し、UIの応答性を保つことが可能です。
また、一度に大量のDOM要素を操作するのではなく、requestAnimationFrameやscheduler.yield()を利用して処理を分割することも検討してください。
「ユーザーが操作できるまで待たせない」設計を意識することが、高いINPスコアを維持する秘訣です。
フォントの読み込み最適化
Webフォントはデザイン性を高めますが、読み込みが遅いとテキストが表示されない「不可視テキスト」の期間が発生します。
これを防ぐためには、CSSの@font-faceでfont-display: swap;を指定します。
これにより、フォントのダウンロードが完了するまでは標準フォントで代用し、準備が整い次第切り替える挙動になります。
また、使用する文字だけを抽出するサブセット化も、ファイルサイズ削減に大きく貢献します。
キャッシュ戦略の構築
ブラウザキャッシュを適切に設定することで、再訪問時の表示速度を劇的に向上させることができます。
サーバーからのレスポンスヘッダーにCache-Controlを含め、静的リソースの有効期限を長めに設定しましょう。
更新頻度の低い画像やロゴなどは1年間に設定し、更新頻度の高いCSSやJSにはファイル名にハッシュ値を付ける運用が一般的です。
キャッシュを制する者はサイト速度を制すると言っても過言ではありません。
第三者スクリプトの制御
アクセス解析、広告、チャットボットなどの外部スクリプトは、サイトのパフォーマンスに悪影響を与えることが多いです。
本当に必要なツールかを見極め、使用していないスクリプトは即座に削除してください。
Googleタグマネージャーなどを介して読み込む場合でも、実行のタイミングを遅らせるなどの調整が必要です。
第三者ドメインへの接続をあらかじめ確立しておくpreconnectプリフェッチも、わずかながら高速化に寄与します。
まとめ
PageSpeed Insightsは、単にスコアを競うためのツールではなく、ユーザーに最高の体験を提供するための指針となるツールです。
LCP、INP、CLSといったコアウェブバイタルを理解し、フィールドデータの改善を第一に考えましょう。
画像の軽量化、スクリプトの最適化、サーバー環境の見直しといった基本的な対策を積み重ねることが、結果としてサイトの信頼性と成約率の向上に繋がります。
一度改善して終わりにするのではなく、定期的にPSIでチェックを行い、常に最新のWeb標準に合わせたメンテナンスを心がけてください。
高速なレスポンスこそが、Webサイトにおける最高のおもてなしであるという意識を持って、運営に取り組んでいきましょう。
