facebook twitter hatena pocket
週2メルマガ

最新情報がメールで届く

登録

登録
Webマーケティング

PageSpeed Insights(ページスピードインサイト)の使い方と表示速度の改善方法

最終更新日:2022.09.06

ページ表示速度は、ユーザビリティやGoogleの検索順位に影響するため、Webサイトを運営するうえで重要な要素の1つです。ユーザー体験をより良いものにして、検索結果で上位表示を目指すには、適切な改善方法を知る必要があります。

この記事では、Webサイトの表示速度を改善するために必要なツール「PageSpeed Insights(ページスピードインサイト)」の使い方や改善のポイントについて詳しく解説します。

目次

    Googleが提供するPageSpeed Insights(ページスピードインサイト)とは?

    PageSpeed Insightsとはどのようなツールなのでしょうか。ここではPageSpeed Insightsの概要と使い方、使用上の注意点を解説します。

    PageSpeed Insights(ページスピードインサイト)の概要

    PageSpeed InsightsはWebサイトやページの読み込み速度を測定してくれる無料のツールです。携帯電話(モバイル端末)とデスクトップ(PC)に対応しており、URLを入力するだけでWebページの読み込み速度や改善ポイントを分析できます。また、自社サイトだけでなく、競合他社のWebサイトの状態も調べることが可能です。

    PageSpeed Insights(ページスピードインサイト)の使い方

    PageSpeed Insightsの使い方は簡単です。以下の手順に沿って分析してみましょう。

    1. PageSpeed Insightsにアクセス
    2. 解析したいWebページのURLを入力する
    3. 「分析」をクリックする
    4. 分析した結果と改善点が表示される

    デフォルトでは携帯電話の分析結果と改善点が表示されています。「デスクトップ」のタブをクリックすると、デスクトップのスコアに切り替えることができます。

    PageSpeed Insights(ページスピードインサイト)使用上の注意点

    PageSpeed Insightsは、同じURLであっても分析の度にスコアが変動することがあります。PageSpeed Insightsの公式ガイドにもさまざまな影響で変動すると記載されており、要因としてはローカルネットワークやクライアント ハードウェアの利用状況、クライアント リソースの競合状態があるとのことです。

    実行するたびにパフォーマンス スコアが変わるのはなぜですか?ページは何も変更していません。

    パフォーマンス測定の変動は、複数のチャネルでのさまざまな影響の度合いによって発生します。指標の変動の一般的な原因としては、ローカル ネットワークの利用状況、クライアント ハードウェアの利用状況、クライアント リソースの競合状態があります。

    出典:PageSpeed Insights 「PageSpeed Insights API について

    PageSpeed Insights(ページスピードインサイト)の分析項目と見方

    PageSpeed Insightsの分析では、フィールドデータとラボデータの2つが使用されています。URLを入力し、「分析」をクリックすると、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」という2つのセクションに分かれて結果が表示されます。

    フィールドデータとラボデータの違い

    PageSpeed Insightsにおけるフィールドデータは実際のユーザーから匿名で集めているパフォーマンスデータで、ラボデータはシミュレートした環境によって読み込み・分析されたn=1のデータです。検索アルゴリズムにはフィールドデータが組み込まれています。

    フィールド データは特定の URL の今までのパフォーマンスについてのレポートであり、実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データです。ラボデータは、一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータです。

    出典:PageSpeed Insights 「PageSpeed Insights API について

    • 「実際のユーザーの環境で評価する」:フィールドデータを使用
    • 「パフォーマンスの問題を診断する」:ラボデータを使用

    使用しているデータは上記のように異なるため、PageSpeed Insightsの分析結果に違いが出ることがあります。

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

    全世界のChromeユーザーデータに基づいて、入力されたWebサイトのパフォーマンスを評価するセクションです。分析の結果、「ウェブに関する主な指標の評価」の欄で「合格」か「不合格」のどちらかが表示されます。

    ▲不合格と合格の例

    評価の内訳は以下のようになっており、どの指標に問題があるのかがわかります。

    • First Contentful Paint (FCP):ページの読み込み開始後、テキストや画像などコンテンツのいずれかが画面上にレンダリングされるまでの時間
    • First Input Delay(FID):リンククリックやボタンタップなどのユーザーのアクションに応答するまでの時間
    • Largest Contentful Paint(LCP):ビューポート内の最も大きいテキストブロックや画像がレンダリングされるまでの時間
    • Cumulative Layout Shift (CLS):コンテンツのレイアウトの予期しないズレを測定する指標

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

    シミュレートした環境で読み込まれたサイトの分析情報や改善提案をチェックできるセクションです。計算ツールにはLighthouseが用いられています。「パフォーマンスの問題を診断する」で確認できるのは以下の項目です。

    ・パフォーマンス

    読み込んだWebサイトやページのパフォーマンスは100点満点で評価されます。表示されるスコアによって以下のように評価が分かれます。

    • スコア0~49:赤色で表示され、相対的に悪い評価
    • スコア50~89:黄色で表示され、相対的に改善が必要
    • スコア90~100:緑色で表示され、相対的に良い評価

    ・指標

    パフォーマンスの指標として下記の項目と表示速度が表示されます。スコアは( )内のウェイトに応じてつけられています(Lighthouse v8の場合)。

    • First Contentful Paint(FCP):(10%)
    • Speed Index(SI):(10%)
    • Largest Contentful Paint(LCP):(25%)
    • Time to Interactive(TTI):(10%)
    • Total Blocking Time(TBT):(30%)
    • Cumulative Layout Shift(CLS):(15%)

    参考:Lighthouse Scoring Calculator

    ・改善できる項目

    Webページのパフォーマンスを改善可能な項目と最適化するための案が表示される項目です。各案には改善すると削減が見込めるデータ量の目安なども提示されます。

    【改善できる項目の例】

    • レンダリングを妨げるリソースの除外
    • 使用していないJapaScriptの削減
    • 使用していないCSSの削減
    • 適切なサイズの画像
    • CSSの最小化
    • 次世代フォーマットでの画像の配信
    • JavaScriptバンドル内の重複モジュールを削除する
      など

    ・診断

    読み込んだWebサイトやページがWeb開発のおすすめの設定にどれくらい沿っているか、診断結果が表示されます。例えば「ウェブフォント読み込み中のテキストの表示」「静的なアセットと効率的なキャッシュ ポリシーの配信」などです。

    ・合格した監査

    読み込んだWebサイトやページのうち、診断に合格した項目が表示されます。

    なぜWebサイトの表示速度が重要なのか?

    WebサイトやWebページの表示速度はユーザビリティやSEOの観点で重要です。その理由をあらためておさらいしましょう。

    Webサイトのページ表示速度はユーザビリティに影響を与える

    ページの読み込みがあまりにも遅い場合、訪問しようとしたユーザーは離脱してしまう可能性があります。Googleが2017年に発表したデータによると、モバイルサイトの読み込みに3秒以上かかる場合、約半数が離脱することが明らかになっています。速く表示されるWebサイトをユーザーがいかに求めているかがわかるでしょう。

    ページのロード時間が長くなるにつれて:
    1秒から3秒で直帰の確率が32%増加
    1秒から5秒で直帰の確率が90%増加
    1秒から6秒で直帰の確率が106%増加
    1秒から10秒で直帰の確率が123%増加

    出典:Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed(訳は編集部)

    表示速度の遅いページはインデックスされない可能性がある

    あまりにも表示の遅いサイトは、クローリングされてもインデックスされにくくなる可能性があると言われています。GoogleのJohn Mueller(ジョン・ミューラー)氏は、2018年のオフィスアワーにてページのダウンロード時間が「1000ms(1秒)以上かかるとクローリングに制限をかけるかもしれない」という旨の発言をしています。どんなに良いコンテンツもインデックスされなければ検索結果には表示されませんので、表示速度の改善はやはりWebサイトの運営において重要と言えるでしょう。

    English Google Webmaster Central office-hours hangout

    表示速度がランキングシグナルになっている

    Googleは2018年に、ページの読み込み速度をデスクトップ検索だけではなく、モバイル検索のランキングシグナルにも適用することを発表しました。

    読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。

    出典:Google検索セントラルブログ「ページの読み込み速度をモバイル検索のランキング要素に使用します」(文章は原文ママ)

    デスクトップ、モバイルにかかわらず、読み込み速度の遅いサイトは検索順位に影響が出る可能性があるため、改善が必要なのです。

    Core Web Vitalsがランキング要因になっている

    Core Web Vitalsとは、ユーザーの体験(UX)を評価する指標です。以前はユーザーの検索意図に合致するか否かが良いコンテンツの指標でしたが、Core Web Vitals導入後はユーザーの使い勝手も評価されるようになっています。Core Web VitalsにはPageSpeed Insightsで計測できるFID、LCP、CLSの3つが含まれています。

    • First Input Delay(FID)
    • Largest Contentful Paint(LCP)
    • Cumulative Layout Shift(CLS)

    なお、Googleが発表しているFAQの内容によると、2022年2月よりデスクトップ検索のランキングシグナルにも使用されるようになっているとのことです。

    更新(2022年2月)。 ページエクスペリエンスは、デスクトップ検索ランキングのシグナルとしても使用されるようになりました。これは、同じ3つのコアウェブバイタルの指標を意味します。LCP、FID、CLSの3つのコアウェブバイタルと、それらに関連する閾値がデスクトップランキングに適用されることになります。

    出典:Search Console ヘルプ「コアウェブバイタルとページエクスペリエンスに関するFAQ
    参考:Google Developers「Web Vitalsの概要:サイトの健全性を示す重要指標

    Webページの表示速度を改善するためのポイント

    では、Webページの表示速度を改善するには具体的にどうすれば良いのでしょうか。改善が必要な箇所はサイトによって異なりますが、主なポイントは次の通りです。

    画像の最適化

    「次世代フォーマットでの画像の配信」「適切なサイズの画像」「効率的な画像フォーマット」と表示された場合など、画像のサイズやフォーマットに関する指摘があった場合に有効な対策です。次世代フォーマットには、Googleが開発した「WebP」や「AVIF」などが推奨されています。またツールを活用し、サイトにアップする画像データの画質を落とさずに画像サイズを圧縮するのもおすすめです。

    関連記事:無料の画像圧縮ツール&サイト7選

    キャッシュの有効期間の長期化

    「静的なアセットと効率的なキャッシュポリシーの配信」と表示されている場合、キャッシュの有効期間を長くすることにより、ページを再訪問したユーザーのページ読み込み速度を改善できる可能性があります。

    なおGoogleは、キャッシュ期間は少なくとも1週間、静的なコンテンツや更新頻度が低いコンテンツは最大で1年程度を勧めています。

    キャッシュ期間は少なくとも 1 週間、静的アセットや更新頻度の低いアセットについては最大で 1 年間とすることをおすすめします。

    出典:PageSpeed Insights「ブラウザのキャッシュを活用する

    PageSpeed Insightsを活用し、ユーザー体験の向上を目指しましょう

    GoogleがPageSpeed Insightsを無償で提供するほど、Webサイトの運営において表示速度の改善は重要な項目になっていると言えます。PageSpeed Insightsの使用にあたり特別な設定は不要で、気になるサイトやページのURLを入力するだけの便利なツールです。

    ページの表示速度はユーザー体験を損ねるでなく、SEOにも影響するため、Webサイトを運営している方はPageSpeed Insightsの活用を運用フローに取り入れ、改善を図ってみてください。

    Marketing Native編集部

    記事執筆者

    Marketing Native編集部

    Marketing Native(マーケティングネイティブ)は株式会社CINC(シンク)が運営しているメディアです。 CMOのインタビューやニュース、Tipsなど、マーケターに役立つ情報を発信しています。
    Twitter:@market_native
    Marketing Nativeについて

    メルマガ登録する

    メルマガ登録
    週2メルマガ

    最新情報がメールで届く

    登録

    登録