PageSpeed Insightsとは？使い方やよくある改善例などを紹介

Googleなどの検索エンジンは、WEBサイトの表示速度を検索順位の要因として評価しています。そのため、表示速度が遅いWEBサイトは検索順位に悪影響を与える可能性があります。

そこで役立つのが、Googleが無料で提供しているツール「PageSpeed Insights」です。

本記事では、PageSpeed Insightsの概要から使い方、実際によくある改善項目や改善例などを紹介します。

PageSpeed Insights（ページスピードインサイト）とは

PageSpeed Insightsは、WEBサイトの表示速度を測定してスコア評価する分析ツールです。

モバイル、デスクトップに対応しており、URLを入力するだけでWEBサイトの表示速度や改善ポイントを確認できます。

なぜサイト表示の速度が重要なのか？

WEBサイトを運営するうえで、サイト表示の速度は非常に重要な要素です。

その理由は大きく3つあります。

それぞれ解説します。

検索順位に影響が出る

1つ目は、検索順位に影響が出ることです。GoogleはWEBサイトの使いやすさを重視しています。

表示速度の速いWEBサイトはユーザーにとって使いやすいコンテンツと評価され、検索順位も上位に表示されやすくなります。

ユーザーの離脱が起きる

2つ目は、ユーザーの離脱が起きることです。Googleの調査によると、モバイルサイトでページの読み込み時間が3秒を超えた場合、53%の訪問が離脱につながるとされています。

表示速度が低下するとユーザーはストレスを感じやすくなるので、離脱率が高い場合は表示速度を見直してみましょう。

売上に影響が出る

3つ目は、売上に影響が出ることです。過去のGoogle調査では、読み込み時間のかかるサイトはコンバージョン率の低下が見られました。

そのため、コンバージョンを重視しているWEBサイトは定期的に表示速度を改善する必要があります。

PageSpeed Insightsで覚えておきたい6つの指標

PageSpeed Insightsを利用するにあたって、覚えておきたい6つの指標を紹介します。

Largest Contentful Paint（LCP）

Largest Contentful Paint（LCP）は、最も大きいコンテンツ（メインコンテンツ）が表示されるまでの時間を示す指標です。

LCPの評価基準は以下のとおりです。

First Input Delay（FID）

First Input Delay（FID）は、WEBサイトで最初の操作（クリックなど）をしてから応答するまでの時間を示す指標です。

FIDの評価基準は以下のとおりです。

Cumulative Layout Shift（CLS）

Cumulative Layout Shift（CLS）は、画像が遅れる、広告が動くなどのユーザーが意図しないレイアウトの「ズレ」を数値化したもので、視覚的な安定性を示す指標です。

CLSの評価基準は以下のとおりです。

First Contentful Paint（FCP）

First Contentful Paint（FCP）は、WEBサイトのURLをクリックして最初のコンテンツが表示されるまでの時間を示す指標です。

FCPの評価基準は以下のとおりです。

Interaction to Next Paint（INP）

Interaction to Next Paint（INP）は、ユーザーの操作に対して視覚的な反応が発生するまでにかかる時間を示す指標です。

INPの評価基準は以下のとおりです。

Time to First Byte（TTFB）

Time to First Byte（TTFB）は、ブラウザが最初の1バイトを受信するまでにかかる時間を示す指標です。

TTFBの評価基準は以下のとおりです。

PageSpeed Insightsの算出方法

PageSpeed InsightsのスコアはGoogleが公式で運営するLighthouseより抽出されます。

PageSpeed Insightsに計測したいWEBサイトのURLを入力すると、WEBサイトの表示速度を0～100のスコアで評価します。

PageSpeed Insightsのスコアは全世界のWEBページ速度を評価しているため、日本のサイトはスコアが低くなりやすい傾向にあります。

また、モバイルサイトのスコアは4G通信を前提にしているため、デスクトップよりもスコアが低くなる可能性があります。

そのため、まずはモバイルサイトで60点台を目指すようにしましょう。

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方について解説します。

はじめに、PageSpeed Insightsにアクセスします。計測対象となるURLを入力したあと、「分析」ボタンをクリックします。

分析ボタンをクリックすると、下記4つの項目が表示されます。

それぞれの詳細を見ていきましょう。

実際のユーザーの環境で評価する（フィールドデータ）

「フィールドデータ」では、WEBサイトを閲覧したChromeユーザーの体験数値を確認できます。

判定スコアにより、緑は「Good」、橙は「Medium」、赤は「Low」に色分けされます。上記では、LCP・INP・TTFBの改善が必要となります。

パフォーマンスの問題を診断する（ラボデータ）

「ラボデータ」では、GoogleのLighthouseから算出された推定スコアを確認できます。

上記のパフォーマンススコアは35で、FCP・CLS以外は改善の必要があります。

診断

「診断」では、表示速度を上げるための改善点や、WEBサイト運営の改善点などを確認できます。

橙は「改善をおこなったほうがよいもの」、赤は「最優先で改善すべきもの」を示しています。短縮できる時間（推定）も表記されているため、優先すべき対応の判断基準にもなります。

項目をクリックすると改善案が提示されるので、対応すべき点が明確になります。

合格した監査

「合格した監査」では、改善不要な項目の一覧を確認できます。

合格した監査にある項目は表示速度が最適化されている箇所なので、現状を維持できるようにしましょう。

PageSpeed Insightsによる主な改善方法

PageSpeed Insightsで提示される改善案は多岐にわたりますが、そのなかでも実際によくある改善方法を5つ紹介します。

それぞれ解説します。

使用していないJavaScript を削減する

1つ目は、使用していないJavaScriptを削減する方法です。改善項目で「使用していないJavaScriptの削減」が表示されていたら以下の対応をしましょう。

WEBサイトを開いた状態で[F12]キー（Macの場合は[?+option+i）)を押して、デベロッパーツールを起動します。

続いて、[Ctrl]+[Shift]+[p]を押して（Macの場合は[Command]+[Shift]+[p]）、「show coverage」で検索します。

下段に表示される、下記画面の赤枠の読み込みボタンをクリックします。そうすると、使用しているJavaScrips/CSSの一覧が表示されます。

ここで赤く表示されている部分は使用していないコードの割合を表しています。

次に、改善項目で表示されているファイル名を探して、ファイル内で使用していないコードを削除します。誤ってファイルごと削除しないように注意しましょう。

コードの知識がないという方は、プラグインを使用すると簡単におこなえるのでおすすめです。

サーバー応答時間を速くする

2つ目は、サーバー応答時間を速くする方法です。サーバー応答時間はWEBサイト全体の表示速度に影響します。

ただし、サーバーのボトルネックはWEBサイトごとで異なるため、サーバーのメモリ不足やCPUの消費状況を確認したうえで改善を図りましょう。

サーバー応答時間の最適化には以下の対応を検討してみてください。

画像を最適化する

3つ目は、画像を最適化する方法です。画像枚数が多かったり、画像容量が大きいと表示速度が低下する可能性があります。

改善項目で「次世代フォーマットでの画像の配信」、「適切なサイズの画像」、「効率的な画像フォーマット」が表示されていたら以下の対応を推奨します。

第三者コードの見直し

4つ目は、第三者コードを見直す方法です。改善項目で「第三者コードの影響を抑えてください」が表示されていたら、GoogleAnalyticsやGoogleタグマネージャーなどのトラッキングコードが使用されていないか見直しましょう。

必要最低限のコード数にすることで表示速度が改善されます。

画像の読み込みを遅らせる

5つ目は、画像の読み込みを遅らせる方法です。一気に画像ページを読み込ませず、ユーザーのスクロールに合わせて画像を読み込ませることで表示速度を改善できます。

改善項目で「オフスクリーン画像の遅延読み込み」が表示されていたら試してみましょう。

まとめ

PageSpeed Insightsの概要や使い方、実際によくある改善項目、改善例などを解説しました。WEBサイトの表示速度は、検索順位や離脱率、売上にも直結する重要な要素です。

まずはPageSpeed Insightsで自社サイトのスコアを確認し、改善が必要な項目があれば優先順位をつけて取り組んでいきましょう。