【2023】Google PageSpeed Insights(ページスピードインサイト)の使い方は?改善方法や重要性

【2023】Google PageSpeed Insights(ページスピードインサイト)の使い方は?改善方法や重要性

PageSpeed Insights(ページスピードインサイト)とは、Webページの読み込み速度をスコア測定(0~100)できるGoogleの無料分析ツールです。

今回は「PageSpeed Insights(ページスピードインサイト)」に焦点を当て、その概要や使い方、特徴、重要性などをご紹介します。気になるポイントを一挙確認してしまいましょう。

「PageSpeed Insights(ページスピードインサイト)」とは?

【公式ページ|PageSpeed Insights

PageSpeed Insights(ページスピードインサイト)は、スマホなどのモバイルとパソコン(デスクトップ)の両方に対応しており、WebページのURLを入力するだけで読み込み速度や改善ポイントがわかります。

PageSpeed Insights(ページスピードインサイト)の合格スコアはどれくらい?

PageSpeed Insights(ページスピードインサイト)で自社サイトを測定すると成績が0~100で表示されます。
では何点を取れば合格ラインといえるのでしょうか。目安は以下のとおりです。

スマホなどのモバイルなら70点以上で合格
パソコン(デスクトップ)なら90点以上で合格

もちろん最高得点の100を獲得したいところですが、上記の合格ラインに達していないWebサイトはまずは、スマホなら70、パソコンなら90を目指しましょう。

ページスピードがもたらすSEOへの影響

GoogleはWebサイトの健全性を示す指標に「Core Web Vitals」を使っています。この指標によると、Webページのコンテンツの読み込みが始まってから2.5秒以内に表示されことが理想的とされています。
2.5秒はSEOにかかわる重要な数字なので、Webサイトの管理担当者は覚えておいてくださいさい。
ページスピードを改善することでSEO効果の向上が期待できます。

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

PageSpeed Insights(ページスピードインサイト)の使い方はとても簡単で、測定したいWebサイトのURLを入力して「分析」をクリックするだけです。

「分析」をクリックすると、スマホなどのモバイルとパソコン(デスクトップ)の両方のページ読み込み速度が表示されます。
チェックしたい項目をクリックし、表示を切り替えます。

「PageSpeed Insights(ページスピードインサイト)」の特徴

ここでは、「PageSpeed Insights(ページスピードインサイト)」の特徴について2点解説します。

無料で利用可能


「PageSpeed Insights(ページスピードインサイト)」は無料で利用できます。
「PageSpeed Insights(ページスピードインサイト)」の公式ページにアクセスすると、「ウェブページのURLを入力」と書かれたフォームが出てきます。そこに分析したいページURLを入力し、「分析」ボタンをクリックするだけで、個人、法人を問わず、無料でWebサイトの読み込み速度を分析できます。
そのため企業であれば、自社のWebページだけでなく、競合他社のWebサイトのページも分析できてしまいます。

【公式ページ|PageSpeed Insights

ページ表示速度をスコアで表示

「PageSpeed Insights(ページスピードインサイト)」では、ページの読み込み速度をスコアと呼ばれる点数で評価します。以下はGoogleが公式に設定するスコアの判断基準です。
【スコア評価】

  • Low 0~49 赤(遅い)
  • Medium 50~89 オレンジ(平均)
  • Good 90~100 緑(速い)

試しに当社ipeの公式サイトのあるページを分析してみました。結果は、パソコン(デスクトップ)のスコアが52点でした。
またスコアの下には、具体的な改善ポイントが数値と共に細かく表示されます。ページの読み込み速度改善に役立てましょう。

「PageSpeed Insights(ページスピードインサイト)」の重要性

なぜWebページの読み込み速度を速くすることが重要なのでしょうか。
その答えは、ページの読み込み速度が遅いと、ユーザーが待ちきれず別サイトに遷移してしまうからです。

ユーザーを待たせては本来の目的を達成できない

Google検索のユーザーは、何かしらの課題を抱えて検索をします。そのとき、早く有益なWebサイトを探して、早く閲覧して、早く必要な知識を得たいと考えます。
そのためWebサイトにはスピードが求められます。
ページの読み込み速度が遅いだけで、Webサイトの直帰率が上がってしまい、Webサイトを運営する本来の目的を達成しづらくなります。
「本来の目的」はWebサイトごと、企業ごとに異なると思いますが、例えば商品やサービスの販売を増やすことや、資料を請求してもらうこと、会員登録を促すことなどがそれに該当するでしょう。
せっかく優れたWebサイトをつくってもページの読み込み速度が遅いだけで「本来の目的」を果たせなくなってしまうのは大きな損失です。

【参照|Does Page Load Time Really Affect Bounce Rate?

直帰率は2秒で9%、5秒で38%

Pingdom社によると、2秒以内に表示されるWebページの直帰率は約9%なのに対し、5秒かかるWebページでは38%まで跳ね上がります。「遅いとユーザーが逃げてしまう」現象が事実であることはこの数字が証明しています。
読み込み速度を分析できる「PageSpeed Insights(ページスピードインサイト)」がいかに重要な測定ツールであるかご理解いただけると思います。

「PageSpeed Insights(ページスピードインサイト)」の見方


「PageSpeed Insights(ページスピードインサイト)」でわかることや、その見方について解説します。
「PageSpeed Insights(ページスピードインサイト)」で診断できる項目は次の5つです。

  • フィールドデータ:Chrome User Experience Report(CrUX)が確認できる
  • ラボデータ:Lighthouseを使用した分析結果を確認できる
  • 改善できる項目:ページの読み込み速度に関する改善案が確認できる
  • 診断:アプリケーションのパフォーマンスに関する改善点を表示してくれる
  • 合格した監査:改善の必要がない項目を確認できる

1つずつみていきましょう。

フィールドデータ


フィールドデータとは、ユーザーが実際にWebサイトにアクセスする環境で得た数値のことです。
Googleがページの読み込み速度を判断するデータにChrome User Experience Report(CrUX)があります。CrUXを使うとWebサイトのUXやパフォーマンスを確認できます。
「PageSpeed Insights(ページスピードインサイト)」では、URLベースでページの遷移時間を計測できます。

ラボデータ


ラボデータとはいわばシミュレーション上の数値です。
ラボデータはLighthouseというツールを使った分析結果で確認できます。
Googleでは、Lighthouseを使ってページの読み込み速度の分析を行い、下記の評価項目や色でスコア評価をします。

  • 赤三角=遅い
  • オレンジ四角=平均
  • 緑丸=速い

Lighthouseとは、Webページの品質を測定するためのオープンソースの自動化ツールのことで、パブリックまたは認証が必要なWebページに対して実行できます。
Lighthouseは、Webページのパフォーマンス、アクセシビリティ、検索エンジン最適化を監査します。

評価項目 詳細
First Contentful Paint テキストや画像が初めてペイントされるまでにかかった時間
Speed Index ページのコンテンツが表示される速さ
Largest Contentful Paint 最も大きなテキストまたは画像が描画されるまでにかかった時間
Time to Interactive ページが完全に操作可能になるのに要する時間
Total Blocking Time タスクの処理時間が50ミリ秒を上回った場合のコンテンツの初回描画から操作可能になるまでの合計時間(ミリ秒)
Cumulative Layout Shift ビューポート内の視覚要素がどのくらい移動しているかを測定する指標

改善できる項目

「PageSpeed Insights(ページスピードインサイト)」ではページの読み込み速度の改善案が表示されます。
短縮できる推定時間も表記されるため、ページの読み込み速度を改善する際の判断材料に有効です。

  • 赤い三角=最優先に改善した方が良い
  • オレンジの四角=改善した方が良い

診断

「PageSpeed Insights(ページスピードインサイト)」はアプリケーションのパフォーマンスに関する改善点も表示します。
改善後、ミリ秒単位で時短効果が得られます。

  • 赤い三角=最優先に改善した方が良い
  • オレンジの四角=改善した方が良い

合格した監査

「合格した監査」には改善の必要がないと判断された項目が表示されます。
合格した監査が多いほど、ユーザーに早く情報を提供できていると判断できます。

ぺージの読み込み速度を改善する際のポイント

ここまでの説明でページの読み込み速度がいかに重要であるかが理解できたと思います。
では速度を上げるには具体的にどのようなことを実施すればよいのでしょうか。
本稿では次の2つを紹介します。

  • 画像の最適化
  • HTML、CSS、JavaScriptの最小化

ただこの2つ以外にも改善ポイントがあるので、気になる方は以下のWebサイトをご覧ください。

画像の最適化

「PageSpeed Insights(ページスピードインサイト)」で画像サイズに関する警告が出た場合は、画像を最適化していきましょう。
サイズの大きな画像や画質の良い写真はデータ量が大きくなり、速度低下の原因になります。できるだけファイルサイズを圧縮し、軽量化することをおすすめします。
【画像圧縮におすすめの無料ツール】

ツール名 特徴 対応ファイル形式
Squoosh ・Googleが提供する画像圧縮ツール
・画像の圧縮前と圧縮後を常に比較しながら、圧縮率を選択できる
JPEG、PNG、WebP
Compressor.io ・ブラウザ上で画像圧縮ができるツール
・ロスレス圧縮に対応
(データを損なわずに復元できる圧縮方式)
JPEG、PNG、GIF、SVG
ImageOptim for Mac ・Mac専用の画像圧縮ツール
・Macユーザーであれば、誰でも無料でダウンロード可能
・ロスレス圧縮に対応
JPEG、PNG、GIF

HTML、CSS、JavaScriptの最小化

「PageSpeed Insights(ページスピードインサイト)」では、CSS、JavaScriptに関することも提案されます。
WebサイトはHTML、CSS、JavaScriptなどのコードでつくられています。コード量を少なくし、データ容量を減らすことができれば読み込み速度が上がります。
データ量を減らすには、改行やスペースを省くことが有効ですが、あまりやりすぎるとコードの可読性が下がるためWebサイトの修正が難しくなるデメリットがあります。
そのため、CSSやJavaScriptを最小化する場合は、記述したコードファイルを圧縮する方法がおすすめです。

【コード圧縮におすすめの無料ツール】

ツール名 特徴
CSS Minifier ・改行やスペース、コメントなど無駄を省いた状態に圧縮してくれる
・Firefox、Chromeなどでコピー可能
・手軽に圧縮処理できる
CSS & JavaScript Compressor ・Webブラウザで利用する圧縮サービス
・圧縮前のサイズと圧縮後のサイズ、何%圧縮できたかを表示してくれる
・ファイルサイズと圧縮率の目安を知るのに便利

「PageSpeed Insights(ページスピードインサイト)」を活用してWebページの質を上げよう!

「PageSped Insights(ページスピードインサイト)」に焦点を当て、その概要や使い方、特徴、重要性などについて解説しました。
Webページの読み込み速度は、SEOにも影響するだけでなく、直帰率や離脱率の悪化からCV数の減少を招くため、ユーザビリティの観点からも非常に重要です。

「PageSped Insights(ページスピードインサイト)」は、Webページの読み込み速度を測定し、評価する無料ツールです。タグなど特別な設定は不要で、表示速度を調べたいWebサイトのURLを入力するだけで誰でも簡単に利用できます。
ぜひこの機会に、「PageSpeed Insights(ページスピードインサイト)」を活用し、Webページの質を上げてみてはいかがでしょうか。
SEOに関して悩んでいる方は、ぜひ株式会社ipeにご相談ください!
株式会社ipeではSEOでの大手クライアント実績多数!SEOを検討する際にはぜひ一度ご相談ください。

この記事の著者

監修者 土田悠真

早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida

DOWNLOAD
サービス資料ダウンロード(無料)
大手実績多数の弊社サービスの概要や料金、フォロー体制など、この資料にまとめております。
資料ダウンロードはこちら
CONTACT
お問い合わせ
SEOなどサービスについてご相談がある方、人事・採用へのご不明点・ご質問など、気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)
         
        東京都港区南青山二丁目24番15号 青山タワービル 5F
TEL:03-6455-5871 FAX:03-6455-5872