PageSpeed Insightsの使い方|スコアを劇的に改善する5つの手順

「PageSpeed Insightsを使ってみたけど、スコアが真っ赤で愕然とした…。レポートを見ても専門用語ばかりで、結局なにから手をつければいいのか分からない…」

こんな風に悩んでいませんか?
ご安心ください。PageSpeed Insightsのスコア改善は、正しい見方と手順さえ分かれば、専門知識がなくても決して難しくありません。実は、やるべきことを5つのステップに分解して考えるのが、改善への一番の近道なんです。
この記事では、PageSpeed Insightsの基本的な見方から、非エンジニアでも分かる各指標の解説、そして今すぐに実践できる具体的なスコア改善手順までを5つのステップで徹底的に解説します。
- サイトが遅い「本当の原因」を自分で特定できるようになる
- スコア改善のための具体的なアクションプランが分かる
- 「モバイルだけ異常に遅い…」といった、よくある疑問やスッキリする
- 最も簡単で効果絶大な「画像の最適化」をすぐにスタートできる
- 専門用語に悩まなくなる
PageSpeed Insightsとは?Web担当者が知るべき基礎知識


「サイトの表示速度を改善しろと指示されたけど、何から手をつければ…」
Webサイトの担当者になったばかりの方なら、一度はそう悩んだことがあるのではないでしょうか。そんな時に、強力な味方となってくれるのがGoogleが無料で提供する「PageSpeed Insights(ページスピードインサイト)」です。
このツールは、あなたのサイトのURLを入力するだけで、サイトの表示速度に関する問題点を客観的なスコアで示し、具体的な改善策まで提示してくれます。しかし、レポートには専門用語が多く、初めて見る方にとっては少し難しく感じるかもしれません。
この章では、本格的な使い方に入る前に、Web担当者として必ず知っておきたいPageSpeed Insightsの基礎知識を、できるだけ分かりやすく解説します。
- サイト表示速度の改善すると検索順位(SEO)とユーザー体験(UX)に好影響
- レポートには「フィールドデータ」と「ラボデータ」がある
- 「LCP」「NP」「CLS」は絶対に押さえておこう
なぜサイト表示速度が重要なのか?SEOとUXへの影響
そもそも、なぜこれほどまでにサイトの表示速度が重要視されるのでしょうか。その理由は大きく分けて2つあります。それは「SEO(検索エンジン最適化)」と「UX(ユーザーエクスペリエンス)」への影響です。
まずSEOの観点では、Googleがサイトの表示速度を検索順位の決定要因の一つとしているためです。検索ユーザーに快適な体験を提供したいGoogleにとって、表示が遅いサイトは評価が下がってしまいます。つまり、表示速度の改善は、検索結果で上位表示を狙うための重要な施策の一つなのです。
次にUX、つまり「ユーザーの体験」の観点です。



あなたも、開くのに時間がかかるWebサイトを見て、「まだ表示されないのか…」とイライラして、ページを閉じてしまった経験はありませんか?
ユーザーは非常にせっかちです。ページの表示に時間がかかると、多くのユーザーは中身を見ることなく離脱してしまいます。これは、せっかくサイトに来てくれたお客様を、入口で逃してしまっているのと同じ状態です。サイトの表示速度を改善することは、ユーザーの満足度を高め、商品購入やお問い合わせといった成果(コンバージョン)に繋げるためにも不可欠と言えるでしょう。
PageSpeed Insightsで計測できる2種類のデータとは?
PageSpeed Insightsのレポートを詳しく見ると、「フィールドデータ」と「ラボデータ」という2種類のデータが表示されていることに気づきます。この2つは似ているようで、データの性質が全く異なります。この違いを理解することが、スコアを正しく読み解く第一歩です。
フィールドデータ:実際のユーザー環境から得られる貴重なデータ
フィールドデータとは、あなたのサイトを実際に訪れたユーザーのブラウザ(Google Chrome)から収集された、過去28日間の匿名データです。これは言わば「実際にお店を訪れたお客様の生の声」のようなもので、非常に信頼性の高いデータです。ユーザーが使っているスマートフォンの機種や回線速度など、様々な環境が混ざり合ったリアルなパフォーマンスがここに反映されます。ただし、サイトへのアクセス数が少ない場合は、十分なデータが集まらず表示されないこともあります。
ラボデータ:管理された環境で問題を再現するテストデータ
一方、ラボデータとは、PageSpeed Insightsが計測を実行したその場で、特定の固定された環境(特定の回線速度やデバイス)でシミュレーションした結果です。これは「専門家が、管理されたテストコースで車の性能をチェックする」ようなものです。何度計測しても同じ条件下でテストされるため、改善策を試した後にスコアがどう変化したかを確認するなど、問題の特定やデバッグに役立ちます。スコアが毎回少し変動するのは、このラボデータが計測時の様々な要因でわずかにブレるためです。
これだけは押さえたい「コアウェブバイタル」3つの指標
レポートの中でも特に重要なのが、「コアウェブバイタル(Core Web Vitals)」と呼ばれる3つの指標です。これはGoogleが「快適なユーザー体験のために特に重要」と定めている指標群で、SEO評価にも直接的な影響を与えます。この3つの言葉の意味を理解するだけで、レポートの内容がぐっと分かりやすくなります。
LCP(Largest Contentful Paint):ページの読み込み速度
LCPは、ユーザーがページを開いてから、画面内に表示される最も大きなコンテンツ(例えばメイン画像や大きなテキストブロック)が表示されるまでの時間を計測します。これは、ユーザーが「このページはちゃんと読み込まれているな」と体感する速さの指標です。LCPが遅いと、ユーザーは真っ白な画面を長く見ることになり、ページの読み込みが終わる前に離脱してしまう原因になります。
FID(First Input Delay):ユーザー操作への反応速度 ※INPへの移行にも言及
FIDは、ユーザーがページのボタンをクリックしたり、リンクをタップしたりといった最初の操作を行ってから、ブラウザがその操作に反応するまでの時間差(遅延)を計測します。ページの見た目が完成していても、ボタンを押しても無反応だと、ユーザーは「このサイト、壊れているのかな?」と不安に感じてしまいます。
なお、このFIDは2024年3月に「INP(Interaction to Next Paint)」という新しい指標に置き換えられました。FIDが「最初のアクション」への反応速度だけを見ていたのに対し、INPはページ滞在中の「すべての操作」に対する反応性を評価するため、よりユーザーの実感に近い指標となっています。
CLS(Cumulative Layout Shift):コンテンツの視覚的な安定性
CLSは、ページの読み込み中にどれだけレイアウトが「ガクンッ」とズレたかを数値化したものです。例えば、記事を読んでいたら、後から読み込まれた広告によって文章が下に追いやられ、読んでいた場所を見失ったり、意図しない場所を誤ってタップしてしまったりした経験はないでしょうか。このような予期せぬレイアウトのズレはユーザーに大きなストレスを与えるため、CLSは重要な指標とされています。この数値が低いほど、視覚的に安定した優れたページと言えます。
【図解】PageSpeed Insightsのレポート画面|3つの重要エリアの見方


PageSpeed Insightsで計測ボタンを押すと、色とりどりのグラフや専門用語が並んだレポート画面が表示されます。一見すると複雑で、「どこから見れば良いのか分からない」と圧倒されてしまうかもしれません。
しかし、心配は不要です。このレポートでまず確認すべき重要なエリアは、たったの3つだけです。この3つのエリアの役割さえ理解すれば、あなたのサイトが抱える課題をスムーズに読み解くことができます。ここでは、実際のレポート画面を思い浮かべながら読み進められるように、それぞれの見方を解説していきます。
- 「パフォーマンススコア」はサイトの通信簿!まずは緑の90点を目指す!
- スコアが低い原因は「LCP」「INP」「CLS」のどれか見極めよう
- 改善できる項目を見つけて最重要な課題を見つけよう
①パフォーマンススコア:まず見るべきサイトの通信簿


レポート画面の一番上に、0から100までの数字で大きく表示されているのが「パフォーマンススコア」です。これは、あなたのサイトの表示速度に関する総合的な評価をひと目で分かるように示した、いわば「サイトの通信簿」のようなものです。
スコアは以下の3段階で色分けされており、直感的に評価を把握できます。
- 90~100点(緑色): 良好です。ユーザーは快適にサイトを閲覧できています。
- 50~89点(オレンジ色): 改善が必要です。いくつかの項目で速度が低下しています。
- 0~49点(赤色): 不十分です。多くのユーザーがストレスを感じる遅さです。
上司から「サイトが遅い」と指摘された場合、このスコアが赤色やオレンジ色になっている可能性が高いでしょう。しかし、点数が低くても落ち込む必要はありません。これは改善の「伸びしろ」が大きいという証拠です。
「モバイル」と「PC」のスコアが違う理由


スコア表示のすぐ上に、「モバイル」と「PC」を切り替えるタブがあります。ここで多くの方が「なぜモバイルだけスコアがこんなに低いの?」と疑問に思います。これは、PageSpeed Insightsがそれぞれの環境に合わせて、異なる条件でテストを行っているためです。
一般的に、モバイルはPCに比べて通信回線が不安定で、デバイス自体の処理能力(CPU性能)も劣ります。そのため、同じサイトであってもモバイルのスコアの方が低く出るのが普通です。近年、Googleはスマートフォンでの閲覧体験を非常に重視する「モバイルファーストインデックス」という考え方を採用しているため、私たちは特にこの「モバイル」のスコア改善に注力すべきだと言えます。
目指すべきスコアの合格点は?90点以上が理想
では、具体的に何点を目指せば良いのでしょうか。理想を言えば、緑色の評価である「90点以上」が目標となります。このレベルに達すれば、ほとんどのユーザーが快適に感じる表示速度と言えるでしょう。
しかし、サイトの作りや使用しているシステムによっては、90点達成のハードルが非常に高い場合もあります。まずは「赤色からオレンジ色へ」、そして「オレンジ色から緑色へ」というように、段階的な目標を立てるのが現実的です。まずは合格点として、オレンジ色の範囲である「50点以上」を最初の目標に設定することから始めましょう。
②主要なウェブに関する指標:コアウェブバイタルの評価結果


パフォーマンススコアのすぐ下には、「主要なウェブに関する指標」というセクションがあります。ここでは、前の章で解説した「LCP」「INP(旧FID)」「CLS」というコアウェブバイタルの各指標が、基準を満たしているかどうかの評価結果を見ることができます。
それぞれの指標が「良好」「改善が必要」「不良」のいずれかで評価されており、パフォーマンススコアが低い原因を探るための、より具体的な手がかりがここに示されています。例えば、全体のスコアが低い原因が、LCP(ページの読み込み速度)にあるのか、それともCLS(レイアウトのズレ)にあるのかを、ここで特定することができます。
③改善できる項目と診断:具体的な改善ヒントの宝庫


レポートをさらに下にスクロールすると、「改善できる項目」と「診断」という2つのリストが表示されます。ここが、PageSpeed Insightsが示してくれる「宝の地図」の最も重要な部分であり、具体的な改善アクションのヒントが詰まっています。
「改善できる項目」と「診断」の違いとは?
この2つのリストは似ていますが、少し役割が異なります。「改善できる項目」は、改善することでパフォーマンススコアに直接的な影響を与える可能性が高い、優先度の高い施策リストです。一方、「診断」は、直接スコアに影響するとは限りませんが、サイトのパフォーマンスを向上させるためのベストプラクティス(推奨される手法)に関する、補足的な情報やヒントが記載されています。改善に着手する際は、まず「改善できる項目」に挙げられている内容から取り組むのが効率的です。
まずは「時間」への影響が大きい項目から着手しよう
「改善できる項目」には、多くの項目が並んでいることがあります。その中でどれから手をつけるべきか迷ったら、各項目の右側に表示されている「時間」の目安に注目してください。
ここには、その項目を改善した場合に短縮できる可能性のある時間が秒単位で示されています。この時間が大きい項目ほど、改善したときのインパクトが大きく、スコアが大幅に向上する可能性があります。つまり、この時間が長い項目こそが、あなたのサイトが抱える最大のボトルネックであり、最優先で取り組むべき課題なのです。
初心者でもできる!スコア改善5つの実践手順


PageSpeed Insightsのレポートの見方が分かり、自社サイトの課題が見えてきたら、次はいよいよ改善アクションの実行です。「改善項目がたくさんあって、何から手をつければ…」と不安になるかもしれませんが、心配ありません。
この章では、Web担当者になったばかりの方でも比較的取り組みやすく、かつ効果を実感しやすい改善策を5つのステップに厳選して解説します。専門的なコーディング知識がなくても実践できる方法を中心に紹介しますので、ぜひ一つずつ試してみてください。
- 画像を軽くするのが一番カンタンで効果も大きい
- CSSやJSが原因なら、プラグインで読み込み順を調整してみる
- サーバーが遅いなら、プラン変更やCDN導入が効果的!
- キャッシュを活用すれば、リピーターの表示が爆速になる!
- 自分では難しい「不要なコード」は、プロに頼んで消してもらおう!
【ステップ1】画像の最適化:最も簡単で効果が出やすい改善策



サイト表示速度の改善において、最も簡単で、かつ絶大な効果を発揮するのが「画像の最適化」です。
Webページのデータ容量の大部分は画像ファイルが占めていることが多く、画像を軽くするだけで、LCP(ページの読み込み速度)のスコアが劇的に改善することが少なくありません。最初の一歩として、まずはここから着手しましょう。
画像サイズの圧縮(リサイズ)でファイルサイズを小さくする
Webサイトに表示される画像は、必要以上に大きなサイズ(ピクセル数)でアップロードされていることがよくあります。例えば、ブログ記事の横幅が800ピクセルしかないのに、幅3000ピクセルの巨大な画像をそのまま掲載しているケースです。これは、大きな荷物をわざわざ小さなドアから無理やり通そうとしているようなもので、表示速度が遅くなる大きな原因です.
画像をアップロードする前に、Photoshopなどの画像編集ソフトや、オンラインの無料ツールを使って、表示したいサイズにあらかじめリサイズ(縮小)しておきましょう。これだけでファイルサイズを大幅に削減できます。さらに、「TinyPNG」や「Squoosh」といった無料の圧縮ツールを使えば、画質をほとんど落とすことなく、ファイルサイズをさらに小さくすることが可能です。



個人的に好きなのは「あっしゅくま」です!
次世代フォーマット(WebPなど)に画像を変換する
皆さんが普段よく目にする画像の形式には「JPEG」や「PNG」がありますが、これらよりもさらに圧縮効率が高い「次世代フォーマット」と呼ばれる新しい形式があります。その代表格が、Googleが開発した「WebP(ウェッピー)」です。
WebPは、JPEGやPNGと同じくらいの画質を保ちながら、ファイルサイズを20~30%以上も小さくできる優れたフォーマットです。PageSpeed Insightsの改善項目でも「次世代フォーマットでの画像の配信」としてよく指摘されます。画像の形式をWebPに変換するだけで、ページのデータ容量を大きく削減できます。
WordPressを使用している場合は、「EWWW Image Optimizer」などのプラグインを使えば、既存の画像を自動でWebPに変換してくれるため、非常に手軽に導入できます。
遅延読み込み(Lazy Loading)を設定して初期表示を速くする
遅延読み込み(Lazy Loading)とは、ページを開いた瞬間にすべての画像を読み込むのではなく、ユーザーがスクロールしてその画像が表示される直前になってから読み込みを開始する技術です。
これをレストランのコース料理に例えるなら、最初にすべての料理をテーブルに並べるのではなく、前菜を食べ終わる頃にスープを、スープを飲み終わる頃にメインディッシュを提供するようなものです。一度に読み込むデータ量を減らすことで、ユーザーが最初に目にする画面(ファーストビュー)の表示を格段に速くすることができます。
この遅延読み込みも、WordPressであれば「Lazy Load」といった専用プラグインや、多くの高機能なテーマに標準で備わっている機能を使うことで、専門知識がなくても簡単に実装が可能です。
【ステップ2】レンダリングを妨げるリソースの除外
「レンダリングを妨げるリソースの除外」という項目は、PageSpeed Insightsのレポートで非常によく見かける指摘の一つです。この「レンダリング」とは、ブラウザがHTMLやCSS、JavaScriptといったコードを解釈して、私たちが普段見ているようなWebページとして画面に表示することを指します。
そして、「レンダ-リングを妨げるリソース」とは、この表示プロセスを途中でブロックしてしまう、厄介な存在のことを言います。
なぜCSSやJavaScriptがレンダリングを妨げるのか?
これを、お店を開店する準備に例えてみましょう。
お店(Webページ)を開くには、まずお店の骨格(HTML)を組み立て、次に壁紙や内装(CSS)を整え、最後にレジや自動ドア(JavaScript)などの機能を追加する必要があります。
通常、ブラウザはHTMLファイルを上から順番に読み込んでいきます。その途中でCSSファイルやJavaScriptファイルの読み込み指示を見つけると、ブラウザは一旦HTMLの解釈をストップし、それらのファイルをすべて読み込んで準備が整うまで、ページの表示を待ってしまいます。特に、ページの見た目の装飾を担当するCSSファイルがページの最初の方(headタグ内)で読み込まれると、内装の準備が終わるまで、お客様(ユーザー)を店内に入れることができない状態になってしまうのです。
これが「レンダリングブロック」と呼ばれる現象で、ユーザーが真っ白な画面を長く待たされる原因となります。PageSpeed Insightsは、この待ち時間を短縮するために、「重要でないCSSは後回しにする」「JavaScriptの読み込みを遅らせる」といった対策を推奨しているのです。
WordPressならプラグインで改善できることも
この問題の解決には、通常、専門的なコードの知識が必要となります。しかし、もしあなたのサイトがWordPressで作られているのであれば、幸運です。この複雑な処理を自動で行ってくれる、非常に便利なプラグインが存在します。
例えば、「Autoptimize」や「LiteSpeed Cache」といった高機能なキャッシュ系プラグインには、CSSやJavaScriptの読み込みを最適化する機能が含まれています。具体的には、複数のCSSやJavaScriptファイルを一つにまとめたり、不要なコードを圧縮したり、読み込む順番を調整したりする作業を、プラグインが自動で処理してくれます。
これらのプラグインの設定を有効にするだけで、「レンダリングを妨げるリソースの除外」の項目が劇的に改善することがあります。ただし、プラグインの設定を誤ると、サイトのレイアウトが崩れたり、一部の機能が動かなくなったりする可能性もあります。導入する際は、必ず事前にサイトのバックアップを取り、一つずつ設定を変更して表示を確認しながら、慎重に進めるようにしましょう。
【ステップ3】サーバーの応答時間の短縮
PageSpeed Insightsの改善項目の中に「サーバーの応答時間を短縮してください(TTFB)」という指摘を見つけることがあります。
これは、これまでの画像やCSSといった「サイト自体のデータ」の問題ではなく、そのサイトが置かれている「土地」である「サーバー」に原因があることを示唆しています。
サーバーとは、Webサイトのデータを保管しているコンピューターのことです。ユーザーがあなたのサイトにアクセスすると、ブラウザはまずこのサーバーに「サイトのデータをください」とリクエストを送ります。このリクエストに対して、サーバーが「はい、どうぞ」と最初の応答を返すまでにかかる時間が「サーバーの応答時間(TTFB)」です。
この応答が遅いと、その後のあらゆる処理が遅れてしまい、結果としてページ全体の表示が遅くなります。
利用しているレンタルサーバーのプランを見直す
サーバーの応答が遅くなる最も一般的な原因は、利用しているレンタルサーバーのスペック不足です。特に、多くのサイトが利用している安価な「共用サーバー」は、一台のサーバーを複数のユーザーでシェアしている状態です。
これは、一つの大きなキッチンを複数の料理人で共有しているようなものです。他の料理人(サイト)が一度にたくさんの注文をさばいていると、自分が使いたいコンロが空くまで待たなければならず、料理の提供(ページの表示)が遅れてしまいます。
あなたのサイトへのアクセス数が少しずつ増えてきたり、サイトの機能が複雑になってきたりすると、現在のプランではパワー不足になっている可能性があります。
この問題に対して、Web担当者であるあなたが直接できることは少ないかもしれませんが、サーバー会社の管理画面でプランを確認し、より高性能な上位プランや、同じサーバーを自分だけで独占できる「専用サーバー」への乗り換えを検討し、上司や決裁者に提案することは非常に重要なアクションです。
最近では「LiteSpeed」などの高速なWebサーバーを採用した、表示速度の改善を強みとするレンタルサーバーも増えています。サーバーの引っ越しは大きな決断ですが、それに見合うだけのパフォーマンス向上が期待できる場合も少なくありません。
CDN(コンテンツデリバリーネットワーク)の導入を検討する
サーバーの応答速度を改善するもう一つの強力な方法が、「CDN(コンテンツデリバリーネットワーク)」の導入です。
通常、あなたのサイトのデータは、契約しているサーバーが置かれている特定の場所(例えば東京)に保管されています。そのため、沖縄や北海道、あるいは海外からアクセスしたユーザーには、物理的な距離があるぶん、データの到着が遅れてしまいます。
CDNは、この問題を解決するための仕組みです。あなたのサイトの画像などのデータを、世界中にある複数のサーバーにコピーして配置しておいてくれます。そして、ユーザーがアクセスしてきた際に、そのユーザーから最も近い場所にあるサーバーが応答してデータを配信するのです。これは、東京にしかない本店(オリジナルサーバー)の商品のコピーを、全国各地の支店(CDNのサーバー)に置いておき、お客様は最寄りの支店で商品を受け取れるようにするイメージです。
これにより、物理的な距離の影響を最小限に抑え、どこからのアクセスであっても安定した速さでサイトを表示できるようになります。「Cloudflare」のように、無料から利用できるCDNサービスもありますので、サーバープランの見直しと合わせて導入を検討してみる価値は非常に高いと言えるでしょう。
【ステップ4】ブラウザのキャッシュを活用する
PageSpeed Insightsの「診断」の項目を見ていると、「効率的なキャッシュポリシーで静的なアセットを配信する」という、少し難しい日本語の指摘が表示されることがあります。これは、一言で言うと「ブラウザのキャッシュをもっとうまく活用してください」というアドバイスです。
キャッシュは、一度設定してしまえば自動で効果を発揮し続けるため、サイト表示速度を安定させるために非常に重要な役割を果たします。
「キャッシュ」とは?身近な例でわかりやすく解説
「キャッシュ」と聞くと、何やら難しい専門用語のように感じるかもしれません。しかし、その仕組みは非常にシンプルです。キャッシュとは、一度アクセスしたWebサイトのデータ(例えばロゴ画像やCSSファイルなど)を、ユーザーのパソコンやスマートフォンの中に一時的に保存しておく技術のことです。



これを、あなたがよく利用する道具に例えてみましょう!
毎回作業をするたびに、遠くの倉庫(Webサーバー)までドライバーやペンチ(サイトのデータ)を取りに行くのは非効率です。そこで、よく使う道具は自分の作業机の引き出し(ブラウザのキャッシュ)に保管しておきます。そうすれば、次に同じ作業をするとき、わざわざ倉庫まで行かずに、手元の引き出しからサッと道具を取り出してすぐに作業を始められます。
ブラウザのキャッシュもこれと全く同じです。一度サイトを訪れたユーザーが再訪問した際に、すべてのデータを再びサーバーからダウンロードするのではなく、手元に保存しておいたデータを再利用します。これにより、2回目以降のサイト表示が劇的に速くなるのです。PageSpeed Insightsの指摘は、「その道具(データ)を、どれくらいの期間引き出しに保管しておきますか?」というルールが、サイト側で正しく設定されていないことを示唆しています。
.htaccessファイルの編集方法 ※専門家への相談も推奨
このキャッシュの有効期間を設定するには、一般的に「.htaccess(ドットエイチティーアクセス)」というサーバーの設定ファイルを編集する必要があります。このファイルに、「画像ファイルは1年間キャッシュを有効にする」「CSSファイルは1ヶ月間キャッシュを有効にする」といったコードを記述することで、ブラウザにキャッシュのルールを伝えることができます。
しかし、この.htaccessファイルはサーバーの動作を制御する非常に重要なファイルであり、記述を一行でも間違えると、サイト全体が表示されなくなる「真っ白な画面(500エラー)」を引き起こす危険性があります。そのため、もしあなたがサーバーの操作に慣れていない場合は、無理にご自身で編集することはお勧めしません。
ではどうすれば良いかというと、ここでもWordPressプラグインが役立ちます。ステップ2で紹介した「LiteSpeed Cache」や、その他多くのキャッシュ系プラグインには、この.htaccessファイルを自動で編集し、最適なキャッシュ設定を施してくれる機能が含まれています。まずはプラグインの利用を検討し、それでも解決しない場合や、WordPress以外のサイトの場合は、サイトを制作した会社やサーバーに詳しい専門家に相談するのが最も安全で確実な方法と言えるでしょう。
【ステップ5】未使用のCSS・JavaScriptを削除する
PageSpeed Insightsの改善項目の中には、「未使用のCSSを削除してください」「未使用のJavaScriptを削除してください」という指摘が表示されることがあります。これは文字通り、あなたのサイトのコードの中に、現在は使われていない不要なCSSやJavaScriptが含まれており、それがページの読み込みを遅くしている、というサインです。
このステップは、これまでの4つに比べて技術的な難易度が格段に高く、Web担当者の方がご自身で対応するのは非常に困難です。しかし、なぜこのような問題が起こるのか、そして専門家にどう依頼すれば良いのかを知っておくことは、担当者として非常に重要です。
なぜ未使用のコードが残ってしまうのか?
では、なぜ使ってもいないコードがサイトの中に残ってしまうのでしょうか。
これを「家のリフォーム」に例えると分かりやすいかもしれません。長年住んでいる家をリフォームしたり、模様替えをしたりすると、知らず知らずのうちに不要なものが溜まっていきます。
例えば、古い壁紙の上に新しい壁紙を貼った場合、見た目は綺麗になっても、壁の中には古い壁紙が残ったままです。また、昔使っていた家電のコードが、家具の裏でコンセントに刺さったままになっていることもあるでしょう。
Webサイトもこれと同じです。サイトを長年運用していると、デザインのリニューアルを行ったり、新しい機能を追加するためにプラグインを導入したり、そして不要になったプラグインを停止・削除したり、といった変更を繰り返します。その過程で、以前は使っていたけれど今はもう不要になったCSSの記述や、特定の機能のためだけに使われていたJavaScriptのコードが、削除されないまま残り続けてしまうことがあるのです。これらの「ゴミ」が積もり積もって、サイト全体のデータを重くし、表示速度を低下させる原因となります。
専門家への依頼方法とポイント
この「未使用コードの削除」という作業は、家のリフォームに例えるなら、壁の中に埋め込まれた古い配線を取り除くような、非常に専門的な作業です。どのコードが本当に不要で、どのコードが必要なのかを正確に見極めるには、サイト全体の構造を深く理解している必要があります。もし見極めを誤って、必要なコードまで削除してしまうと、サイトのデザインが崩れたり、予約フォームなどの重要な機能が動かなくなったりする危険性があります。
したがって、この項目が指摘された場合、Web担当者であるあなたの役割は「自分でコードを修正すること」ではなく、「専門家に的確に修正を依頼すること」です。
サイトを制作してくれた会社や、保守を契約しているエンジニアに連絡を取りましょう。その際、「PageSpeed Insightsで計測したところ、『未使用のCSS/JavaScriptの削除』という項目が指摘されています。スコア改善のために、この箇所の修正をお願いできますでしょうか」と、具体的な指摘項目を伝えるのがポイントです。可能であれば、レポート画面のスクリーンショットを添付すると、よりスムーズに話が伝わります。
自分で解決できないからと諦めるのではなく、問題を特定し、専門家に正しくバトンを渡すこと。これもまた、Web担当者の重要な仕事の一つなのです。
PageSpeed Insightsのよくある質問(Q&A)


ここまでPageSpeed Insightsの見方と具体的な改善手順を解説してきましたが、実際に運用していると、さらに細かい疑問が出てくるものです。この章では、Web担当者の方からよく寄せられる質問とその回答をまとめました。きっとあなたの疑問もこの中に含まれているはずです。
Q. モバイルのスコアだけが極端に低いのはなぜですか?
これは、PageSpeed Insightsを使い始めたほとんどの方が最初に驚くポイントです。PCでは70点台なのに、モバイルだと30点台になってしまう、といったケースは決して珍しくありませんので、まずはご安心ください。
この大きな差が生まれる主な理由は、PageSpeed Insightsがテストを行う際の「想定環境」の違いにあります。PCのスコアは、高速な光回線と性能の高いマシンで計測される一方、モバイルのスコアは、比較的低速な通信回線(4Gなどを想定)と、平均的な性能のスマートフォンで計測されるように設定されています。つまり、意図的に厳しい環境でテストされているため、モバイルのスコアはどうしても低くなりがちです。
Googleは現在、スマートフォンユーザーの体験を重視する「モバイルファーストインデックス」を採用しているため、私たちはこの厳しいモバイルのスコアをいかに改善していくかを考える必要があります。特に画像の圧縮やレンダリングブロックの解消といった、ページのデータ量を軽くする施策が、モバイル環境ではPC以上に効果を発揮します。
Q. Basic認証(ベーシック認証)がかかったサイトは計測できますか?
結論から言うと、IDとパスワードを入力するBasic認証が設定された、制作中のサイトやテスト環境のページを、そのままPageSpeed Insightsで計測することはできません。PageSpeed Insightsの計測プログラムも一人の訪問者とみなされ、認証画面でブロックされてしまうためです。
しかし、諦める必要はありません。対処法はいくつかあります。最も安全で推奨される方法は、Google Chromeブラウザに搭載されている「Lighthouse(ライトハウス)」という開発者ツール機能を使うことです。実は、PageSpeed Insightsのラボデータは、このLighthouseのエンジンを使って生成されています。あなたがIDとパスワードで認証を通過し、ブラウザで表示できているページであれば、Lighthouseを使うことでPageSpeed Insightsとほぼ同じ内容のレポートを取得することが可能です。
Q. スコアを改善したのに、検索順位がなかなか上がりません…
これも非常によくある質問です。多大な努力をしてスコアを90点台まで上げたのに、期待したほど検索順位が上がらないと、がっかりしてしまいますよね。
ここで重要なのは、サイトの表示速度(PageSpeed Insightsのスコア)は、Googleが検索順位を決めるための数百あると言われる要因の、あくまで「一つ」に過ぎないという事実です。表示速度の改善は、遅いことによるマイナス評価をゼロに近づけるための、いわば「守りのSEO」です。
検索順位を本格的に上げるには、ユーザーの悩みに的確に答える質の高いコンテンツを作成したり、サイトの専門性を高めたり、他のサイトから評価される(被リンクを獲得する)といった、「攻めのSEO」が不可欠です。スコア改善は、あくまでユーザー体験を向上させ、その結果として離脱率が下がり、間接的にSEOに良い影響を与えるものだと捉えましょう。焦らず、コンテンツ制作など他のSEO対策と並行して取り組むことが大切です。
Q. 結局、点数は何点を目指せばいいのですか?
理想的な目標は、緑色で評価される「90点以上」です。この水準に達すれば、ユーザーは非常に快適にサイトを閲覧できるでしょう。
しかし、常に100点満点を目指す必要はありません。スコアを1点上げるために、サイトのデザイン性や便利な機能を犠牲にしてしまっては、本末転倒です。まずは、現在が赤色(0~49点)なのであれば、オレンジ色(50~89点)の範囲に入ることを目指しましょう。
また、もう一つの考え方として、「競合サイトのスコアを参考にする」という視点も有効です。あなたが上位表示を狙っているキーワードで、実際に検索結果の1ページ目に表示されている競合サイトのスコアを調べてみましょう。
もし競合の多くが70点台なのであれば、まずはそのラインを超えることを現実的な目標に設定する、という戦略も考えられます。スコアはあくまで指標です。最終的な目的は、スコアを上げることではなく、その先のビジネス成果に繋げることだという点を忘れないようにしましょう。
まとめ


今回は、Google PageSpeed Insightsの使い方について、レポートの見方から具体的な改善手順、よくある質問までを5つのステップで解説しました。
この記事をここまで読んでくださったあなたは、もう「真っ赤なスコア」や「見慣れない専門用語」を前にして、途方に暮れることはないはずです。レポートが示す課題を冷静に分析し、最初に取り組むべきアクションは何かを判断できる知識が、すでに身についています。
最後に、最も大切なことをお伝えします。それは、「PageSpeed Insightsのスコアを改善すること自体が、仕事のゴールではない」ということです。
私たちが目指すべき本当のゴールは、その先にあります。サイトの表示速度を改善することでユーザーのストレスをなくし、快適な体験を提供すること。その結果として、ページの離脱率を下げ、商品やサービスのお問い合わせ・購入といったビジネスの成果に繋げること。そして、「サイトが速くなったね」とお客様や社内のメンバーに喜んでもらい、Web担当者としてのあなたの信頼と評価を高めること。これこそが、スコア改善に取り組む本来の目的なのです。
PageSpeed Insightsは、そのゴールにたどり着くための「宝の地図」に過ぎません。
さあ、まずはその地図を広げ、今日解説した「ステップ1:画像の最適化」から、あなたのサイト改善の第一歩を踏み出してみましょう。その小さな一歩が、必ずやあなたのビジネスを大きく加速させるはずです。

