「自社サイトの読み込み速度が遅い」
「自社サイトの速度は適正なのか知りたい」
このようなお悩みのある方におすすめしたいのがGoogle PageSpeed Insightsです。
PageSpeed Insightsでは自社サイトの速度を判定し、改善策を立案する際に役立てられます。
サイトスピードの改善はコストや時間がかかるというイメージがありますが、PageSpeed Insightsを使用することで、無料で診断と改善点の洗い出しが可能です。
本記事ではPageSpeed Insightsの特徴や使用方法などを詳しく解説していくので、導入の参考にしてください。
目次
PageSpeed Insights（ページスピードインサイト）とは？
PageSpeed Insights（ページスピードインサイト）とは、Googleが提供するWebサイトの表示速度を測定して分析、評価する無料ツールです。
PageSpeed Insightsは計測したいWebサイトのURLを入力するだけで、0〜100のスコアで表示速度を判定します。また、サイト速度に関しての改善ポイントも表示されます。
Googleではサイトスピードをユーザーエクスペリエンスの向上の一要因として重視しています。そのため、サイトスピードの低下は検索順位の低下にもつながるのです。検索結果の上位表示を目指すなら、サイトスピードは取り組むべき課題といえるでしょう。
PageSpeed Insightsの特徴
PageSpeed Insightsは他の同等ツールと比較して、どのような特徴があるのでしょうか。
以下のような特徴があります。
- コアウェブバイタルが簡単に見れる
- 使用料が無料
- 測定結果を点数表示
- 競合サイトの分析も可能
PageSpeed Insightsの特徴をそれぞれ詳しく解説します。
コアウェブバイタルが簡単に見れる
PageSpeed Insightsではその他のツールと比較して、コアウェブバイタルが簡単に確認できるのが特徴です。難しい知識や、面倒な設定、専門知識がなくても理解できるように表示されます。
全て色分けされた見やすいグラフで表示されるため、感覚的に判別できるでしょう。
また、携帯電話とデスクトップの測定結果の切り替えも簡単にできるので、モバイル・パソコン双方での改善策を考えるのに適しています。
無料で使用可能
PageSpeed Insightsは、個人・法人問わず無料で使用できます。
使用方法も簡単で、会員登録などの必要もないので導入へのハードルはありません。
PageSpeed InsightsのWebサイトへアクセスして、計測したいWebページのURLを入力欄に入力するだけで分析が可能です。
サイトスピードの改善などは、エンジニアやコンサルを依頼するなどコストがかかるイメージですが、まずは無料のPageSpeed Insightsで改善対策を行ってみるのがおすすめです。
ページ表示速度を点数表示
PageSpeed Insightsは、Webサイトの表示速度を0〜100の点数で表示するため結果が誰でも一目でわかります。
ページの表示速度のスコアを100点中60点などと表示し、点数の下には改善ポイントも細かく表示されます。
目標のスコアを決めて改善していくなど、ゴールが定めやすいのも利点です。
競合サイトのスコアも確認できる
PageSpeed Insightsは入力欄に調べたいページのURLを入力するだけなので、自社サイトだけでなく競合など他社サイトの分析も可能です。
競合の分析も行えることで、自社サイトの目指すべき基準も明らかにできるでしょう。
また、ページ単体での分析も可能なため、気になるページだけをピンポイントで確認できます。
Webサイトの表示速度の重要性
Webサイトの表示速度はユーザー体験やSEOの観点からも重要です。
Googleは、ページの読み込み速度を含めたページエクスペリエンスが検索順位の評価に影響すると明らかにしています。
参照：ページ エクスペリエンスの Google 検索結果への影響について｜Google 検索セントラル
また、Googleが発表したページ表示速度とユーザー行動の関係性では、Webページの表示に3秒以上かかるとユーザーの半数が離脱することがわかっています。
このことから、ユーザーはより速く表示されるサイトを求めていることがわかるでしょう。
Webサイトの表示速度が重要である5つの理由を以下で解説します。
インデックスされないことがある
検索順位を決めるのに、ページの読み込み速度は重要な要素です。
読み込み速度が遅すぎるWebサイトは、クローラーに影響が出てしまいインデックスされない（検索しても出てこない）恐れもあります。
「Googleのクローラーは1000ms（1秒）以上かかるとクローリングに制限がかかる」という旨の発言が、2018年Youtubeのライブ配信でGoogleのJohn Mueller氏からありました。
参照：English Google Webmaster Central office-hours hangout｜YouTube
ユーザが離脱する恐れがある
ページの読み込みが遅いとユーザーの離脱につながります。
ユーザーはWeb上で知りたい情報に早くアクセスしたいので、なかなかWebサイトが表示されないとストレスになり離脱につながります。
Googleの調査結果では、以下のように表示時間が長くなるほど離脱率もアップすることがわかっています。
| 表示時間 | 離脱率 |
| 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｜Google
上記の表からもわかるように、表示に5秒以上かかるWebサイトはほとんどのユーザーが離脱するといって良いでしょう。
日常生活での5秒は取るに足りない程度の時間ですが、Webサイトを閲覧している際は、5秒でも待ちたくないというのがユーザーの率直な感覚です。
ユーザーの満足度が低下する
Webサイトの表示速度が遅いとユーザーの満足度は低下します。
Webサイトを閲覧していて、なかなか表示されずストレスに感じたという経験はないでしょうか。
表示速度の遅いWebサイトはユーザーにとって使いづらく、ストレスを与えてしまいます。
Googleの調査では、モバイルページで3秒以上表示にかかると53％のユーザーがそのWebサイトを離脱することがわかっています。
潜在顧客を逃さないためにも、読み込み速度は非常に重要です。
読み込み時間が速く、ユーザーのアクションにタイムリーに応答するWebサイトは、読み込み速度が遅く反応の遅いWebサイトよりも、ユーザーのエンゲージメントと定着率が高くなります。
ユーザーの満足度の低いWebサイトはリピーターの獲得もしづらく、コンバージョン率のアップも難しくなります。
検索順位の低下につながる
Webサイトの読み込み速度が重要な理由の1つが、検索順位の低下につながる恐れがあるということです。
Googleはサイトスピードを検索ランキングの要素に使用していると公表しています。
ページの表示速度が遅いことで、Googleからの評価が低下し、検索順位に悪影響を与える可能性があります。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
引用：ページの読み込み速度をモバイル検索のランキング要素に使用します｜Google 検索セントラル
対象となるのは、ユーザーがかなり遅いと感じるようなページのみで、ごくわずかな割合のクエリにしか影響しません。
しかし、実際にSEOに悪影響を及ぼす恐れがあるのはユーザーがかなり遅いと感じるページのみです。自社のWebサイトが検索ランキングに影響を及ぼすほど致命的に遅くないか、チェックすることが重要です。
コンバージョンの低下につながる
コンバージョンとは、Webサイトが目標としているユーザーアクションのことです。
そのサイトによってさまざまですが、ECサイトなら「商品購入」や「会員登録」などがこれにあたります。
サイトスピードの早いWebサイトはコンバージョンの獲得にも良い影響を与えることがわかっています。ページ読み込み速度の早いWebサイトはユーザーの満足度を高めるため、結果的にコンバージョン率アップにつながるのです。
一方でサイトスピードが遅いと、ユーザーが途中で離脱したり、ストレスを感じたりしてしまうため、コンバージョン率の低下につながります。
実際にサイトスピードの改善により、コンバージョン率や売り上げをアップさせた企業をGoogleが紹介しています。
引用：速度が重要な理由｜web.dev
スコアの目安
PageSpeed Insightsは100点満点でスコアが表示されますが、一体何点くらいを獲得できれば良いのでしょうか。日本の多くのWebサイトにおいては、40点を取れれば良い方だと言われています。
それは、PageSpeed Insightsのスコアは海外から測定されるため日本のWebサイトはスコアが低くなりやすいためです。また、モバイルサイトの分析は4G通信を前提にしているため、パソコンよりもスコアが低くなる傾向があります。
モバイルサイトでは20〜30点になることも珍しくありません。
そのため、まずはモバイルサイトで40点を目指すと良いでしょう。
PageSpeed Insightsで診断できる内容
PageSpeed Insightsで診断できるのは以下の2つの内容です。
- ページ表示速度のスコア
- ページ表示スコアの改善点
それぞれ解説します。
表示速度のスコア
PageSpeed Insightsでは、Webページの表示速度を0〜100点のスコアで確認できます。
Googleは90〜100点を目標にするよう述べています。
スコアは以下の３段階で評価されます。
- Good・・・90～100 改善点の
- Medium・・・50～89
- Low・・・0～49
判定結果がGoodになれば、表示速度の対策を新たに行う必要はありません。
Mediumの場合はその時の状況や、ほかに優先すべき施策に応じて対応しましょう。
Low判定は、表示速度の対策を行うべき指針になります。
表示速度を改善するための課題点
PageSpeed InsightsでWebサイトのスピードを測定した際に「パフォーマンスの問題を診断する」の「診断」から、ページ速度の改善すべき課題を確認できます。
改善できる項目
改善できる項目ではPageSpeed Insightsが提案する速度を向上させるための改善点が表示されます。最も優先すべき点は赤色で、次に優先すべき点はオレンジ色で示されています。
診断
診断では、ページがWeb 開発の推奨設定にそっているか、また、その改善点がわかりやすく記載されています。
最も優先して改善すべき項目を赤色の三角マークで、次に優先すべき項目をオレンジの四角マークで表示しています。
PageSpeed Insights の使い方
PageSpeed Insightsの使い方はPageSpeed Insightにアクセスして、「WebページのURLを入力」の欄に計測したいWebサイトのURLを入力して「分析」ボタンをクリックするだけです。
パソコンとモバイルのそれぞれのWebサイトの表示速度のスコアが確認できます。
「携帯電話」「デスクトップ」のボタンから簡単に切り替えが可能です。
また入力するURLは自社サイトに限らず、競合のサイトも入力し分析できます。
PageSpeed Insights の診断結果
PageSpeed Insightsで診断できる項目は以下の6つです。
- 実際のユーザー環境での評価・・・Chromeユーザー エクスペリエンスレポート（CrUX）の表示
- パフォーマンススコア・・・Lighthouseを使用した分析結果の表示
- 改善できる項目・・・ページスピードの改善案
- 診断・・・ページがウェブ開発のおすすめの設定に沿っているかの診断
- 合格した監査・・・改善の必要がない項目
実際のユーザー環境での評価
「実際のユーザー環境での評価」の項目では、世界中の実際のユーザーデータに基づき、サイトのパフォーマンスを以下の6つの指標を用いて評価します。
- Largest Contentful Paint（LCP）・・・ページ内の最も大きい容量の画像や動画が表示されるまでにかかる時間
- First Input Delay（FID）・・・ユーザーがWebページ上でアクションを始めて行った際に、ブラウザが応答するまでにかかる時間
- Cumulative Layout Shift（CLS）・・・ページの読み込みで発生するWebページのレイアウトのずれ
- First Contentful Paint（FCP）・・・ページの読み込み開始から、ページ内のコンテンツが初めて描画されるまでの時間
- Interaction to Next Paint（INP）・・・ユーザーが行ったアクションに対する応答時間で、最も時間がかかったもの
- Time to First Byte（TTFB）・・・ブラウザがデータの最初の1バイトをサーバーから受け取るまでにかかる時間
上記の指標をまとめてWeb Vitalsと呼びます。
Web VitalsはWeb上でのユーザーエクスペリエンスの質を評価します。
また、LCP 、FID、CLSの3つはWeb Vitalsの中でも特に重要な要素なので、まとめてCore Web Vitalsと呼ばれます。
パフォーマンススコア
「パフォーマンスの問題を診断する」の分析項目の1つがパフォーマンススコアの指標です。
ページの表示速度のスコアは「パフォーマンス」のスコアです。
パフォーマンススコアの算出方法は、以下の様にGoogle公式のwebサイトに記載があります。
PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0〜100 の値として算出します。
次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。
- ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
- ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。
引用：PageSpeed Insights について｜PageSpeed Tools
パフォーマンススコアの指標は以下の6つです。
- FCP・・・ページの読み込み開始から、ページ内のコンテンツが初めて描画されるまでの時間
- Speed Index（SI）・・・ページが表示されるまでの時間
- LCP・・・ページ内の最も大きい容量の画像や動画が表示されるまでにかかる時間
- Time to Interactive（TTI）・・・ページが表示されて、ユーザーが操作可能になるまでの時間
- Total Blocking Time（TBT）・・・ユーザーの行動に対してページがブロックされてい合計時間
- CLS・・・ページの読み込みで発生するWebページのレイアウトのずれ
診断
診断では、WebページがWeb開発の推奨に沿っているかの診断結果が表示されます。
改善案はわかりやすく色分けされ表示されます。
- 赤・・・優先すべき改善案
- オレンジ・・・改善した方が良い項目
各項目をクリックすると、改善に関する詳細も表示されます。
合格した監査
合格した監査には、そのWebページで合格した監査が表示されます。
「表示」をクリックすると改善不要な項目の一覧が表示されます。
ここに表示される項目はサイトスピードに最適化されている箇所ですので、現状を維持していけるようにすると良いでしょう。
また、競合や他Webサイトの測定をしている場合は、合格した監査に表示されている項目を自社サイトに取り入れるなど、参考にすることもできます。
ページ表示速度の改善方法
PageSpeed Insightsで分析しただけで満足せずに、分析結果をもとにサイトスピードの改善に取り組むことが重要です。Webページの表示速度を改善するための具体的な対応を以下に4つ紹介します。
画像の最適化
PageSpeed Insightsで画像に関する警告が表示された場合は、画像の最適化を行いましょう。
サイズの大きな画像や、解像度の高い綺麗な画像はデータ量が多くなりがちです。
Webサイトで画像を表示させる場合、印刷用ほど解像度は高くなくても十分綺麗に表示されます。データ量の多い画像は圧縮をかけるなどして、容量を軽くすることをおすすめします。
Googleが推奨しているWebサイトのファイルサイズは1.6MGです。
合計バイトサイズを 1,600 KiB 未満に抑えるようにします。 この目標は、10 秒以下の操作可能時間を達成しながら、理論的に 3G 接続でダウンロードできるデータ量に基づいています。
引用：膨大なネットワーク ペイロードを避ける｜Google
Webサイトのファイルの中でも、動画と画像はその大部分を占めます。
このことからも、画像の最適化はサイトスピードの改善に重要な施策であることがわかります。
Webサイトの速度を速くするために、画像を圧縮してデータ量を下げることを「画像の最適化」と言います。
画像の最適化には、画像を劣化させずに無駄なデータを削除する「ロスレス圧縮」という方法がおすすめです。Webサイトで使用する画像にロスレス圧縮を行うことで。ページスピードの改善も見込めます。
以下のような画像圧縮ツールもあるので活用してください。
- TinyPN・・・PNG、JPEGに対応
- Optimizilla・・・PNG、JPEGに対応
- Compressor.io・・・JPG・PNG・GIF・SVGに対応
CSS、JavaScriptの最適化
PageSpeed InsightsではCSSやJavaScriptの最適化に関する提案も表示されます。
CSSやJavaScriptの不必要なコードを削除する、コードをまとめて量を減らすなどすることで、Webサイトのデータ容量を削減し読み込み速度の改善につながります。
データ容量を減らすには、CSSやJavaScriptのコードを圧縮する方法があります。
スペースや改行を省くことでも容量は減らせますが、コードの可読性が低下することから、今後のサイト改善がしづらくなる可能性があります。
コードの軽量化を行う前に、バックアップを作成しておくことがおすすめです。
CSS、Javascriptのコードの圧縮は、以下の無料オンラインツールで行うこともできます。
ブラウザキャッシュの利用
ブラウザのキャッシュを活用することで、読み込み速度をアップさせることができます。
PageSpeed Insightsで「ブラウザのキャッシュを活用する」という項目が表示された場合は以下のことを確認してください。
- ファイルのキャッシュを許可する設定になっているか
- キャッシュの有効期間が短すぎないか
キャッシュの保存設定は、Webサイトのファイル「.htaccess」にコードを記入して設定します。
キャッシュを活用することで、Webサイトの読み込み速度は速くなりますが、キャッシュの保存期間を長くしすぎるとWebサイトの修正が反映されにくくなるということもあります。
修正を頻繁に行い、すぐに反映させたいというWebサイトには不向きです。
ブラウザキャッシュの活用にはコードの修正が必要なので、ある程度知識がある方が対応することをおすすめします。
サーバーの応答時間の改善
サーバーの応答時間が長いと、Webサイトの読み込み速度も低下します。
サーバーの応答時間が長くなる原因は、以下のものが考えられます。
- サーバーのスペック
- PHPのバージョン
- フレームワーク
- ライブラリの問題
原因が多岐に渡るので、知識のあるエンジニアが対処法を考えるのが良いでしょう。
表示速度改善に活用できる3ツール
Webサイトの表示速度の改善に役立つツールを3つ紹介します。
SpeedSize
SpeedSizeは、動画や画像を圧縮し自動最適化が可能なAIツールです。
圧縮するとはいえ、人間の目で見て識別できない程度のクオリティなので、画像の表示が荒くなるなどの心配もありません。
SpeedSizeでは容量削減だけではなく、ユーザー1人ひとりのインターネット環境に応じて最適なサイズやフォーマットを、作成から配信まで自動で行ってくれます。
また、世界的に安全でセキュリティの高いプラットフォームだということが保証されています。
メディアファイルを取り扱う点で、セキュリティの高さは重要です。
Speed Kit
Speed Kitは、Webサイトをキャッシュや画像最適化などで高速化できるツールです。
サイトスピードの分析機能も備えています。
導入も簡単で、50％〜300％の高速化が可能です。
Edgemesh
Edgemeshは、簡単な設定を行うだけで、自動的にWebサイトを高速化してくれるツールです。画像の最適化やコードの圧縮などが全て自動で行われます。
Edgemeshを使用することで、Webサイトは30〜70％高速になり、ユーザーの体験が向上します。
株式会社はせがわ様はEdgemeshの導入により、2年間解説できなかった課題が劇的に改善できたと語っています。
株式会社はせがわ様は、2年前にWebサイトのリニューアルを行った際、Shopifyを選択しEC機能を追加されました。このリニューアルをきっかけにPageSpeed Insightのスコアなどが大幅に悪化したため、改善の必要性を感じたとのことです。
そこから2年間、コアウェブバイタル回復を目指しさまざまな施策を試しても、大幅な改善には至りませんでした。仮導入時の数値改善と体感速度が決め手となりEdgemeshの導入を決めたそうです。
Edgemeshの導入後はトラフィック増加などWeb上の数値が上昇するなどビジネス面にプラスの効果を実感できているそうです。
参考記事：２年間解決できなかった課題がEdgemesh導入により劇的に改善できました
まとめ：PageSpeed Insightsを使用してページ速度を改善しよう
サイトスピードの改善は、Webサイトが大規模になればなるほど、Webサイトの機能が充実すればするほど難しくなってきます。サイトスピード改善のためにコストや時間を費やしたが、なかなか改善に至らないといった事例も多々あります。
PageSpeed Insightsを使用することで、Webサイトのページスピードの問題点や改善方法などが簡単にわかります。100点満点のスコア表示や、問題点の色分け表示など、感覚的に見やすくわかりやすいインターフェースも魅力的です。
使用方法はURLを入力するだけと簡単で、使用料も無料なのでぜひWebサイトの改善に役立ててみてください。そのほか、サイトスピード改善はギャプライズにお任せください。
サイトにあったさまざまなツール選択や導入サポートで、サイトスピードを改善し、CVR改善へつなげます。ぜひお気軽にお問い合わせください。
