突然500エラー（Internal Server Error）に！原因と解決方法は？
SEO対策
2023.01.23
専属のコンサルタントが貴社Webサイトの課題発見から解決策の立案を行い、検索エンジンからの自然検索流入数向上のお手伝いをいたします。
【WEB担当者必見】PageSpeed Insightsを使ってサイトの表示速度を改善しよう！
SEOサービスのご案内
今すぐ無料ダウンロード
SEOサービスのご案内
今すぐ無料ダウンロード
- 目次
※フォーム送信後、メールにて資料をお送りいたします。
SEOサービスのご案内
フォームでの問い合わせが
完了いたしました。
メールにて資料をお送りいたします。
WEBサイトの表示速度はサイトを運営する上で非常に重要です。サイトの表示速度が速いと、ユーザーの利便性向上やSEOにもよい影響を与えることができます。
本記事では、自社サイトの表示速度が遅く、改善策を検討しているWEB担当者向けに、Googleが提供するツールの1つである「PageSpeed Insights」 の仕様や分析結果の項目、活用方法について紹介していきます。
PageSpeed Insightsとは？
「PageSpeed Insights」(ページスピードインサイト)は、Googleが提供するモバイル端末やパソコン向けのウェブーページの読み込み速度をスコア測定するためのツールです。スコア測定結果から、ページの改善方法を確認することも可能です。
PageSpeed Insightsは以前から多くの人が使っている無料ツールで、2021年にリニューアルが行われました。
PageSpeed Insightsでできること
下記は現在PageSpeed Insightsで確認することができる情報です。
これらのデータを活用してユーザーの表示速度に問題がないかを確認し、どのようにすれば自サイトを最適化できるかどうかを検討して対策しましょう。
- フィールドデータ：Chrome User Experience Report（CrUX）のレポートが出せる
- ラボデータ：Lighthouseで分析を行った結果
- 改善できる項目：ページ表示速度の向上を狙うための改善案
- 診断：ページ表示速度がWeb開発にて適している設定に近いかの項目
- 合格した監査：問題がないと判断された項目
PageSpeed Insightsの使い方
ここからは実際にPageSpeed Insightsの使い方についてご紹介します。
PageSpeed Insightsの見方
PageSpeed Insightsの使い方はリニューアル前と変わりはありません。
下記画像に分析したいURLを入力後、青色枠の「分析」をクリック
クリック後、モバイル・パソコン両方のページ表示速度が確認できます。
モバイル・パソコンの切り替え方法も簡単で下記画像の赤枠のチェックしたい名称をクリックすることで切り替わります。
リニューアル後は、リニューアル前と同じく、「0～100」のスコアでページ表示速度が速いのか？遅いのか？判定を行ないます。
スコアでの評価は下記になり、色で分かりやすく表しています。
| スコア | 評価 |
|---|---|
| 90～100（緑） | 速い |
| 50～89（オレンジ） | 平均 |
| 0～49（赤） | 遅い |
また、リニューアル後はスコアの分析の基は、「Lighthouse」になっています。
PageSpeed Insightsの基準
PageSpeed Insightを使って確認してみたものの、自サイトのスコアが低いのではないかと不安に思った人もいるのではないでしょうか？
サイトスピード(ページの表示速度)は、検索順位を決定するうちの要素の1つにすぎません。
そのため、PageSpeed Insightのスコアが100点であったからといって上位表示になるとは限らないのです。
自サイトのスコアをチェックして改善できる項目を把握し、サイトの最適化を行うことが重要になります。
スコアはあくまで指標になりますが、表示速度が遅いと利便性が下がってしまい、ユーザーが離脱してしまう可能性が高くなるので、スコアが50点以下の場合は改善の対策を積極的に行っていきましょう。
PageSpeed Insightsでの評価項目
フィールドデータ
Googleがページの表示速度の判断として使用しているデータであるChrome User Experience Report（CrUX）からレポートを出してくれる機能があります。
下記画像の赤枠「提供元の概要を表示」をクリックすることで、Chrome User Experience Report（CrUX）と比較した全てのページの速度の判定が見られます。
この結果は、以前のPageSpeed Insightsの場合、「origin:」のコマンドを使うことで結果を知ることができました。ですが、Chrome User Experience Report（CrUX）から判定ができるため、リニューアル後のPageSpeed Insightsでは、「origin:」のコマンドは廃止になっています。
Chrome User Experience Report（CrUX）とは？
上記で述べているChrome User Experience Report（CrUX）とは、Chromeを利用しているユーザーのデータが使われています。そのため、以前のPageSpeed Insightsよりも正確な結果が出せると言えます。
ラボデータ
「Lighthouse」を使って分析を行ない下記項目や色でスコアの評価を分かりやすく表してくれます。
- 緑のチェックマーク・・・・速い
- オレンジのマーク・・・・平均
- 赤のマーク・・・・遅い
| 項目 | 内容 |
|---|---|
| コンテンツの初回ペイント(FCP) | コンテンツまたは、画像が初めて表示されるまでの時間を測定します。 |
| 速度インデックス(Speed Index) | ページのコンテンツが見えるまでの時間を測定します |
インタラクティブになるまでの時間 | ユーザーがページの操作が可能になるまでの時間を測定します。 |
| 意味のあるコンテンツの初回ペイント(FID) | ユーザーがメインとなるコンテンツが表示されたと判断するまでの時間を測定します。 |
| CPUの初回アイドル | ユーザーが操作してから反応するまでの時間を測定します。 |
| 入力の推定待ち時間 | ユーザーが入力を行ない、その反応までの時間を測定します。 |
Lighthouseはどんなツール？
冒頭でも述べている「Lighthouse」はGoogleが提供しているツールです。PWAに関しての評価を主に測定してくれます。
Lighthouseの詳細は下記ページにて紹介しています。
改善できる項目
以前のPageSpeed Insights同様、ページ表示速度を向上させるための改善案が表記されます。更に、短縮できる推定時間も表記されているので、どのくらいの時短ができるのかという目安としての判断材料にすることもできます。
また、この項目でも色で重要度を分かりやすく表してくれています。
- 赤・・・・最優先の改善案
- オレンジ・・・・改善を行った方がいい
診断
この項目では、アプリケーションに関する改善点を上げてくれます。こちらも改善することで、ミリ秒単位での時短の効果が得られます。
また、この項目でも色で重要度を分かりやすく表しています。
- 赤・・・・最優先の改善案
- オレンジ・・・・改善を行った方がいい
合格した監査
PageSpeed Insightsのツールで改善の必要がないと判断された項目が見れます。こちらが多いほど、分析を行ったページはユーザーに早くページ情報を与えていると判断ができます。
下記画像の赤枠をクリックすることで、改善が必要ではない一覧が確認できます。
PageSpeed Insightsの改善方法
ここでは、PageSpeed Insightsで実際に提案される改善方法について解説していきます。
画像を最適化する
ページ上の画像(GIF、PNG、JPEG)を最適化することで、ファイルサイズを削減できる場合に提案されます。画像はページをダウンロードされる際のデータ量を大きく占めており、表示しているサイズより大きい画像であると、ページの読み込み速度は遅くなってしまいます。画像を最適化することでデータ量を大幅に減らし、パフォーマンスを改善することができます。
リンク先ページでリダイレクトを使用しない
リダイレクトが複数あると、ページの表示速度が遅くなってしまいます。サイトのパフォーマンスを改善するために、できる限りリダイレクトの使用を減らす必要があります。リダイレクトに関して詳しくは下記記事をご覧ください。
リソース(HTML、CSS、JavaScript)を圧縮する
HTML、CSS、JavaScriptといったリソースのサイズを圧縮することによってサイトの最適化を行います。ツールを活用して不要なデータや重複データ(コードのコメントや書式等)の削除、使用されていないコードの削除、短い変数名や関数名の使用というような処理を行い、読み込み速度を早くできるようにしましょう。
ブラウザのキャッシュを活用する
サーバーからブラウザのキャッシュ期間が指定されていることを確認します。キャッシュ期間を指定することで、ページの処理時間が短縮することができます。キャッシュの有効期限は少なくとも1週間、静的アセットや更新頻度の低いアセットについては最大で一年間とするように推奨されています。
サーバーの応答時間を改善する
これはHTMLをサーバーから読み込むのにかかった時間のことをいいます。サーバーの応答時間の改善は、ページの読み込み速度が200ミリ秒以上である場合に提案されます。サーバーの読み込み速度が遅い原因を知る為には、測定を行ってデータを参照することで、遅いデータベースクエリ、フレームワーク、ライブラリ、リソースによるCPUの消費、メモリ不足等の改善を確認しましょう。
レンダリングを妨げるJavaScriptを削除する
HTMLページのスクロールせずに見える範囲に、レンダリングを妨げる外部JavaScrptファイルへの参照が含まれていることが確認された際に提案されます。レンダリングを妨げるJavaScript、実行前に取得する必要のある外部スクリプトを使用しないことで最小限に抑え、JavaScriptをインライン化して余分なネットワークリクエストを避けられます。
PageSpeed InsightsとLighthouseの違い
リニューアル後のPageSpeed InsightsはLighthouseを基に測定を行っているため、結果は同じと考えられます。しかし、実際はPageSpeed InsightsとLighthouseで得た測定結果に違いが出ています。
その理由は、
- PageSpeed Insightsインターネット経由で測定が行われている
- Lighthouseは使っているChromeから測定が行われている
これらの違いにより、測定結果に相違が生まれています。上記のような相違があるものの、どちらが正しいのかという点は明確化されていません。個人としてはより正しくページの表示速度を分析したいと考えているなら複数の測定ツールで比較することをおすすめします。
ページの表示速度を測定できる他ツール
Test my Site
Test my SiteはGoogleが提供しているページの表示速度を測るツールで、モバイルでのサイトの速度を測定することが可能です。
詳細は下記ページにて掲載しています。
まとめ:PageSpeed Insightsを活用しよう！
ページ表示速度の改善は、Googleが以前から推奨している改善策になります。PageSpeed Insightsがリニューアルしたことで、より詳しく改善できるポイントが分かるようになっているので、ユーザーにより良い環境で利用してもらうためにも積極的に改善していくといいでしょう。
SEOについてより詳しく知りたい方はこちらの関連記事もあわせてご覧ください。
SEOサービスのご案内
専属のコンサルタントが貴社Webサイトの課題発見から解決策の立案を行い、検索エンジンからの自然検索流入数向上のお手伝いをいたします。
フォームに必要事項をご記入いただくと、
無料で資料ダウンロードが可能です。
資料請求
ありがとうございました。
京都大学卒。2020年に株式会社PLAN-Bに入社。SEOコンサルティングやネット広告運用などのWebマーケティング支援に5年ほど従事。現在はSEOツール「SEARCH WRITE」やCVR改善ツール「SEARCH WRITE LEAD」などのプロダクトマーケティングを担当。オウンドメディア「PINTO!」の責任者として、自社ツール活用やSEOの深い知見を活かし、獲得リード数を3倍以上に伸ばした実績を持つ。
2023年｜国内の検索エンジンシェア率ランキングTOP10！ Google以外に注目すべきは？
SEO対策
2023.10.20
GA4でページビュー（PV数）を確認する方法！調べ方の手順と見方をスクショ付きで解説！
SEO対策
2022.12.23
404 not found(404エラー)とは？｜５分でわかる原因と解決方法・効果的な404エラーページの作り方とは？
SEO対策
2023.01.23
【初心者向け】図解あり！GoogleのLooker Studio（旧データポータル）使い方を解説!
SEO対策
2023.02.06
meta refreshって何？リダイレクトとの関係も解説！
SEO対策
2023.01.23
突然403 Forbidden エラーが発生！原因と対処法をいち早くチェック
SEO対策
2023.01.23
SEO対策とは？SEOで上位表示する効果的な施策と事例
SEO対策
2023.10.06