PageSpeed Insights(ページスピードインサイト)の活用!サイト速度を改善するには

「PageSpeed Insightsとは、一体どういったものか」「なぜ?サイト表示速度は重要なのか」このような悩みをお持ちの方は多いようです。
本記事では、Webサイトの表示速度を分析できるツールPageSpeed Insightsについて解説します。
この記事を読めば、PageSpeed Insightsの使い方や分析できる指標、改善する方法もわかるようになります。
ユーザー体験を向上させるとともに、SEO対策による検索順位の上位表示化もしたい方は、サイト表示速度の改善に役立つPageSpeed Insightsを活用してみましょう。
PageSpeed Insights(ページスピードインサイト)とは?
PageSpeed Insights(Pageスピードインサイト)とは、Googleが無料で提供している「Webサイトの表示速度を分析できるツールのこと」です。
サイトを開いて、一番初めに表示される画面の「ウェブページのURLを入力」の欄に、分析したいサイトのURLを入力しさえすれば、読み込み速度が表示され、改善すべきポイントもわかるようになります。
サイトのパフォーマンスが0~100までのスコアで測定されるため、自分のサイトの表示速度がどの程度のレベルかを数値で知ることができるのは画期的です。
スコアが90~100の表示速度が速いサイトは緑色(Good)で表示され、50~89の表示速度が平均的なサイトはオレンジ色(Medium)で表示されます。0~49の表示速度が遅いサイトは、赤色(Low)で表示されます。
スコアが50点未満だと、応答されるまでに4~7秒もかかってしまうため、ユーザーの使いやすさのためにも表示速度を改善する必要があります。
そんなPageSpeed Insightsは、サイト全体だけでなく、ページごとに分析することもできるうえに、個人・法人どちらでも利用できます。
自社サイトはもちろんのこと、他社サイトも分析できるので、競合の調査にも役立つのです。
また、PCだけでなくモバイルにも対応していますが、モバイルの点数は低くなりやすいので注意が必要です。
Googleは、モバイル対応しているサイトほど高く評価するため、モバイルの点数が低い人はモバイルフレンドリーなサイトを目指して表示速度を改善しましょう。
サイト表示速度の重要性
サイト表示速度が重要だと言われているのは、次の2つの要素が関係しています。
・ユーザー体験を向上させる
・SEOにも影響する
以下では、詳しく解説します。
ユーザー体験を向上させる
サイト表示速度が速いと、ユーザー体験(UX)を向上させられます。
ユーザーは、表示速度が遅いと離脱してしまうだけでなく、コンバージョンの減少にもつながってしまいます。
実際に、ユーザーの約半数は表示に3秒以上かかるサイトを離脱してしまうと言われているほどです。
このように、サイトの表示速度が速いことは、ユーザーによる離脱を防ぐために欠かせません。
とはいえ、スコアはあくまでも指標なので絶対に高い点数を取らなければならないわけではありません。
たしかにスコアは高い方が良いですが、必ずしも100点でなければならないわけではないのです。
訪問してくれたユーザーにページが使いやすいと感じてもらえるように、サイト表示速度を速くしましょう。
SEOにも影響する
サイト表示速度はSEOにも影響します。
なぜなら、サイトの表示速度が速いと、ユーザーの離脱率や直帰率が自然と低くなるとともに、GoogleもそういったWebページを高く評価するからです。
実際、2018年にGoogleのジョンミューラー氏は「クローラーは、表示に1秒以上かかるページはクローリングに制限がかかる」と言っています。
2021年5月には、Core Web Vitalsと呼ばれるページ表示速度を表す指標がSEOを評価する際の項目の1つとして追加されました。
表示速度が遅いページはインデックスされにくいため、スコアが50点未満の場合や応答に3秒以上かかる場合は、表示速度を速くする対策を講じる必要があります。
このように、サイト表示速度はクローラーが検索順位を決定する際の判断材料の1つとなっているのです。
検索結果における順位を上位に表示させたい方は、サイト表示速度を改善しましょう。
SEO対策をしていたのに突然順位が下がってしまった・・・原因は?
PageSpeed Insights(ページスピードインサイト)の使い方
PageSpeed Insightsを使うには、まず「ウェブページのURLを入力」の欄に分析したいサイトのURLを入力しましょう。
URLを打ち込んで、「分析」ボタンをクリックすると、ページの分析結果が確認されます。
分析できる6つの項目
PageSpeed Insightsで分析できる項目は次の6つです。
デバイス項目
携帯電話とデスクトップのどちらかに切り替えられます。
実際のユーザーの環境で評価する(フィールドデータ)
速度や安全性を指標ごとに評価しています。
パフォーマンス問題を診断する(ラボデータ)
速度や安全性を指標ごとに評価しています。
改善できる項目
改善すべきポイントと短縮できる時間が提示されています。
診断
Web開発で奨められている設定に沿っているかどうかが表示されます。
合格した監査
改善の必要がないと診断された項目が一覧で表示されます。
このように、分析できる項目がいくつかあるPageSpeed Insightsですが、実は2021年11月にリニューアルしています。
リニューアルされる前まで、「実際のユーザーの環境で評価する」はフィールドデータ、「パフォーマンス問題を診断する」はラボデータという名前でした。
また、リニューアルされたことで、従来よりもユーザーにとって使いやすく、わかりやすいデザイン・設計になりました。
PageSpeed Insightsで分析できる指標
PageSpeed Insightsで分析できる指標は次の通りです。
・FCP
・LCP
・FID
・CLS
・TTI
・TBT
・Speed Index
以下では、詳しく解説します。
FCP
FCP(First Contentful Paint)とは、最初のコンテンツが表示されるまでにかかる時間を指します。
評価の仕方は以下の通りです。
0~1.8秒かかるページ…良い
1.8秒~3.0秒かかるページ…要改善
3.0秒以上かかるページ…不十分
LCP
LCP(Large Contentful Paint)とは、メインコンテンツの読み込み時間のことです。
ユーザーがWebページを閲覧し始めてからサイトの中で、一番大きなコンテンツが表示されるまでにかかる時間を指します。
ここで言うメインのコンテンツとは、記事における見出しや画像、動画のことであり、どんなコンテンツであっても性質は問わないFCPとは異なるため注意しましょう。
評価の仕方は以下の通りです。
0~2.5秒かかるページ…良い
2.5秒~4.0秒かかるページ…要改善
4.0秒以上かかるページ…不十分
FID
FID(First Input Delay)とは、Webページの応答性のことです。
FIDでは、キーボード操作などに対して応答までにかかる時間がミリ秒で表示されます。
評価の仕方は以下の通りです。
0~100ミリ秒かかるページ…良い
100~300ミリ秒かかるページ…要改善
300ミリ秒以上かかるページ…不十分
なお、1秒は1000ミリ秒なので、100ミリ秒は0.1秒です。
CLS
CLS(Cumulative Layput Shift)とは、視覚的な安定性のことです。
秒数ではなく、0~1までの数値で表されます。
評価の仕方は以下の通りです。
0~0.1…良い
0.1~0.25…要改善
0.25以上…不十分
数値が0に近いほど視覚的に安定していて、1に近いほど見づらいということになります。
TTI
TTI(Time to Interractive)とは、Webページのインタラクティブ性のことです。
ここで言うインタラクティブとは、ユーザーが操作できるようになった状態を指していて、TTIは実際に操作できるようになるまでにかかった時間を表しています。
評価の仕方は以下の通りです。
0~3.8秒かかるページ…速い
3.9秒~7.3秒かかるページ…平均
7.3秒以上かかるページ…遅い
TBT
TBT(Total Blocking Time)とは、合計ブロック時間のことです。
ここで言うブロック時間とは、ユーザーがWebページにアクセスしてから実際に操作できるようになるまでにかかる50ミリを超える処理を指しています。
評価の仕方は以下の通りです。
0~200ミリ秒かかるページ…速い
200~600ミリ秒かかるページ…中程度
600ミリ秒以上かかるページ…遅い
ユーザーの操作を妨げないためにも、無駄なデータ処理は省くようにしましょう。
Speed Index
Speed Indexとは、ページの読み込み時間のことです。
ページのコンテンツが目に見える形で表示されるようになるまでに、評価の仕方は以下の通りです。
0~3.4秒かかるページ…速い
3.4秒~5.8秒かかるページ…平均
5.8秒以上かかるページ…遅い
PageSpeed Insightsを用いた改善方法
PageSpeed Insightsを用いた改善方法はいくつか存在しますが、今回は次の3つをご紹介します。
・画像を圧縮してサイズを下げる
・CSSやJavaScript(コード)を圧縮する
・サーバーを設定し直す
以下では、詳しく解説します。
画像を圧縮してサイズを下げる
サイトの表示速度は、画像を圧縮してサイズを下げることで速められます。
特に、画質の良い写真や大きなサイズの写真ほど容量が重いです。
そのため、画像ファイルを圧縮したい時は、「圧縮率を上げる」か「画像の縦横のサイズを小さくする」ようにしましょう。
このように、画像ファイルの圧縮方法はいくつかありますが、良い画質のまま容量を軽くしたい方には、ロスレス圧縮と呼ばれる圧縮方法をおすすめします。
CSSやJavaScript(コード)を圧縮する
サイトの表示速度は、CSSやJavaScriptを始めとするコードを圧縮すれば速められます。
容量を減らせば、速く読み込まれるようになります。
特に、スペースや改行をなるべく使わないようにすることで、容量を軽くできます。
このように、コードを圧縮することでサイトの表示速度を速くしたい方は、無料ツールの活用もおすすめです。
サーバーを設定し直す
サイトの表示速度は、サーバーを設定し直せば速められます。
サーバーの読み込み速度に問題がある時は、「gzip圧縮」か「Expiresヘッダ」を活用しましょう。
HTTPレスポンスを送信する際に、gzip圧縮すれば転送の容量を縮小できます。
また、アクセスしたサイトのデータを一時的にブラウザに保存する際に、Expiresヘッダを使えばネットワーク通信を減らせるのでおすすめです。
このように、サーバーの設定を変えれば、サイトの表示速度を速くできます。
ユーザーがサイトに訪問した際の読み込み時間を短縮させたい方は、ブラウザのキャッシュを活用しましょう。
ただし、キャッシュを保存できる期間を長くするとコードの修正が反映されづらくなる場合があるため注意しなければなりません。
また、自分で改善するのが難しい場合は、サーバー関連の知識があるエンジニアの力を借りるのも1つの手です。
おわりに
今回は、PageSpeed Insightsについて解説しましたが、いかがでしたでしょうか。
PageSpeed Insightsとは、Googleが無料で提供している「Webサイトの表示速度を分析できるツールのこと」です。
サイト表示速度が重要だと言われているのは、「ユーザー体験を向上させる」「SEOにも影響する」という2つの要素が関係しています。
PageSpeed Insightsを使うには、まず分析したいサイトのURLを入力しましょう。
URLを打ち込んで、「分析」ボタンをクリックすると、ページの分析結果が確認できます。
分析できる項目は、「デバイス項目」「実際のユーザーの環境で評価する」「パフォーマンス問題を診断する」「改善できる項目」「診断」「合格した監査」の6つです。
また、FCP、LCP、FID、CLS、TTI、TBT、Speed Indexといった指標は、PageSpeed Insightsを使ってWebページを分析する際によく出てくるので各用語の意味は覚えておきましょう。
そんな、PageSpeed Insightsは「画像を圧縮してサイズを下げる」「CSSやJavaScript(コード)を圧縮する」「サーバーを設定し直す」ことで改善できます。
サイト表示速度を改善してユーザー体験を向上させるとともに、SEO対策もしたい方は、PageSpeed Insightsを活用してみてはいかがでしょうか。
【株式会社セレクト・ワン】
東京本社:03-5953-7160
長野営業所:026-474-5333

株式会社セレクト・ワンの社員によってオススメ情報を執筆している【編集チーム】です。”初心者の方にもわかりやすく”をモットーに、記事を読んだら直ぐに実践できるWEBマーケティング関連の情報を紹介しています。
また、弊社の実績や導入事例から見る・コンテンツマーケティング・SEO対策・WEB制作など、様々な最新情報やノウハウも発信していきます。