【図解】PageSpeed Insightsのよくある改善方法3選と見方｜EC担当者が知っておくべき基礎と実践

 

「自社サイトの表示が遅い気がする」「PageSpeed Insightsで計測したらスコアが低かった…」とお悩みのECサイト担当者様は多いのではないでしょうか。

表示速度の遅さは、ユーザー離脱やカゴ落ちだけでなく、Googleの検索順位にも影響します。つまり、PageSpeed Insightsの改善はCVRとSEOを同時に底上げする、EC担当者に必須の改善施策です。

本記事では、Googleが提供する無料ツール「PageSpeed Insights」のスコアを正しく理解し、ECサイトの現場で実践できる改善方法をわかりやすく解説します。

PageSpeed Insightsとは？EC担当者が知っておくべき理由

PageSpeed InsightsはGoogleが提供する、無料のサイト診断ツールです。URLを入力するだけでページの表示速度をスコア化し、改善点を提示してくれます。

単にスコアがわかるだけでなく、その診断の裏側では、Googleが開発したオープンソースの自動化ツールLighthouse（ライトハウス）が動作しており、パフォーマンス、アクセシビリティ、SEOなど様々な観点からページを分析しています。このLighthouseの診断結果に基づいて、なぜスコアが低いのか、どこを改善すればよいのかという「問題点」まで具体的に示してくれます。

• CVR向上とSEO対策に必須：Googleの検索ランキング要因（Core Web Vitals）を含み、サイトの売上と集客に直結する改善指標がわかる。
• 課題の可視化：サイト表示速度の現状を客観的な数値で把握し、「どこに問題があるか」を明確にできる。
• サイト改修の際の共通言語：エンジニアや制作会社に改善や改修を依頼する際、具体的なデータに基づいた共通言語でコミュニケーションが可能になる。

GoogleはCore Web Vitals（後述）をランキング要因に含めており、PageSpeed Insightsはその評価指標を簡単に確認できる公式ツールです。

PageSpeed Insightsスコアの見方｜どの数値を優先して見るべきか

PageSpeed Insightsの結果画面には、複数のスコアやデータが表示されます。ここでは、担当者が押さえておくべき“見方”のポイントを整理します。

モバイル（携帯電話）のスコアを最優先で確認

PageSpeed Insightsは「携帯電話」と「デスクトップ」で別々に計測されます。現在のECサイトではスマホ経由の購入が大半を占めるため、まずはモバイル（携帯電話）スコアの確認と改善が最優先です。

フィールドデータを重視する

スコアには「ラボデータ」と「フィールドデータ」の2種類があります。SEOの観点で特に重要なのは、実際のユーザー環境での計測結果であるフィールドデータです。

フィールドデータ

過去28日間の実際のユーザー行動データ。Googleが検索評価に使用しているのはこちら。Chromeユーザーから匿名で収集されたCrUX（Chrome User Experience Report）をもとにしており、第75パーセンタイル（P75）＝上位75％のユーザー体験の境界値を参照しています。

※CrUXのデータはCrUX Dashboardから確認ができます。

ラボデータ

テスト環境でのシミュレーション計測。改善のヒントや原因特定のために活用します。

PageSpeed Insightsは海外サーバーと低速回線（Moto G Power／4G）で計測しています。そのため日本国内よりもスコアが低く出やすく、100点を目指す必要はありません。重要なのは、実際のユーザーが快適に操作できる状態を維持することです。

オフィスのWi-Fiでは気づけない遅延もあります。スマホのWi-Fiを切り、4G/5G環境で自社サイトを操作してみましょう。 「画像がなかなか出ない」「ボタンの反応が遅い」といったリアルな課題が見えてきます。

3. Core Web Vitalsとは？SEO評価に関わる3つの指標

Core Web Vitals（コアウェブバイタル）は、Googleが提唱する「ユーザー体験の質」を測るための3つの中心的な指標で、SEO評価に直接影響します。この3つの指標を改善することが、PageSpeed Insightsのスコア向上に直結します。

LCP（Largest Contentful Paint）｜読み込みの速さ

LCPは「ページ内の主要な画像やテキストが表示されるまでの時間」ですので、「サイトの表示速度」と考えても問題ありません。ECサイトではメイン画像やファーストビューのバナーが該当することが多いです。

評価の目安

• 良好（緑）：2.5秒未満
• 改善が必要（オレンジ）：2.5秒～4.0秒
• 不良（赤）：4.0秒超

LCPの重要性と対策

LCPは、離脱を左右する最重要ポイントです。ここが遅いと、ユーザーは「このサイトは重い」と感じ、商品を見る前に離脱してしまいます。

改善策としては、HTML内での読み込み順序を最適化することが基本です。

LCP要素が画像の場合は、画像の圧縮・最適サイズへの変更・CDNを使った高速配信が有効で、これらを組み合わせることでLCPの大幅な改善が期待できます。

INP（Interaction to Next Paint）｜操作の反応速度

INPは、ユーザーがページ上で行った操作（クリックやタップなど）に対して、ブラウザが視覚的な反応を返すまでの時間を測る指標です。ECサイトでは、「カートに入れるボタンを押してから反応があるまで」や「メニューを開くアイコンをタップしてからメニューが表示されるまで」の時間などが該当します。

評価の目安

• 良好（緑）：200ミリ秒未満
• 改善が必要（オレンジ）：200ミリ秒～500ミリ秒
• 不良（赤）：500ミリ秒超

INPの重要性と対策

INPは、ユーザーの信頼に直結する重要な指標です。ボタンを押しても反応しない、反応が遅いといった状況は「サイトが壊れているのでは？」という不安を生み、購入を中断させる原因になります。

反応が遅くなる主な理由は、JavaScriptの処理が多すぎることや、重い処理が表示より先に実行されてしまうことです。

対策としては、処理の順序を見直し、まず表示に関わる処理を優先することで、体感的なレスポンスを大きく改善できます。

CLS（Cumulative Layout Shift）｜レイアウトの安定性

CLSは、読み込み中にレイアウトがずれる度合い。意図しないクリックを防ぐための重要指標です。

CLSは、ページの読み込み中に予期せずレイアウトがガタッとずれる現象が、どれくらい発生したかを数値化した指標です。ECサイトでよくあるのが「購入ボタンを押そうとした瞬間に広告が表示されて、意図せず広告をクリックしてしまった」というケースです。

評価の目安

• 良好（緑）：0.1未満
• 改善が必要（オレンジ）：0.1～0.25
• 不良（赤）：0.25超

CLSの重要性と対策

CLSは、ユーザーに強いストレスを与える要因です。表示中に要素がズレると、誤タップを誘発したり、視線の流れが乱れて操作しづらくなります。

対策としては、画像やバナーなどの要素にあらかじめ表示サイズ（幅・高さ）を指定しておくことが重要です。こうすることで、コンテンツが後から読み込まれてもレイアウトが安定し、表示中のズレを防ぐことができます。

4. Core Web Vitalsを支える重要指標：TTFBとFCPの役割

Core Web Vitalsの中でも、表示速度に関わるLCPを改善するためにはその前段階の指標であるTTFBとFCPを理解することが根本的な解決には必要です。

TTFB (Time to First Byte)｜サーバーの応答速度

TTFBは、ブラウザがサーバーにリクエストを送ってから、最初の1バイトを受け取るまでの時間です。簡単に言うと「サーバーがどれだけ速く応答してくれるか」を示す指標です。

評価の目安

• 良好（緑）：0.8秒未満
• 改善が必要（オレンジ）：0.8秒～1.8秒
• 不良（赤）：1.8秒超

TTFBの重要性と対策

TTFBはページ読み込みの最初のステップです。ここが遅いと、その後のすべての表示が遅れてしまい、LCPやFCPのスコアも悪化します。サーバーの性能や設定が主な原因となります。根本的な対策はサーバーの見直しが重要となります。

FCP (First Contentful Paint)｜最初のコンテンツ表示時間

FCPは、ページにアクセスしてから、最初に何らかのテキストや画像が画面に表示されるまでの時間を測る指標です。

評価の目安

• 良好（緑）：1.8秒未満
• 改善が必要（オレンジ）：1.8秒～3.0秒
• 不良（赤）：3.0秒超

FCPの重要性と対策

真っ白な画面が続くとユーザーは不安になり離脱してしまいます。FCPが速いと「ページが読み込まれ始めた」とユーザーに安心感を与え、体感速度を向上させます。対策の軸は、不要な読み込みリソースの削減と初期描画の優先度を上げることです。

 PageSpeed Insightsでよく出る警告と改善方法【ECサイトで多い3つの原因】

診断結果の「改善できる項目」に頻出するのが、以下の3点です。いずれもECサイトでは非常に多い課題です。

① 「適切なサイズの画像」

●指摘事項

「適切なサイズの画像を配信してください」

●ECサイトのよくある原因

高画質な商品画像やバナーを、PC用の大きなサイズのままスマホでも表示している。

●具体的な改善方法

（１）画像圧縮ツールで軽量化する：「画像圧縮ツール（例：Caesium Image Compressorなど）でファイルサイズを削減する。

（２）次世代フォーマット（WebPやAVIF）に変換する：画質を維持したまま、JPEGより大幅にファイルサイズを小さくできる。

画像の最適化は、読み込み速度の改善だけでなくレイアウトの安定性（CLS）にも影響します。

画像の<img>タグにwidth属性とheight属性を明示的に指定しておくことで、ブラウザはあらかじめ表示領域を確保できます。これにより、画像の読み込み中に他の要素が押し下げられるような“レイアウトずれ”を防ぐことができ、CLS（Cumulative Layout Shift）のスコアを改善することができます。

② 「第三者コードの影響を抑えてください」

●指摘事項

「第三者コードの影響を低減してください」

●ECサイトのよくある原因

アクセス解析、Web接客、レビュー、広告タグなどの外部ツールを多数導入している。

●具体的な改善方法

（１）不要なタグを削除する：現在使っていないツールや、効果の低い広告タグは定期的に棚卸しして削除する。

（２）タグの読み込みを遅らせる：GTM（Googleタグマネージャー）などを使い、緊急性の低いタグはページの表示が完了した後に読み込むよう設定する。

③ 「オフスクリーン画像の遅延読み込み」

●指摘事項

「オフスクリーン画像の遅延読み込み」

●ECサイトのよくある原因

商品一覧ページなどで、画面にまだ表示されていないページ下部の画像まで、ページを開いた瞬間にすべて読み込もうとしている。

●具体的な改善方法

（１）loading=”lazy”属性を追加する：エンジニアに依頼し、imgタグにこの記述を追加してもらうだけで、簡単に遅延読み込みが実装できる。ただし、ファーストビュー（1st View）に表示される画像には設定しないように注意が必要です。主要なビジュアルまで遅延読み込みされてしまうと、逆にLCP（Largest Contentful Paint）が悪化する可能性があります。

（２）ECカートシステムの機能を確認する：利用しているカートシステムによっては、標準機能やアプリで遅延読み込みに対応している場合がある。

6. まとめ：PageSpeed Insightsを活用して“売れるサイト”に育てる

PageSpeed Insightsの改善は、単なるスコアアップではなく、ユーザー体験を磨くことそのものです。まずは「画像」「第三者コード」「遅延読み込み」から取り組み、フィールドデータのオールグリーンを目指しましょう。

さらに詳しい改善手順や、専門用語の理解を深めたい方には、以下の資料がおすすめです。

📘 非エンジニア向け PageSpeed Insights活用講座（無料）

• PageSpeed Insightsでよく出る指摘10選を解説
• Core Web Vitalsの改善手順を図解
• エンジニアに依頼する際の伝え方も掲載

👉 [資料を無料でダウンロードする]

ぜひこの機会にダウンロードして、売上アップに繋がるサイト改善にお役立てください。

7.「もっと手軽に改善したい」自動高速化ツールという選択肢

ここまでご紹介した改善策は非常に効果的ですが、画像の最適化やタグの整理には専門的な知識や工数が必要です。

「エンジニアのリソースが足りない」「もっと手軽に、すぐに効果を出したい」 そのようなEC担当者様には、サイトスピード改善ツール「Repro Booster」という選択肢もあります。

Repro Boosterは、ご紹介したような改善策の多くを、専門知識がなくても、タグを1行サイトに追加するだけで自動で実現できるツールです。

• 面倒な画像最適化も自動で対応：サイト上の画像を、画質を落とさずに次世代フォーマット（AVIF/WebP）へ自動で変換・圧縮。常に最適な状態で配信します。
• 特許技術でページ遷移を高速化：ユーザーの行動を予測し、次に表示するページを先読みすることで、体感速度を劇的に向上させます。

開発リソースを割かずに、最短でサイトスピードを改善し、売上アップの土台を作りたい方は、ぜひ詳細をご覧ください。

Repro Boosterの詳細はこちらから