電話受付中 平日10:00~19:00 03-5919-0055

日本最大級のホームページ制作会社検索サイト

お急ぎの方はお電話で !( 平日10:00〜19:00 )

03-5919-0055

無料でWeb発注相談 ! 24時間受付中 !

メールで相談する

ページスピードインサイト(PageSpeed Insights)とは?無料SEO必須ツールの画像付き使い方

素山 えりか

Written by

素山 えりか

ページスピードインサイト(PageSpeed Insights)とは?無料SEO必須ツールの画像付き使い方

Webページの表示速度が遅く、ページの読み込みに時間がかかってしまうと、誰もが苛立ちを感じてしまいます。また、ページ表示速度が遅いと、SEOの評価が下がる可能性があるため注意が必要です。

速度表示を測定するためにGoogleによって用意されているのが、ページスピードインサイトです。登録なしで誰でも無料で利用できるため、速度を分析し、改善点を洗い出すのに最適です。そこで今回は、ページスピードインサイトの見方や使い方についてくわしくご紹介します。

SEO対策やユーザー目線のWebサイト作りを行いたいという方は、ぜひ参考にしてください。

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

ページスピードインサイトとはGoogleが提供しているWebページの表示速度を測定するツールです。以下2つの特徴をくわしく解説します。

  • Core Web Vitalsを測定できる
  • 無料で誰でも利用できる

Core Web Vitalsを測定できる

Core Web Vitalsは、ユーザーがサイトを通じて得る経験の質を計測するために定められた指標で、以下の3つの要素から構成されています。

LCP(Largest Contentful Paint) ページ内で最も大きなコンテンツが表示されるまでにかかった時間
FID(First Input Delay) ユーザーが最初のアクション(クリックなど)を行ってから反応が起きるまでの時間
CLS(Cumulative Layout Shift) ユーザーの意図に反するレイアウトのズレ(視覚の安定性)

Googleは、優れたコンテンツであることが1番の評価基準であることを前提とした上で、同じレベルの品質ページが複数ある場合には、Core Web Vitalsの評価が高いページが優先されることを明言しています。

参照:より快適なウェブの実現に向けたページ エクスペリエンスの評価 | Google 検索セントラル ブログ

無料で誰でも利用できる

Webページの読み込み速度を測定するツールは数多くあるものの、高精度なものは有料であることが多いです。しかし、ページスピードインサイトは、無料で利用できます。また、利用にあたってGoogleアカウントの開設や会員登録なども必要ありません。

ページスピードインサイトの点数について

全ての測定結果は点数で表されます。ここでは、点数の見方と合格点について解説します。

点数(スコア)の見方

点数表示には、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」という2つの種類があります。

上部にある「携帯電話」と「デスクトップ」というボタンを押すことで、それぞれの項目をチェックできます。

「実際のユーザーの環境で評価する」を選択した場合

ページスピードインサイトの「実際のユーザーの環境で評価する」というページ

「実際のユーザーの環境で評価する」を選択した場合、GoogleChromeを実際に利用しているユーザーのデータを利用した評価が行われます。

表示されるスコアの内容は以下の通りです。

スコア スコアが表すもの 合格基準
Largest Contentful Paint(LCP) 一番重い画像や大きなテキストが表示されるまでにかかった時間
  • 0~2.5秒:良い
  • 2.5~4.0秒:要改善
  • 4.0秒以上:不十分
First Input Delay(FID) ユーザーが最初のアクション(クリックなど)を行ってから反応が起きるまでの時間
  • 100ミリ秒未満:良い
  • 100~300ミリ秒:要改善
  • 300ミリ秒以上:不十分
Cumulative Layout Shift(CLS) ユーザーの意図に反するレイアウトのズレ(視覚の安定性)
  • 0~0.1:良い
  • 0.1~0.25:要改善
  • 0.25以上:不十分
First Contentful Paint(FCP) 画面上に最初のコンテンツが表示されるまでの時間
  • 0~1.8秒:良い
  • 1.8~3.0秒:要改善
  • 3.0秒以上:不十分
Interaction to Next Paint(INP) ユーザーのアクション(クリックなど)全体に対する反応が起きるまでの時間
  • 200ミリ秒未満:良い
  • 200~500ミリ秒:要改善
  • 500ミリ秒以上:不十分
Time to First Byte(TTFB) ブラウザが最初の1バイトを受け取るまでにかかる時間
  • 0.8秒以下:良い
  • 0.8ms秒~1.8秒:要改善
  • 1.8秒以上:不十分

「パフォーマンスの問題を診断する」を選択した場合

「パフォーマンスの問題を診断する」というページスピードインサイトのページ

「パフォーマンスの問題を診断する」を選択した場合は、ある特定の環境を想定したシミュレーション上での結果が表示されます。ユーザーが利用している環境の影響を受けないため、Webサイト自身が持つ問題点を特定しやすい傾向にあります。

分析される内容は以下の通りです。

First Contentful Paint(FCP) 画面上に最初のコンテンツが表示されるまでの時間
Largest Contentful Paint(LCP) 一番重い画像や大きなテキストが表示されるまでにかかった時間
Total Blocking Time メインスレッドと呼ばれるページの読み込みなどのプログラム処理を行う場所がブロックされている時間の合計
Cumulative Layout Shift ユーザーの意図に反するレイアウトのズレ(視覚の安定性)
Speed Index ページのコンテンツが目に見える形で表示されるまでの時間

スコア(点数)の合格点

それぞれのスコアは、Good・Medium・Lowという3段階で表されます。Goodは緑色、Mediumは黄色、Lowは赤色で表示されます。評価基準は以下の通りです。

判定 スコア 最適化に関する評価について
Good 80以上 最適化の余地がほとんどない状態
Medium 60~79 ある程度最適化の余地がある状態
Low 0~59 最適化すべき点がかなり多くある状態

ページスピードインサイトの使い方

PageSpeed Insightsのトップページ

ページスピードインサイトの使い方は非常にシンプルで、アカウント登録などは必要ありません。手順は以下の通りです。

  1. ページスピードインサイトのページにアクセスする
  2. WebページのURLを入力し、「分析」ボタンをクリック

ページスピードインサイトのスコアの改善方法

計測したスコアに、黄色で表示されたMediumや、赤で表示されたLowの数字が多かった場合には、スコア改善のために対策を行う必要があります。ページスピードの改善方法として、以下の3つの方法を解説します。

  • 画像を最適化する
  • ブラウザのキャッシュを有効にする
  • CSS、HTML、JavaScriptを縮小する

画像を最適化する

画像はテキストに比べて容量が大きいため、ページを読み込む際に負担になることも多いです。そのため、画像を最適化してファイル容量を減らせば、ページの読み込みにかかる時間を大幅に短縮できます。最適化のためのポイントは以下の通りです。

  • 画像の圧縮
  • 画像のリサイズ
  • 適切なフォーマットの選択

画像の圧縮は、品質を保ったままファイルのサイズを小さくすることを指します。一方で、リサイズとは画像の大きさを表示するデバイスに合わせて変更することです。また、フォーマットによって画像の質やサイズが大きく異なるため、用途に合わせて適切なファイル形式を選ぶことも大切です。

画像最適化に特化したツールやオンラインサービスなども数多く用意されているため、それらをうまく活用しながら最適化に取り組んでください。

また、Googleはフォーマットごとに以下の最適化を推奨しています。

  • アニメーションや容量が極小の画像である場合を除いて、GIFはPNGに変換する
  • GIF・PNGのどちらの場合も、ピクセルが不透明である場合にはアルファチャンネルを削除する
  • JPEGの場合には、画質を85以下にする、画像が白黒の場合にグレースケーツの色空間を使用する

参考:画像を最適化する | PageSpeed Insights | Google for Developers

ブラウザのキャッシュを有効にする

ブラウザのキャッシュを有効にすることで、サイトスピードに関わるスコア改善につながる可能性があります。キャッシュを有効にすれば、Webページのデータが一時的にブラウザに保存されるため2回目以降のアクセスで表示時間の短縮につながるでしょう。

Googleは、キャッシュを残す期間として、少なくとも1週間を推奨しています。

参考:ブラウザのキャッシュを活用する | PageSpeed Insights | Google for Developers

CSS、HTML、JavaScriptを縮小する

ソースコードの不要な部分を削除することもサイトスピードの改善につながる可能性があります。不要な改行や余白、コメントアウトなどを全て削除し、コードを縮小化させましょう。

不要なコードがわからない方は、自動でコードを短縮してくれるオンラインツールを利用するのがおすすめです。また、WordPressを利用してWeb制作を行っている場合には、コード短縮に特化したプラグインを取り入れるのも効果的です。

ページスピードインサイトを利用する上での注意点

ページスピードインサイトを利用する上で、以下の2点に注意が必要です。

  • 正しい数値を把握するために複数回にわたって計測する
  • モバイルスコアとパソコンのスコアの違い

正しい数値を把握するために複数回にわたって計測する

正しい数値を把握するためには、複数回にわたって計測を行うのがおすすめです。なぜなら、ネットワーク状況やハードウェアの利用状況、クライアントリソースの競合状態などの変動によって、結果のスコアが変動してしまうことがあるからです。できるだけ正確なスコアを把握するためには、複数回にわたって計測を行い、数値の平均値を目安にしてください。

参考:PageSpeed Insights API について | Google for Developers

ページスピードが重要な理由

Webサイトのページスピードの改善が重要な理由として、大きく分けて以下の2つがあげられます。

  • Google公式がSEOに関係することを公言している
  • ユーザビリティに関わる

それぞれくわしく解説します。

Google公式がSEOに関係することを公言している

Googleは、Core Web Vitalsが検索順位に影響を与えることを明らかにしています。コンテンツの内容が重要なのはもちろんですが、少しでも上位表示の可能性を上げるために、読み込み速度の改善に努めましょう。

参考:より快適なウェブの実現に向けたページ エクスペリエンスの評価 | Google 検索セントラル ブログ

ユーザビリティに関わる

ページスピードは、ユーザーエクスペリエンスに大きな影響を与えます。Googleの研究結果では、モバイルサイトの読み込みに3秒以上かかってしまう場合、閲覧をやめてページから離脱してしまうユーザーが急増するというデータも残っています。

また、ブランドや商品のイメージダウンにもつながるため、スムーズに読み込めるサイト制作を意識しましょう。

参考:Find out how you stack up to new industry benchmarks for mobile page speed

その他のサイト速度計測ツール

ここでは、ページスピードインサイトの他にサイトの速度を計測できるツールとして、以下の2つをご紹介します。

  • Lighthouse
  • GTmetrix

Lighthouse

LighthouseはGoogleから提供されているツールです。Google Chromeの拡張機能として用意されており、WebサイトのパフォーマンスやSEO評価を分析できます。

分析できるデータには以下の5つがあげられます。

Performance サイトスピードについて(ページスピードインサイトと同項目)
Accessibility ユーザーや検索エンジンのクローラーに対してサイトの作りが適切に行われているか
Best Practice ブラウザのセキュリティについて
SEO 検索エンジン最適化のアドバイスに従っているかどうか
Progressive Web App(PWA) Googleが推奨しているPWAと呼ばれるモバイルでのUI改善と高速化に向けた仕組みに最適化されているか

Lighthouseでは、ページスピードだけでなくSEOに関する幅広い項目をチェックできます。ただし、ページスピードインサイトはGoogleが用意したサーバーでスピードを分析できるのに対して、Lighthouseはブラウザで動作するため、ユーザーの利用環境にスコアが左右されます。より正確なページスピードを計測したい場合には、ページスピードインサイトを利用するのがおすすめです。

GTmetrix

GTmetrixは、無料でサイトのパフォーマンスを判定できるツールです。使い方は簡単で、トップページにサイトURLを入力したら「Analyze」というボタンをクリックするだけです。計測できるデータは以下があげられます。

  • Googleの評価指標を使った「PageSpeed」のスコア詳細
  • Yahoo!の評価指標を使った「YSlow」のスコア詳細
  • ページの表示にかかった時間
  • ページ読み込みサイズの統計

無料で利用できる便利なサイトですが、英語のみの対応となっているため翻訳機能を利用しながら使うのがおすすめです。

ページスピードインサイトを活用してSEO効果を狙おう

ページスピードインサイトを使えば、ページの表示速度を分析することが可能です。ページの表示速度は、SEOに影響を与えるだけでなく、ユーザーエクスペリエンスにも大きく影響します。。分析ツールを利用しながら改善点を洗い出し、ユーザーにとって使いやすいWebサイトを目指しましょう。

この記事を書いたライター

素山 えりか

素山 えりか

フリーのWEBライター。ブログ記事から旅行情報まで、さまざまなジャンルの記事を執筆。SEO対策だけに目を向けるのではなく、誰かの疑問や悩みに真摯に向き合った記事づくりを目指しています。趣味:オペラとピアノ

このライターの記事一覧

この記事を監修した人

藤澤 尚也

藤澤 尚也

JetB株式会社メディア事業部SV。前職の大手IT企業の同僚から誘いを受け2018年に入社。営業部に2年半、制作部に2年在籍し、マーケティングやサイト制作の実績と経験を積んだ後、幅広い知識を活かすために優良WEBに参画。ベースとラーメン二郎をこよなく愛する。

この監修者の記事一覧

Share

関連記事

Share