PageSpeed Insights とは？～概要や使用するメリットを解説～

2023年3月7日 カテゴリ - サイトスピード

Web 担当者の方で、実際に自社サイトのページを開こうとしたときに読み込みの時間が長いと感じたことはないでしょうか。

具体的にサイトの読み込みにどれくらい時間がかかっているか、あるいは時間がかかる原因は何か、などの疑問を解消できるツールがあります。

この記事では、ページの表示速度の計測と改善項目が分かる PageSpeed Insights について解説します。

PageSpeed Insights とは

PageSpeed Insights とは、Google が提供している Web サイトのページの表示速度を無料で測定できるツールです。
PageSpeed Insights を使うことで表示速度を含むページのパフォーマンスを100点満点で評価でき、さらにページの改善点も分かります。

PageSpeed Insights を使う目的

先述したとおり、ページの表示速度を確認したり、ページの改善点を把握するために PageSpeed Insights を利用します。

ページの表示速度が重要な理由

ページの表示速度は非常に重要です。
それは、直帰率やコンバージョン率、検索順位といった Web マーケティングにおいて重要な指標に影響するためです。

Google は2017年にページの表示速度が遅い場合の損失について、以下のような調査結果を公表しています。

ページの表示速度が
・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
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

直帰率が増加すると、コンバージョン率の低下につながります。

また、Google の検索エンジンは、評価アルゴリズムにページの表示速度を取り入れています。
そのため、ページの表示速度が遅いと検索順位低下の要因になります。

以上の理由から、ページの表示速度が重要です。

PageSpeed Insights で分かること

PageSpeed Insights では以下の2つが分かります。

ページの表示速度のスコア

PageSpeed Insights を使うことでページの表示速度のスコアを確認することができます。
ページの表示速度のスコアは0〜100点で表示されます。
Google はこの評価に対して、90〜100点を目標とするよう述べています。
ページの表示速度のスコアの内訳や指標の詳細については、後ほど解説します。

ページの表示速度を改善できる課題点

ページの表示速度の改善すべき課題については、「パフォーマンスの問題を診断する」の「改善できる項目」と「診断」から確認することができます。

■ 改善できる項目

この項目は PageSpeed Insights が提案するページの表示速度を向上させるための改善点を示しています。

最も優先すべき改善項目は赤色で、次に優先すべき改善項目はオレンジ色で表示されます。

■ 診断

この項目は、ページがウェブ開発の推奨設定に沿っているかの診断結果を表示しています。

改善できる項目と同様に、改善点が示されており、色分けによって優先順位がつけやすくなっています。

PageSpeed Insights の使い方

このセクションでは、PageSpeed Insights の使い方や評価項目、パフォーマンススコアの指標について詳しく解説します。

PageSpeed Insights の使い方

ページの表示速度は、PageSpeed Insights にアクセスし、測定したいページの URL を入力して分析ボタンを押すだけで確認できます。

サイトの表示速度はデスクトップとモバイルのそれぞれのスコアを確認できます。
また、画像の例の通り自社の Web サイトだけでなく、他社や競合の Web サイトの表示速度を確認できます。

PageSpeed Insights の評価項目

PageSpeed Insights の評価項目は、「実際のユーザー環境で評価する」と「パフォーマンスの問題を診断する」の2項目です。

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

この項目は、世界中の実際のユーザーデータに基づいて、6つの指標を用いてサイトのパフォーマンスを評価します。

ウェブに関する主な指標には以下の6つの指標があります。

■ Largest Contentful Paint（LCP）

LCP とは、ページ内の最もファイル容量の大きい画像や動画が表示されるまでの時間のことです。

■ First Input Delay（FID）

FID とは、ユーザーがページ上で初めてアクションを行ったときに、ブラウザが応答するまでにかかる時間のことです。

■ Cumulative Layout Shift（CLS）

CLS とは、ページの読み込みに応じて発生するレイアウトのズレのことです。

■ First Contentful Paint（FCP）

FCP とは、ページの読み込みが開始されてから、ページ内のいずれかの要素が初めて描画されるまでの時間です。

■ Interaction to Next Paint（INP）

INP とは、ユーザーが行ったアクションに対するブラウザの応答時間の内、最も時間がかかったものです。

■ Time to First Byte（TTFB）

TTFB とは、ブラウザがサーバーからデータの最初の1バイトを受け取るまでにかかる時間です。

これらの指標は Web 上でのユーザーエクスペリエンス（UX）の質を評価します。
このような指標をまとめて Web Vitals と言います。
また、Web Vital のうち、LCP 、FID 、CLS の3つは特に重要なことから Core Web Vitals と言います。

ウェブに関する主な指標の評価が不合格の場合は、早急に対応する必要があります。

ウェブに関する主な指標についての詳細は、以下の記事をご覧ください。
【参考】PageSpeed Insights 入門｜見方や評価項目を徹底解説
https://fastest.jp/blog/pagespeed-insights-howto/#shi_jinoyuza_huan_jingde_ping_sisuru

パフォーマンススコアの指標

パフォーマンススコアの指標は、「パフォーマンスの問題を診断する」の分析項目の1つです。
「パフォーマンス」のスコアがページの表示速度のスコアとなります。
パフォーマンススコアの算出方法について、公式ページでは以下のように記載しています。

PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0〜100 の値として算出します。
次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。
・ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
・ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。

PageSpeed Insights について
https://developers.google.com/speed/docs/insights/about?hl=ja

パフォーマンススコアの指標は以下の6つです。

ここでは、「 Speed Index 」「 Time to Interactive 」「 Total Blocking Time 」の3つについて解説します。

■ Speed Index（SI）

SI とは、ページが表示されるまでの時間のことです。

■ Time to Interactive（TTI）

TTI とは、ページが表示されてユーザーが操作できるようになるまでの時間のことです。

■ Total Blocking Time（TBT）

TBT とは、ユーザーのアクションに対してページがブロックされている合計時間のことです。

画像の指標を見ると、LCP と TTI がオレンジ色になっていることが分かります。
これは指標のスコアが低く、改善の余地があることを示しています。
スコアの目安や合格点については次のセクションで解説します。

なお、Lighthouse 10 のアップデートにより TTI の指標は廃止されます。
詳細は以下の記事をご確認ください。
【参考】【Lighthouse 10】Google の Lighthouse がアップデート！スコアの評価項目「TTI」廃止やベストプラクティスの項目変更など
https://fastest.jp/blog/lighthouse-10-update/

PageSpeed Insights の合格点とスコアの目安

パフォーマンスのスコアは「0〜49点」、「50〜89点」、「90〜100点」の3つに分類され、それぞれ「Low」、「Medium」、「Good」となります。

PageSpeed Insights の公式ページでは、サイトは90点以上のスコアを持つように努める必要があるとする一方で、100点のスコアは期待されていないと書かれています。

優れたユーザー エクスペリエンスを提供するには、サイトは高いスコア (90〜100) を持つように努める必要があります。100という「完璧な」スコアを達成するのは非常に難しく、期待されていません。たとえば、スコアを99から100にするには、90から94にするのとほぼ同じ量のメトリックの改善が必要です。

Lighthouse performance scoring
https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/

90点が合格点とされていますが、スコアはあくまで参考値として考え、ページの表示速度改善のための施策を明確にすることが重要です。

また、パフォーマンスのスコアはデスクトップと比べてモバイルは低くなります。
これには、PageSpeed Insights のスコアは海外から計測されるため、4G通信を前提としているモバイルのスコアは低くなりやすいという理由があります。

同じようにデスクトップのスコアも海外から計測されるため、90点以上のスコアにすることは難しいかもしれません。
そのため、デスクトップのスコアは80、モバイルのスコアは50を最初の目安に設定することを推奨します。

PageSpeed insights が提案する表示速度改善施策の例

最後に、PageSpeed Insights が提案する表示速度改善施策の例について解説します。

改善施策はパフォーマンスの中の「改善できる項目」から確認できます。

適切なサイズの画像

この項目がある場合、画像を圧縮したりサイズを変更することで画像のファイルの軽量化が必要です。
画像ファイルはページのソースコードと比べてファイル容量が大きい傾向にあります。
そのため、画像ファイルの軽量化はページの表示速度の改善に大きく貢献します。

画像軽量化について詳しく知りたい方は以下の記事をご覧ください。
【参考】サイトの表示速度の改善に影響を与える画像軽量化
https://fastest.jp/blog/image-compression/

オフスクリーン画像の遅延読み込み

Webサイトが表示される場合、通常はすべての画像をダウンロードしてから表示されます。

しかし、画像ファイルはファイル容量が大きく、すべての画像を一度に読み込もうとするとページの表示速度が遅くなってしまいます。

そこで画面外にある画像の読み込みを遅延させることで一度に読み込む画像の量を減らし、ページの表示速度を改善できます。

使用していないソースコードの削減

不要なコメントや使用していないコードなどがある場合、ファイルの読み込みに時間がかかってしまいます。
ソースコードを最適にすることでファイルの読み込み時間を短縮し、ページの表示速度を改善できます。

まとめ

本記事では、ページの表示速度の計測と改善項目が分かる PageSpeed Insights について解説しました。

ページの表示速度の改善は、SEO とコンバージョン率改善の観点から重要な施策です。

PageSpeed Insights を利用することでページの表示速度のスコアや改善点を確認することができます。
スコアはもちろん高い方が良いですが、あくまで参考値として考え、ページの表示速度を改善するための施策を明確にすることが重要です。
どこから改善すべきか分からない方は、改善できる項目の赤色で示されているものから始めることをご検討ください。

PageSpeed Insights を活用してページの表示速度を改善し、コンバージョン率の改善につなげましょう。

なお、当社ではページの表示速度の改善を1クリックで行えるランディングページ高速化ツール FasTest（ファーステスト） を開発・販売しています。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。