Webサイトのパフォーマンスはユーザー体験を左右する重要な要素です。
読み込みの遅いWebページは、ユーザーをイライラさせるだけでなく、直帰率の上昇や潜在顧客の離脱など、大きな機会損失につながる可能性があります。

Google PageSpeed Insightsは、Webサイトのパフォーマンスを無料で測ることが出来ます。
この記事では、Google PageSpeed Insightsを深く掘り下げ、その特徴や機能性に加え、サイトパフォーマンスの重要性などについても解説します。

PageSpeed Insightsとは？

Google PageSpeed Insights（以下PageSpeed Insights）は、Webページのパフォーマンスを評価するためにGoogleが提供している無料のツールです。

WebページのURLを入力するだけで、モバイルとデスクトップ両方のパフォーマンススコアをすぐに確認することができます。また、パフォーマンススコアの生成に加え、パフォーマンスを向上させるための実用的なインサイトも確認可能です。

PageSpeed Insightsで各Webページの表示速度を測りながら、インサイトをもとに改善に向けたステップを進めることでサイト全体のパフォーマンス向上を進めることができます。

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

本章ではなぜWebページ表示速度が重要なのか、Webサイトの表示速度が遅い場合にはどういった影響があるのかについて解説します。

ユーザーのサイト離脱につながる可能性

表示速度が遅いWebサイトは、ユーザーの早期離脱を招き、直帰率の上昇やエンゲージメントの機会を逃すことにつながります。

実際、2018年に発表されたGoogleのデータによるとWebページの表示速度が1秒から3秒に増えるだけで直帰率が3割ほど増加すると報告されています。

参照：Find out how you stack up to new industry benchmarks for mobile page speed｜Think with Google

CVRと売上への影響

ページスピードはコンバージョン率（CVR）、ひいては売上に直接影響します。
表示速度が速くサクサクとスムーズに操作出来るサイトの方が流入後のCVに至る可能性も高くなります。

Webページの読み込みに遅れが生じると、LPやエントリーフォームからの離脱に繋がり、機会損失に繋がってしまいます。

実際、過去にEC大手のAmazonが行ったABテストによる結果では「Webページの読み込み時間が100ミリ秒、0.1秒増えると売上が1％減少した」という分析結果があげられています。

参照：｢表示が0.1秒遅れると､売上が1％減少する｣絶対王者アマゾンがやっている”すごすぎるデータ分析”｜PRESIDENT Online

SEOへの悪影響

ユーザーエクスペリエンスだけでなく、ページスピードはSEOにとっても重要な要素です。
GoogleはWebページ速度をランキング要素として考慮し、SEOでのウェブサイトの位置に影響を与えます。

表示速度の遅いサイトは、検索結果でも発見されづらくなり、オーガニックのトラフィックに影響を与える可能性があります。

参照：ページの読み込み速度をモバイル検索のランキング要素に使用します｜Google 検索セントラル

PageSpeed Insightsで診断できること

PageSpeed Insightsでは、Webページの読み込みや表示速度を評価し、一連の評価項目とベストプラクティスに基づいてパフォーマンススコアが割り当てられます。

スコアは0から100の範囲で、スコアが高いほどWebページのパフォーマンスが高いことを示します。

PageSpeed Insightsのスコアの意味

PageSpeed InsightsのスコアはGoogleによる絶対評価では無く、相対評価で決定します。

スコアは表示速度の順位を意味していてGoogleがクロール対象とする世界全体のサイトが100サイトだったとすると、1位相当なら100点、2位相当なら99点といった形でスコアが割り当てられていきます。

この100点満点の中でも、スコアに応じてLow、Medium、Goodに分類されるため、他のサイトと比較してどの程度のパフォーマンスとなっているのか、その良し悪しの目安を測ることができます。

• Good(90点以上)：比較的良好なパフォーマンスで、改善のための余地は少ない状態
• Medium(50〜89点)：平均的なパフォーマンスで、改善の余地もある程度残っている状態
• Low(0〜49点)：比較的パフォーマンスが悪く、改善するべき余地が多い状態

それぞれの指標について

PageSpeed Insightsでは、Webページを評価する際に、以下の7つの要因を考慮します。

どの指標が悪くてもユーザーにとって一言で言えば「遅い・重い」と感じられることは共通しますが、この7つに細分化に細分化されることを認識して活用を進めましょう。

Time to Interactive（TTI）

TTIは、Webページの読み込みが完了し、ユーザーの入力に対して確実に応答できる（インタラクティブな状態）ようになるまでの時間を表します。

TTIが低いほど、UXとしてよりスムーズになっている状態です。

Speed Index

Speed Indexは、コンテンツが表示されるまでの時間を測定します。
スピードインデックスが低いほど、読み込みが速いことを意味します。

First Contentful Paint (FCP)

FCPは、ユーザーがWebサイトのURLをクリックしてから最初のコンテンツが画面に表示されるまでの時間を測定します。
FCPが速いほど、ユーザーからWebページが表示され始めたと知覚されるスピードが向上します。

Largest Contentful Paint（LCP）

LCPは、Webページ上で最大のコンテンツ（メインのコンテンツの読み込み時間）を表します。

FCPはコンテンツの種類を問わず何等か最初に表示されるコンテンツの表示までの時間を表しますが、LCPはファーストビューのメイン画像や動画など、そのWebページの主要と見なされるコンテンツに関して計測されます。

メインコンテンツの読み込みを速くすることで、ユーザーにとっての満足度も向上します。

First Input Delay (FID)

FIDは、Webページがユーザーの操作に反応するまでの時間を表します。

ユーザーが行ったタップ、クリック、テキスト入力などに対する応答時間がミリ秒単位で表示されます。
FIDが小さいほど、Webページの応答性が高く、ユーザーにとってストレスのない状態です。

Cumulative Layout Shift（CLS）

CLSはWebページのコンテンツに関して、ユーザーの意図しないズレがどの程度生じているかを表す指標です。

例えばWebページの上部に遅れて画像が表示されたり、下部にバナー画像が表示されたりしてページレイアウトにズレが生じ、誤タップをしてしまった経験は無いでしょうか？

このようなUXにおけるズレがどの程度生じているかというのを表すのがCLSという指標です。
CLSはズレが生じた表示領域の比率とその移動距離から計算され、0～1の数値で表されます。

Total Blocking Time（TBT）

TBTは、最初のコンテンツコンテンツの初回描画（FCP）から操作可能（TTI）になるまでのWebページがインタラクティブでない時間の合計を表します。

メインスレッド（画像やリンク、テキスト入力などWebページの情報を表示させるための一連のプログラム）がブロックされている時間を表す指標で、PageSpeed Insightsでは50ミリ秒を超えるとブロックされたと判断され、超過した時間の合計がこのTBTとして表示されます。

このブロックされている時間中はユーザーの操作に応答することが出来ないので、この時間が長いと「重いサイト」と感じられてしまいます。

Interaction to Next Paint（INP）

Googleは、2024 年 3 月より FID に代わる Core Web Vitals の新しい応答性の指標として、FIDに代わりINP を採用することを決定しました。

INP は、ユーザーによるページへのアクセスの全期間中に発生するすべてのクリック、タップ、キーボード操作のレイテンシをモニタリングすることで、ユーザー操作に対するページの全体的な応答性を評価する指標です。

最終的な INP 値は、外れ値を無視して観察された最長のインタラクションとなります。

参照：Next Paint へのインタラクションを進める｜Chrome チームのブログ投稿

PageSpeed Insightsの使い方

ここではPageSpeed Insightsの使い方について、手順を追ってご紹介していきます。

1: Google PageSpeed InsightsのWebページにアクセスする

“Google PageSpeed Insights”と検索し、PageSpeed Insightsにアクセスします。

2: 対象WebページのURLを入力する

パフォーマンスを計測したいWebページのURLを入力欄に入力します。

3: “分析 “をクリック

“分析”ボタンをクリックして計測を開始します。

4: スコアの生成

スマートフォンとデスクトップそれぞれのパフォーマンスが計測され、大きく以下の2項目に分けて分析結果を出してくれます。

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

• パフォーマンスの問題を診断する

5: 推奨事項の確認

スコアを改善するためのポイントを把握するためにPageSpeed Insightsで表示される推奨事項についても確認しましょう。

推奨事項は以下の3つに分けて表示されます。

• 改善できる項目
• 診断
• 合格した監査

“改善できる項目”と、”診断”の中で表示されているのが改善のために行うべきと評価された内容、反対に”合格した監査”ではPageSpeed Insightsで合格と判断された項目が表示されます。

前者の2項目ではそれぞれの推奨事項の優先度に応じて、赤（最優先で改善すべき）、オレンジ（改善の余地あり）の2色で各指標とともに表示されます。

ここで今後対応すべき優先度も併せて確認し、着実に改善を進められるようにしましょう。

PageSpeed Insightsのスコアを向上させる10の方法

PageSpeed Insightsのスコアを向上させるには、サイトに対してさまざまなパフォーマンス改善施策を実施する必要があります。ここでは、PageSpeed Insightsのスコアを向上させる10の方法をご紹介します

画像の軽量化

まず初めに改善点として挙げられるのが、画像のサイズの軽量化です。
サイズの大きな画像はWebページの読み込みを大幅に遅くします。

また、特に昨今的にはレスポンシブデザインというPC、スマホなどの全てのデバイスに対応出来る形でのサイト制作が主流となったため、サイト制作者がPCで使用していた画像をスマホでの表示にも使用するケースが多いです。

その場合、スマホでは画像が重すぎて表示速度が遅くなるといったケースが発生してしまう可能性があります。

画像サイズを下げると画質が悪くなるのではと感じる方もいるかもしれませんが、SpeedSizeなどAIを活用して視覚体験を最適化するソリューションも出てきています。

あるいは、TinyPNGやOptimizillaなどの圧縮ツールを利用すれば画質を大きく損なうことなくサイズを圧縮することも可能です。

Webフォントの軽量化

Webフォントの読み込みもWebページのパフォーマンスを悪くする大きな要因になりがちです。
軽量で読み込みが速いウェブフォントを選択しましょう。

Webフォントの読み込みで重くなってしまうのは、全文字を含んだフォントを読み込むことで必要の無い文字まで読み込みが行われてしまうことが要因です。

特に日本語は漢字・ひらがな・カタカナと文字数が多いのでそのまま全て読み込むと容量が跳ね上がります。
そこでの対策として、対象のサイトでよく使用するフォントに絞り込んで読み込むことで、読み込み速度を速くすることが可能です。

「よく使う文字だけに絞り込むこと」を「サブセット化」といいます。
サブセット化を行ったフォントファイルを作成、ディレクトリに設置し、そのファイルを読み込ませることで軽量化に繋がります。

重要度の低いプラグインの削除

例えばSNSでの「いいね！」や「シェア」のボタンをウェブサイトに設置可能な、ソーシャルプラグインをWebページ上に設置している場合など、画面のUI・UXに影響を与えるプラグインはパフォーマンスを悪化させる大きな要因となります。

ECサイトやアフィリエイトサイトなどにおいて、マーケティング的な観点で設置が必要というケースは少なからずあるかと思いますが、サイト全体の中でも削除可能な箇所についてはなるべく削除することでパフォーマンスの改善に繋がります。

画像遅延読み込みの導入

Webページを読み込む際にWebページ上の全画像を一気に読み込むのではなく、ユーザーに表示される範囲内の画像を先に読み込み、それ以外の画像を読み込むタイミングを後にずらすことを「画像遅延読み込み」「遅延ロード」と言います。

通常、ブラウザではimgタグの画像ファイルを一度にすべて読み込む仕組みとなっているため、ユーザーからすれば見ている範囲外まで無駄に読み込みが行われることになり、このことがパフォーマンスを下げてしまう要因となります。

これを避けるために遅延読み込みを行うことで、ユーザーの見ている範囲内の画像のみを読み込むことが可能です。JavaScriptの「Lazy Load」というライブラリを実装することでこの画像遅延読み込みをサイトに適応することが可能です。

「Lazy Load」はGitHubにてソースコードが公開されているのでぜひ導入してみてください。

使用していないJavascript/CSSを削除

ブラウザの仕組みとしてHTMLやCSS、JavaScriptが一回の通信で全て読み込まれる訳ではなく、外部ファイルの数だけ通信が行われます。

そのため画像はもちろん、CSS、JavaScriptの数が多くなれば多くなるほど通信回数も多くなり、Webページのパフォーマンスは悪化します。実装しているJavaScriptやCSSは見直しを行った上で、使用していないものは削除しましょう。

また、JS MinifierやCSS Minifierを使うと、記載されているスクリプトの改行がなくなり、容量を圧縮することが可能です。
使用していないファイルの削除とともに、使用中のものも圧縮を行うことでさらにパフォーマンス改善に繋げることが出来ます。

サーバーの応答時間を短縮する

パフォーマンス改善に効果的なのは、サイト内のコンテンツやJavaScript・CSSを始めとするファイルサイズの調整だけではありません。サーバーへのリクエストから受信までの時間を短くするというのもパフォーマンス改善に大きく影響します。

それにはサイトのフロントエンドの話とは別に、サーバーサイドの言語をバージョンアップしたり、Webサーバーを増強したり、ホスティングサービスの見直しを行うことで通信に要する時間が短縮され、パフォーマンス改善に繋がります。

必須ドメインへの事前接続をしておく

あるWebページから外部サイトへアクセスを行い、そのサイトを読み込む時には、そのドメイン名からIPアドレスを見つけるDNSルックアップという処理が裏側で行われています。

この処理に時間を要するためにパフォーマンスが低下するというのがPageSpeed Insightsで指摘される要因で、その処理に必要となるリンク先に事前に接続すると、高速化出来るというのが「事前接続」という手段です。

一方であまりクリックされることのない外部リンクにまで事前接続の処理を行っても無駄なリソースを読み込むだけになってしまうので、Google AdSenseなどのバナーのリンクや、ファーストビューのリンクなどに対してのみ行うことを推奨します。

ここでひとつ注意が必要なのは、遅延読み込みを実装している外部リンクは事前接続は必要ありません。
無駄に最初の読み込みが遅くなるだけですので気を付けましょう。

複数リダイレクトを回避しておく

リダイレクトはWebページの読み込みを遅くする要因となり、サイトの中で何度もリダイレクトを行う構成となってしまっていると大きなパフォーマンス悪化に繋がります。

このような構成になってしまう要因としては、サイト移転やリニューアル作業による301リダイレクトや302リダイレクトの処理が行われている場合や、PCサイトとは別にモバイルサイトを構築している場合などがその要因です。

対策としては、サイト移転に際する新規アドレスの他メディアなどへの周知を徹底し、掲載されているURLを統一したり、サイトのリニューアルをなるべく迅速に完了させたりすることでリダイレクトの発生を最小限に抑えることが可能です。

ブラウザのキャッシュを活用する

ブラウザはWebページを表示する時に、コンテンツ、JavaScript・CSSなどのファイルをサーバーから新たに読み込むか、ユーザーのデバイスでキャッシュ（保持）しているファイルを利用するか、どちらかが選択されます。

初めてアクセスしたサイトであれば当然前者のサーバーから新たに読み込む方法が選択されますが、二度目以降はキャッシュを利用して読み込みを行うことも可能になります。

読み込み速度の観点から、このキャッシュを利用して読み込んだ方が新たにサーバーから読み込むよりも速度は速くなるというのが、キャッシュが利用されるメリットです。

このブラウザのキャッシュを有効にするには、サーバーで「Expires」を設定することで修正が可能になります。
また、PageSpeed Insightsではこのキャッシュの有効期限の目安について、基本的に最低でも1週間、更新頻度の低いリソース（htmlやCSS、画像など）は最大で1年間の有効期限を設定することが推奨されています。

CDNの導入

サーバーサイドでのパフォーマンス改善策として、汎用的に用いられているのがCDN（Contents Delivery Network）の導入です。

CDNとは、サーバーを分散して配置することで一つのサーバーにアクセスが集中してしまうことを回避し負荷を低減する仕組みです。

これにより、サーバーからブラウザへの応答時間を短くすることができ、加えてセールやメディアの紹介など何等かの要因でアクセスが一時的に集中した場合でもパフォーマンスを安定させることができます。

PageSpeed Insightsを活用するヒント

本章では、どのように活用を進めていけば良いのか、ヒントについて解説します。

定期的にテストを行う

サイトのパフォーマンスは課題が表面には現れづらく、気づいた時にはパフォーマンスがかなり悪くなってしまっているという状況になりがちです。

それが起因してサイトのCVRや直帰率が悪化してしまうことを防ぐためにも、PageSpeed Insightsを使用して定期的にサイトのパフォーマンスを評価し、潜在的な問題の特定と対処に積極的に取り組みましょう。

優先順位と目標値を決める

PageSpeed Insightsの推奨事項や、一般論として対策すべきこと全てを行うのはほぼ不可能に近いです。
改善事項に基づいて、自社が投下出来るリソースと照らし合わせながら、最適化の優先順位と目標を明確に設定するようにしましょう。

その場合にはパフォーマンスに大きな影響を与える可能性のある改善事項の優先度をなるべく上げて着手していくことで、PageSpeed Insightsのスコアについても確実に上昇に繋がっていくかと思います。

“モバイル”を優先する

Googleは、2018年にWebページの表示速度がSEOで評価されると発表しましたが、そこで評価されるのは「モバイル」つまりスマホで表示される場合の表示速度と記載されています。

加えて多くのサイトでは流入の大半はモバイルからの流入であることが多いです。

さらにモバイルからの流入ユーザーの閲覧環境はスキマ時間に利用されているケースが多いため、その点においてもモバイルの表示速度の方が優先度は高いといえるでしょう。

今はレスポンシブデザインでサイトが制作されることが多いため、画像のサイズなどはPCよりもモバイルでの表示を主軸に考慮するなど、モバイルでのパフォーマンス改善の優先度を高めるようにしましょう。

開発者と密に連携する

開発者が直接PageSpeed Insightsを利用しながら改善を進めるケースもありますが、それとは別にサイトの所有者や担当者する場合にも密に協力し、改善事項の実装を進めるようにしましょう。

特に改善の対象が自社のサイトではなく、クライアントのサイトである場合、サーバーサイドの言語に関わる部分やCDNの実装などの話を進めるためには、クライアントの情報システム部や開発チームと密にコミュニケーションを行わないと課題解決を進めることはできません。

外部にコンサルを依頼する

個人や少人数のチームで運営しているサイトで特にリソースが足りない場合など、必要に応じて外部の専門家によるコンサルティングを利用することもおすすめです。

特にパフォーマンス改善についてはテクニカルな項目も多いため、複雑な課題を深く掘り下げ、サイトや自社の状況に対して最適な提案を受けることでより迅速に改善を進めることが可能です。

PageSpeed Insightsだけでは検証は不完全

PageSpeed Insightsは、一般的な状況におけるパフォーマンスがスコアリングされますが、特にECサイトでのセール中など、アクセスが一時的に急増するような場合ではこのスコアが当てはまらない可能性が高いです。

特定の場合のパフォーマンスを事前に計測するのは難しいのですが、GTmetrixではリクエスト数や表示速度の履歴も確認可能なので、セールなどのアクセスが急増したと思われるタイミングの後に確認を行うことで、このような場合のパフォーマンスを測ることも可能です。

その上で事前に対策を行いたい場合は、まずCDNを設置する等アクセス急増時のサーバーへの負荷を減らすような準備をしておきましょう。

さらに有料のツールにはなりますが、Datadogというツールを導入することでリアルタイムにモニタリングを実施出来るため、事前の予測を超えるようなアクセスが発生した場合にもすぐに把握することができます。

まとめ：google pagespeed insightsでサイトスピードを改善しよう

PageSpeed Insightsは、サイトのパフォーマンスという可視化しづらい問題について、指標に細分化し、実用的な改善事項の推奨までが完全無料で提示されるとても便利なツールです。

PageSpeed Insightsのスコアリングや、改善のための実践的な手法とそれらを進めるためのヒントを解説しながら、サイトパフォーマンスの重要性を探ってきました。

改善事項について理解し実践を進めることで、UXの向上やCVR改善などのサイト全体におけるKPI達成にも繋がっていきます。
ぜひこの記事を参考にご自身のサイトのパフォーマンス改善を進めてみましょう。

本メディアを運営する株式会社ギャプライズでは、WebマーケティングやWebサイト改善、Webサイト集客など、さまざまな課題や悩みに対応したビジネスを展開しています。

ぜひ、お気軽にお問い合わせください。