PageSpeed Insightsとは？使い方・分析・改善方法を解説

「PageSpeed Insights（ページスピードインサイト）」は、Webサイトの表示速度を計測できるツールです。Googleが無料で提供しており、Webページの読み込み速度の分析・改善に活用できます。

Googleは、SEOにおいてユーザビリティを重要視しています。ユーザビリティの良し悪しを図る大きな要素の1つが、Webサイトの表示スピードです。

今回は、PageSpeed Insightsの概要や重要性、見るべき項目、改善方法などを解説します。PageSpeed Insightsを使いこなして、Webサイトの表示スピードの改善につなげましょう。

PageSpeed Insightsとは？

PageSpeed Insights(ページスピードインサイト)とは、Webサイトの表示速度をGoogleが考えるスコアで測定する無料ツールです。Webページ読み込み速度の分析・改善につなげることが出来ます。PageSpeed Insightsにて、測定したいページのURLを入力するだけで、対象ページの表示速度スコアや改善方法を可視化することが出来ます。分析に際してタグの設置などの設定を行う必要はありません。

PageSpeed Insightsでは、PCページだけでなく、モバイルページの表示速度状況も確認することが可能です。また、URLを入力するだけで測定できるため、競合他社のページ速度を測定することもできます。

対象ページの表示スピードについては、34の評価項目から分析し、それぞれの改善方法について教えてくれます。

そのため、Webサイトの改善チェックツールとして重宝されています。

Webサイトの表示速度の重要性

冒頭でも紹介したように、サイトの表示スピードは、ユーザビリティに大きく影響します。

そのため、PageSpeed Insightsで自社サイトの表示スピードを確認し、改善していくことが重要です。

それでは、サイト表示スピードの重要性について、ポイントを絞って紹介していきます。

※ユーザービリティに関してはこちらの記事で解説しています。
ユーザビリティとは？向上させるための方法も解説！

表示スピードが遅いと離脱率が大きくあがる

例えば、ユーザーがWebサイトに訪れた際に、なかなかページが読み込まれなかったとしたらどのように感じるでしょうか？一向に見たいページが表示されなければ、見たいページを諦めて検索結果ページや他のページに戻ってしまうでしょう。

実際に、Googleが2017年に発表した調査結果によると、モバイルページの読み込みが3秒以上かかった場合、53％のユーザーが諦めて離脱してしまうとのことです。そのため、せっかくユーザー向けに用意したコンテンツも、読み込み時間が遅ければ閲覧してもらえません。

スマートフォンの台頭による影響

Webサイトにおける表示スピードの重要性は、スマートフォンの台頭によって、より顕著になってきています。スマートフォンでの通信は、アクセスした時の通信環境に大きく左右されるため、読み込み速度は非常に重要です。

SEOをする上で重要な要素の1つ

また、先にも取り上げた通り、読み込み速度はSEOにおいても重要な要素の1つとなっています。冒頭でも述べた通り、Googleは2018年にモバイルサイトの表示スピードを検索順位の指標に加える「スピードアップデート」を行いました。

2021年にはユーザー体験に関する評価指標として「コアウェブバイタル」をアルゴリズムに組み込みました。

コアウェブバイタルでは、「LCP」「FID」「CLS」と呼ばれる指標があり、その内の2つ「LCP」と「FID」が読み込み速度に関係します。

コアウェブバイタルに関しては、詳しくは以下にて紹介していますので参考にしてみてください。

コアウェブバイタルとは？LCP・FID・CLSなどSEOに影響のある指標も解説
「ウェブに関する主な指標」とは？サーチコンソールの見方や改善方法を解説

PageSpeed Insightsを使った分析方法

続いて、PageSpeed Insightsの具体的な使い方について紹介していきます。

まず、PageSpeed Insightsのページにアクセスします。

「ウェブページのURLを入力」という枠の中に、分析したいページのURLを入力します。

URLを入力後、「分析」のボタンを押し、分析を開始します。そのまましばらく待てば、分析結果が表示されます。

まずは、スピードを測定

分析結果が表示されたのであれば、まずは対象ページの表示スピードを確認しましょう。

PageSpeed Insightsでは、対象ページについて、PCとスマートフォンそれぞれで表示スピードを確認することが出来ます。これはGoogleが公式に運営しているLighthouse（ライトハウス）と呼ばれるものから抽出され、100点満点のスコアをもとに表示されます。

このスコアは全世界のホームページの速度を評価しており、0点から100点満点で算出され、点数に応じて「Low」「Medium」「Good」に分類されています。各分類における評価は以下の通りとなります。

「Low」：0点～49点
改善点が多くある状態となります。全世界のページを対象とした読み込み速度の中で、下位1/3にあたる点数を表しています。

「Medium」：50点～89点
平均的な表示速度ですが、まだ改善の余地がある状態となります。全世界のページを対象とした読み込み速度の中で、中間の1/3にあたる点数を表しています。

「Good」：90点～100点
表示スピードのパフォーマンスに関する改善点はほぼない良好な状態となります。全世界のページを対象とした読み込み速度の中で、上位1/3にあたる点数を表しています。

PageSpeed Insightsのスコアは、全世界のページを含めてスコアリングしています。

そのため、一概に何点あれば良いかは言えませんが、Mediumにあたる50点以上を目指すのが1つの目安となります。

また、同じURLであってもネットワークの状況などによってスコアが変動することもあります。そのため、2～3回分析を行い、その中で平均値を参考に分析すると効果的です。

測定結果の分析

続いて、測定結果の分析項目について紹介していきます。

PageSpeed Insightsでは、以下の5つの項目でサイトを評価分析してくれます。

①実際のユーザーの環境で評価する

「実際のユーザーの環境で評価する」の項目は、ユーザーから実際に収集したデータを表しています。GoogleがChromeをもとに独自に収集した世界中のユーザーデータに基づいて、表示スピードの判定を行います。

②パフォーマンスの問題を診断する

「パフォーマンスの問題を診断する」の項目は、Googleのシミュレーションテスト環境下において測定されたデータを表しています。シミュレートした環境でサイトを読み込んで、詳しい分析情報や改善の提案につなげています。

③改善できる項目

分析ページの読み込み速度改善項目です。改善によって表示スピードがどれだけ時間短縮できるかなども明記されているため、改善にかかる工数と効果を参考に、優先順位をつけると効果的です。

なお、Googleが提案する優先度として重要視する項目は赤色で、次に改善すべき項目はオレンジ色と色分けされています。

④診断

診断の項目では、③の改善できる項目よりもさらに詳細な情報や、ホームページの開発環境に対する診断結果が表示されます。こちらも③同様に重要な項目は色分けされて表示されます。

⑤合格した監査

対象ページにおいて合格が得られた項目が表示されます。

改善施策を実施した後で、施策が上手くいったかをチェックするときに使えます。

読み込み速度の改善方法

続いて、改善できる項目として提示された項目の具体的な改善方法について紹介していきます。

改善できる項目は、全部で34項目存在しますが、その中でも重要度の高い項目について、ポイントを紹介していきます。

①画像の最適化

画像の最適化は、PageSpeed Insightsでよく提案される「改善できる項目」の1つです。

具体的には、「次世代フォーマットでの画像の配信」、「適切なサイズの画像」、「効率的な画像フォーマット」などがこの対象となります。

Webサイトに掲載する画像は、解像度がキレイな画像ほどその容量は重くなります。

解像度や画像サイズフォーマットを最適化することで改善することが可能です。

例えば、これまで画像ファイルには「jpeg」や「ping」と呼ばれるファイル形式が一般的でしたが、これらのファイル形式よりも、「JPEG2000」や「JPEGXR」、「WebP」といった次世代のファイル形式の方が、画像を圧縮する性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

②ソースコードの最小化

ソースコードの最小化も、画像の最適化と同様にPageSpeed Insightsでよく提案される項目です。

HTMLやCSS、JavaScriptには、余分な改行やスペースなど、使用していないソースコードが意外と多く記述されています。これらを削除・圧縮することで、表示スピードの向上につなげることができます。

HTMLの圧縮には「Chrome 拡張機能」でPageSpeed insightsをインストールすると改善箇所がディベロッパーツールから確認できるようになります。

CSSの圧縮は「YUI Compressor」と「cssmin.js」、JavaScriptの圧縮は「Closure Compiler」「JSMin」「YUI Compressor」などを活用することで、余分なスペース、改行、インデントなどの不要なバイトを取り除くことが出来ます。

③ブラウザキャッシュの活用

ブラウザのキャッシュとは、過去に利用したデータを一定期間保存し、再利用する仕組みのことを指します。

改善項目で「ブラウザのキャッシュを活用する」と表示された場合には、ファイルのキャッシュが許可されていない、またはファイルのキャッシュの有効期間が短い可能性が原因として考えられます。

この場合には、サーバーでブラウザのキャッシュを有効にした上で、静的なリソースのキャッシュの有効期間を1週間以上、広告やウィジェットなどは1日以上などに設定すると効果的です。

④そのほかの改善方法

その他、以下の改善項目も読み込み速度の改善に効果的です。

・サーバーの応答時間を短縮する

サーバーの応答時間に問題がある場合には、サーバー自体のグレードアップや乗り換えを行うだけでスコアが改善する場合があります。

ただ、サーバーの増強や乗り換えには工数やコストが発生しますので、自社の状況を確認した上で、判断しましょう。

・CDNの導入

CDNとは、グローバルに分散配置されたキャッシュサーバーを活用し、ホームページのコンテンツをユーザーに配信する仕組みのことを指します。

昨今は、動画配信などインターネットに流れるWebコンテンツの大容量化が進み、ネットワークの負荷は高くなり続けています。アクセスが集中し、Webページが表示されにくくなったり、コンテンツのダウンロードに時間がかかったりすることも少なくありません。それらの問題を解決するために作られたのがCDNです。

通常のウェブサーバーを介したアクセスとは異なり、配信パフォーマンスが向上し、表示スピードの改善につながります。

・Webフォントの削減

Webフォントは、デザイン性に優れている反面、読み込み速度が遅くなる傾向にあります。

デザインを優先すべきポイントであれば問題ありませんが、そうでない場合には、通常フォントの方が表示速度も速くおすすめです。

PageSpeed Insightsが使えない場合はどうすればいい？

PageSpeed Insightsは、サイトの読み込み速度に関する問題点が可視化され、改善点も具体的に確認できるため非常に便利です。

しかし、自社サイトでBasic認証がかかったり、ログインが必要だったりなど、一部PageSpeed Insightsが使えないケースも存在します。このような場合には、Chrome拡張機能のLighthouseを使用することで、対象ページの表示スピードを確認することが可能です。

Lighthouseでは、主に以下の分析を行うことができます。

Performance：表示速度に関わる指標やCSSの記述の項目
Progressive Web App：プログレッシブウェブアプリへの対応に関する項目
Accessibility：使いやすさ、アクセスのしやすさなどの項目
Best Practices：https化、キャッシュ利用などの項目
SEO：SEOに影響する項目

まとめ

PageSpeed Insightsは、速度改善において問題点や改善点を可視化できるため、多くのWeb担当者に活用されています。

しかし、正しい知識がなければ、改善ポイントについて理解できず、具体的に施策を進めることが出来ません。

専門的な知識がない場合は、SEOコンサルタントに依頼するという方法もあります。

株式会社ヒトノテでは、ご紹介した自社サイトの表示速度やユーザビリティーの改善のご支援も行っていますので、ぜひお気軽にご相談ください。

執筆者：山本卓真

株式会社ヒトノテのSEOコンサルタント。中小企業から大企業まで様々な規模、業種のサイトのSEOに携わる。WEBマーケティングの広い知見と経験をもとにクライアントと伴走することが得意です。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。