自社サイトのPCとスマホでの表示速度を測定してくれるのがページスピードインサイトです。無料で利用できるため、使ったことがある人は多いでしょう。ページスピードインサイトのスコアの見方、改善ポイントの見方についてわかりやすく解説します。
Webサイト制作でお悩みの担当者様へ
ウェブサイトの新規制作やリニューアルしたいが、SEOに強い制作会社はデザインが悪い、デザインが良い制作会社はSEOに弱い・・・。
Webサイトの制作会社を探していて、このようなお悩みはありませんか？弊社では専門のSEOコンサルタントがサイト設計を実施、デザインは国内外の優秀なデザイナーによるデザイン性の高い結果を出すサイト制作をご提案をいたします。
Webサイト制作は
ニュートラルワークス
Google PageSpeed Insights（ページスピードインサイト）とは？
「Google PageSpeed Insights（ページスピードインサイト）」とは、ウェブページの読み込み速度をGoogleのスコアで表示するウェブツールです。
Google社が提供しており、URLを入力するだけでウェブサイトのページ読み込み速度や改善ポイントが分析されます。
調査では「Eコマースのユーザーが表示に待てる時間は2秒まで（※）」とも言われており、Googleも検索ランキングの順位付け要素にページスピードを組み込んでいると公式に発表しています。
※引用元：：こちら
Google PageSpeed Insights（ページスピードインサイト）の特徴
それでは実際の画面を見ながら、特徴や使い方を見ていきましょう！
個人、法人どちらの利用も無料
PageSpeed Insightsのウェブサイトにアクセスすると、すぐに「ウェブページのURLを入力」と書かれている入力欄があります。
URLを入力して「分析」ボタンをクリックするだけで、個人・法人問わず、無料でウェブサイトの分析が可能です。
PCとスマホ、それぞれのページ表示速度を100点満点の点数（スコア）で表示
今回は例としてニュートラルワークスのブログメディアをページスピードインサイトで分析しました。スコアはパソコンでは100点中62点です。点数の下には改善ポイントも数値と共に細かく表示されています。
自社運営サイトだけではなく競合サイトのスコアも確認できる
ページスピードインサイトはURLだけで分析ができるので、自社サイトだけでなく競合など他社のウェブサイトの分析も可能です。またサイト全体の分析ではなくページ単位での分析なので、気になるページだけでも確認ができます。
なぜWebサイトの表示速度が重要なのか？
サイトの表示速度は「ユーザー体験（UX）」と「SEO」に影響を及ぼします。
表示速度が1秒から3秒まで遅くなると、直帰率は32%増加する
表示速度が1秒から5秒まで遅くなると、直帰率は90%増加する
表示速度が1秒から6秒まで遅くなると、直帰率は106%増加する
表示速度が1秒から10秒まで遅くなると、直帰率は123%増加する
表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している
引用元：こちら
上記はGoogleが発表した、ページの表示速度とユーザー行動の関係性です。
3秒以上かかるサイトでは約半数が離脱してしまうなど、ユーザーはより早く表示されるサイトを求めていることがわかります。
SEOとは？効果的なSEO対策で検索順位を上げるポイントを解説！
あまりに表示速度が遅いページはインデックスされないことも
ページの読み込み速度は検索順位が決まる重要な要素になりつつあります。あまりにページ表示の遅いサイトに関しては、クローラーに影響が出てインデックスされにくい可能性があります。
GoogleのJohn Mueller氏は、2018年のライブ配信にて「Googleのクローラーは1000ms（1秒）以上掛かるとクローリングに制限が掛かる（※）」という旨の発言をしています。
※引用：こちら
自社のサイトが重い場合は、課題を把握するためにもぜひページスピードインサイトで分析してみましょう。
クローラーとは？検索エンジンにインデックスされる仕組みや巡回頻度を上げる方法を解説
Webサイトを制作、公開しても検索結果に表示されないと検索エンジン経由の集客はできません。検索エンジンがWebサイトの情報を取得するために使用しているのがクローラーです。クローラーがサイトの情報をどのように取得しているのか、基本的なところから解説します。
まずはモバイルスコアで40点を目指そう
ページスピードを分析した際には、一体どのくらいのスコアが出れば良いのでしょうか？ページスピードインサイトは100点満点のスコアと改善点が表示されます。
ページスピードインサイトのスコアは海外から測定されるため、そもそも日本のウェブサイトのスコアは低くなりやすく、読み込むコンテンツや機能の多いECサイトやメディアサイト等のモバイル版であれば、40点を取れれば良い方とも言われています。
他にもモバイルサイトの分析では4G通信を前提にしているため、パソコンサイトの表示スコアより低くなりやすく、上の画像のように大手Webサイトであっても20~30点台となることも珍しくありません。
まずはモバイルサイトでは平均的な40点台を目標にするのが良いでしょう。
Google PageSpeed Insights（ページスピードインサイト）の使用方法
それではページスピードインサイトの使用方法を見ていきましょう。
1、「WebページのURLを入力」欄に測定したいURLを入力
使用方法はとても簡単です。
PageSpeed Insightsにアクセスし、「ウェブページのURLを入力」と書かれた欄に、分析したいページのURLを入力します。ページ単位で分析できるので、トップページでなくても大丈夫です。
「分析」ボタンをクリックするとウェブページの分析が始まります。
2、モバイル、PCそれぞれのスコアが表示される
分析が終わると、このようなモバイルサイトのテスト結果が表示されます。
上記画像はGoogleの検索トップページ（https://www.google.com/）の分析ですが、さすがの表示速度で「77点」です。
URL入力欄の下に、モバイルとパソコンを切り替えるタブがあります。
パソコンの分析結果に切り替えると、こちらは100点でした。
このようにモバイルのスコアは低くなりやすく、パソコンのスコアは80点以上も出やすいです。
もしパソコン表示でのみ高いスコアが出た場合は要注意です。Googleではモバイルファーストなサイトを高く評価しているので、パソコンでのサイト表示よりもモバイルでのスコアがどうなっているのかが重要となります。
モバイルでは40点台を目指せるよう、改善案を参考にしましょう。
ページスピードインサイトのスコアは変動する
ページスピードインサイトでは、同じURLであっても結果のスコアが変動することがあります。
公式ガイドにも変動についての項目があり、原因はネットワークやハードウェアの利用状況、リソースの競合などによるものとの事です。
“
実行するたびにパフォーマンス スコアが変わるのはなぜですか？ページは何も変更していません。
パフォーマンス測定の変動は、複数のチャネルでのさまざまな影響の度合いによって発生します。指標の変動の一般的な原因としては、ローカル ネットワークの利用状況、クライアント ハードウェアの利用状況、クライアント リソースの競合状態があります。
※引用：PageSpeed Insights API について
正確な結果を求める際は、同じURLであっても2〜3回分析を行いましょう。
ページスピードインサイトの診断結果の見方
ページスピードインサイトで診断できる項目は6種類あります。それぞれ詳しく見て行きましょう。
- フィールドデータ：Chromeユーザー エクスペリエンスレポート（CrUX）の表示
- ラボデータ：Lighthouseを使用した分析結果の表示
- 改善できる項目：ページスピードの改善案
- 診断：ページがウェブ開発のおすすめの設定に沿っているかの診断
- 合格した監査：改善の必要がない項目
フィールドデータの見方
ページスピードインサイトの「フィールドデータ」とは、Googleがページスピードの分析に使用している、Chromeユーザーのデータを使ったレポート（CrUX）です。
スコアのすぐ下に表示されます。
ページスピードインサイトのスコアを上げたい場合、ページ全てでなくても、最初に表示されるコンテンツの読み込みが早くなればスコアの改善に繋がります。
フィールドデータで表示される「First Contentful Paint（FCP）」は、「コンテンツまたは画像が初めて表示されるまでの時間」の分析結果ですので、改善の参考にしたいポイントです。
フィールドデータの下部にある「提供元の概要を表示」（画像赤枠部分）をクリックすると、データが入手できる場合は、コンテンツの初回ペイント（First Contentful Paint＝FCP）と初回入力遅延（First Input Delay＝FID）の指標データも追加で表示されます。
ラボデータの見方
ページスピードインサイトの「ラボデータ」では、Lighthouse(※)という分析ツールを使ったウェブページの分析結果を、数値と色でわかりやすく表示しています。
※Lighthouseとは…「Lighthouse」はGoogleが提供しているウェブサイトの品質分析ツールです。SEOの観点などからサイトのチェックができます。
| First Contentful Paint |
First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間 |
| Speed Index |
速度インデックスは、ページのコンテンツが取り込まれて表示される速さ |
| Largest Contentful Paint |
最大コンテンツの描画は、最も大きなテキストまたは画像が描画されるまでにかかった時間 |
| Time to Interactive |
操作可能になるまでの時間とは、ページが完全に操作可能になるのに要する時間 |
| Total Blocking Time |
タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間（ミリ秒） |
| Cumulative Layout Shift |
Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標 |
測定される項目は上記の6項目です。
これらの項目の分析結果を、色と数値で表示します。
画像の赤枠にあるスイッチボタンをクリックすると、測定項目の説明も見れます。
改善できる項目の見方
ページスピードインサイトの「改善できる項目」では、ページの表示速度を速くするための改善案が推定短縮時間を使って表示されます。
短縮できる時間が記載されていることで、対応するかどうかの判断の参考にもなります。
改善案は色でもわかりやすく表記されます。
- 改善した方が良い項目（オレンジ）
- 優先すべき改善案（赤）
診断の見方
ページスピードインサイトの「診断」では、ページがウェブ開発のおすすめの設定に沿っているかの診断結果が表示されます。改善案は色でもわかりやすく表記されます。
- 改善した方が良い項目（オレンジ）
- 優先すべき改善案（赤）
また、各項目をクリックすると、下の画像のように改善に関する詳細も表示されます。
合格した監査の見方
ページスピードインサイトの「合格した監査」 には、そのページが合格した監査が表示されます。
画像の赤枠部分をクリックすると、改善不要な項目の一覧が表示されます。
ぺージ表示速度を改善するための4つのポイント
ページスピードを改善するためには、どのような対応を行えば良いでしょうか？
4つのポイントをお伝えいたします。
画像の最適化
CSS、JavaScriptの最小化
ブラウザのキャッシュを活用する
サーバー応答時間を短くする
1、画像を最適化する
ページスピードインサイトで画像サイズに関する警告が出た場合は、画像の最適化を検討しましょう。
サイズの大きな画像や、画質の良い写真などはデータ量が多くなります。データ量の多い画像をそのままウェブサイトに使用して、ページの表示速度を遅くしてしまう事例は少なくありません。
ウェブサイトの読み込み速度を上げるために、画像を圧縮してサイズを下げることを「画像の最適化」と言います。
画像の最適化には、画質は落とさず無駄なデータを省く「ロスレス圧縮」という圧縮方法がおすすめです。
下記のような、画像の圧縮が簡単にできる無料サイトもあります。
TinyPNG
外部リンク：TinyPNG
PNG、JPEGに対応
Optimizilla
外部リンク：Optimizilla
JPEG、PNGに対応
Compressor.io
外部リンク：Compressor.io
JPG・PNG・GIF・SVGに対応
画像の使用量にもよりますが、ロスレス圧縮を行った画像に差し替えることでページスピードの改善も見込めます。
2、CSS、JavaScriptの最小化
ページスピードインサイトでは、CSSやJavaScriptに関する提案も表示されます。
ウェブサイトはHTML、CSS、JavaScriptなどのプログラミング言語から成り立っており、CSSやJavaScriptのコード量を少なくすることで、データ容量を減らし読み込みが速くなります。
データ量を減らす方法としては、コードを圧縮する方法があります。
改行やスペースを極力省く事でデータ量の削減が出来ますが、この方法はコードの可読性が下がるため、今後のサイト修正が難しくなってしまうかもしれません。
もし行う際はバックアップを取っておくなどの対策をおすすめします。
CSS、Javascriptのコードの圧縮は、無料のオンラインツールで行うこともできます。
CSS Minifier
外部リンク：CSS Minifier
JavaScript / Css 圧縮・軽量化（Minify）
外部リンク：JavaScript / Css 圧縮・軽量化（Minify）
3、ブラウザのキャッシュを活用する
「ブラウザのキャッシュを活用する」という項目が表示された時は、下記のような要因が考えられます。
- ファイルのキャッシュを許可する設定になっていない
- キャッシュの有効期間が短すぎる場合
キャッシュの保存設定は、サイト上の.htaccessと呼ばれるファイルにコードを記入することで設定出来ます。
許可すると再訪問の際の読み込み時間が短縮できるものの、キャッシュの保存期間を長くすると修正が反映されにくくなることもあります。
コードの修正が必要となるため、サーバーサイドの知識がある方が対応する事が好ましいで
しょう。
4、サーバー応答時間を短くする
ウェブページをサーバーから読み込む速度に問題がある場合に表示されます。
サーバー応答時間が長くなる原因としては、サーバーのスペック、PHPのバージョン、フレームワーク、ライブラリの問題などが考えられます。
要因が様々ですので、知見のあるエンジニアが原因を調査して、対処方法を考えた方が良い部分となります。
まとめ
ページ表示速度の改善は1つずつ丁寧にやっていけば確実に効果がでます。
ただ、取り組むべき項目が多い場合は優先順位を決めなければいけませんし、社内にエンジニアがいなくて着手できない内容もあるでしょう。
ほとんどの企業様はWebサイトに構築する時間と専門知識がありません。ニュートラルワークスは、トレンドを抑えたデザインで徹底的に「成果」にこだわったサイトを構築いたします。そのため、あなたは競合と差をつけることができ、それが更なる顧客獲得・売上増加に繋がります。Zoomなどのオンライン相談（無料）をやっておりますので、まずはこちらのお問い合わせページよりお気軽にお問い合わせください。ご連絡心よりお待ちしております。
