PageSpeed Insights（ページスピードインサイト）の見るべきポイント！改善方法も解説！
2021.09.16
ページの表示速度を上げることで、ユーザーにストレスが少ないページを作ることができます。
しかし、ページが早いのか遅いのかの判断はしにくいものです。
そこでチェックしたいツールが、「ページスピードインサイト」です。
簡単に使えるツールなので、活用していきましょう。
当コラムでは、ページスピードインサイトの使い方や見方を解説していきます。
ページの表示速度を改善するためのポイントもまとめたので、ぜひ参考にしてください。
ページスピードインサイトとは
ページスピードインサイトとは、ページの表示速度をスコアとして表示するツールのことです。
SEO対策をする上でサイトの表示速度は重要です。
2021年6月にコアウェブバイタルが導入され、更にサイトの表示速度が注目されるようになってきたこともあり、「このページは表示速度が高いのか」ということを明確に知りたい場合もあります。
そこで役立つのが、このページスピードインサイトです。
ページスピードインサイトを使えば表示速度がスコアとしてはっきりとわかるようになるので、対策がしやすくなります。
なお、ページスピードインサイトはGoogleが提供しているツールです。
無料で誰でも使うことができます。
ページスピードインサイトの使い方
ページスピードインサイトの使い方はシンプルです。
「ウェブページのURLを入力」のところに、分析したいページのURLを貼り付けます。
貼り付けるURLは自分のサイトだけでなく、競合サイトのURLでも調査は可能です。
URLを貼り付けたら「分析」をクリックします。
しばらく待つと分析結果が表示されます。
ページスピードインサイトの見方
ページスピードインサイトを使うと、さまざまなデータを見ることができます。
それぞれのデータの見方を解説していきましょう。
フィールドデータ
フィールドデータは、Chrome User Experience Reportをもとにしたデータ見ることができます。
Chrome User Experience Reportはchromeを使用しているユーザーのデータです。
フィールドデータではChrome User Experience Reportでほかのページと比較したときのページスピードを確認できます。
フィールドデータでは4つのデータが記載されており、それぞれの意味は以下のようになっています。
- First Contentful Paint（FCP）：URLを開いてからサイトが表示されるまでの速度
- First Input Delay（FID）：タップやクリックなどの操作をしてから応答するまでの速度
- Largest Contentful Paint（LCP）：アクセスしてからメインコンテンツを表示するまでの速度
- Cumulative Layout Shift（CLS）：レイアウトの安定性
いずれもチェックしておきたい指標ですが、ユーザーのサイトへの第一印象となるFirst Contentful PaintやCumulative Layout Shiftは特に改善していきたい指標といえます。
ラボデータ
ラボデータでは、Lighthouseにて分析した結果を確認できる箇所です。
ラボデータでは6つのデータを確認できますが、それぞれの意味は以下のとおりとなっています。
- First Contentful Paint：URLを開いてからサイトが表示されるまでの速度
- Time to Interactive：ページが操作できるようになるまでの速度
- Speed Index：コンテンツが表示されるまでの速度
- Total Blocking Time：ページを読み込むまでの反応性
- Largest Contentful Paint：アクセスしてからメインコンテンツを表示するまでの速度
- Cumulative Layout Shift（CLS）：ページの安定性（レイアウトのズレがないか）
なお、ラボデータはサーバーの状況などでもスコアが変わることがあります。
改善できる項目
「改善できる項目」では、ページスピードを向上させるための改善案が表示されています。
また、改善した際に短縮できる推定時間も表示されているので、優先順位を考える際の参考にもなります。
ここでは、赤が「優先的な改善案」、オレンジが「改善を行ったほうがいい」という意味になっています。
診断
「診断」では、以下のようにアプリケーションに関する改善案が表示されています。
「改善できる項目」と同じように、赤が「優先的な改善案」、オレンジが「改善を行ったほうがいい」となっているのでチェックしてみましょう。
合格した監査
「合格した監査」では、問題がなかった項目が表示されています。
「合格した監査」は「診断」の下に表示されます。右部にある「∨」をクリックすることで、以下のように詳細の確認が可能です。
表示速度が決まる要因
ページスピードインサイトではページスピードがスコア化されますが、そもそもページスピードが決まる要因とは何なのでしょうか。
ページスピードは、ページスピードインサイトにて計測された、
- First Contentful Paint
- Time to Interactiv
- Speed Index
- Total Blocking Time
- Largest Contentful Paint
これら5つの要因にて決まります。そのなかでも特に重要なのが、「First Contentful Paint」、つまりコンテンツが初めて表示されるまでの速度です。
この指標が0～1秒未満であれば高速といってもいいでしょう。
なぜ表示速度が重要なの？
ページスピードインサイトでは表示速度を測ることができますが、表示速度はなぜ重要なのでしょうか。
その答えは、表示速度が検索順位に関係するためです。
2018年の「スピードアップデート」にて、ページの表示速度が検索順位を決める要素のひとつになりました。
つまり、表示速度の改善はSEO対策になるということです。
また、2021年にはコアウェブバイタルもランキング要因となりました。
コアウェブバイタルの指標の中にも、Webサイトの読み込み速度の項目がありますので、表示速度はSEO対策において重要な要素と言えます。
▼関連記事
Googleではユーザーにとって有益で快適なページを優先的に表示されます。
読み込みが遅いページは、ユーザーにとってストレスを与えるものです。
ユーザーが快適にページを閲覧できるようにするためにも、表示速度を上げるようにしましょう。
表示速度の改善が必要なケースとは
ページスピードインサイトでは表示速度をスコアとして見ることができますが、完璧なスコアを出せるページはほとんどありません。
低いスコアが出たり、改善できる項目が表示されたりすることがほとんどでしょう。
しかし、ページスピードインサイトのスコアにこだわりすぎて、ほかのSEO対策が疎かになってしまえば本末転倒といえます。
どこまで改善すべきか、そもそも改善が必要なのかを見極めることも大切です。
表示速度をチェックする際には、ページスピードインサイトだけでなくSearch Consoleもチェックしてみてください。
Search Consoleの「ウェブに関する主な指標」から、LCP・FID・CLSを確認できます。ここで「不良」となっている部分は改善したほうがいいでしょう。
LCP・FID・CLSの再確認
First Contentful Paint（FCP）：URLを開いてからサイトが表示されるまでの速度
First Input Delay（FID）：タップやクリックなどの操作をしてから応答するまでの速度
Cumulative Layout Shift（CLS）：ページの安定性（レイアウトのズレがないか）
このLCP・FID・CLSの3つの指標は上記でも紹介した「コアウェブバイタル」と呼ばれています。
コアウェブバイタルの指標は、ページエクスペリエンスアップデートにより検索順位に今後密接に関わってくることになっているので、しっかり改善していきましょう。
▼関連記事
表示速度を改善するには？
最後に、表示速度を改善するためのポイントを解説していきます。
画像サイズの調整
大きなサイズの画像は読み込み遅延の原因となります。
画像を使用する場合は、適切なサイズに調整しましょう。
無理に圧縮すると画像がぼやけてしまうので、適度に解像度を下げたり、圧縮ツールを使用して画像を圧縮したりしてみてください。
▼関連記事
Webフォント読み込み中のフォント設定
ウェブフォントを使用すると読み込みが遅くなることがあります。
ウェブフォントはデザイン性に優れているため、デザインを重視したサイトの場合によく使用されますが、場合によっては読み込み速度の低下に繋がるので注意しましょう。
特にこだわりがなければ、もともとパソコンに搭載されているローカルフォントを使うことをおすすめします。
オフスクリーン画像の読み込みの設定
ページスピードインサイトには、「オフスクリーン画像の遅延読み込み」という項目があります。
これは、画面に表示されている画像だけを読み込むことを指し、取り入れることで表示速度を向上させることが可能です。
オフスクリーン画像の遅延読み込みは、Wordpressの場合は「Lazy Load」や「EWWW Image Optimizer」のプラグインを使用するといいです。
ただ、WordPressのバージョン5.5からは自動で遅延読み込みの機能が搭載されております。
WordPressを使用していない場合は、jquery.lazyload.jsを活用したり、JavaScriptで非同期読み込みをしたりするといいでしょう。
▼関連記事
使用していないCSSを削除する
もしも使用していないCSSがあれば削除することをおすすめします。
不要なCSSが大量にあると、その分読み込みが遅くなることがあるからです。
サーバー応答時間を短縮する
サーバーの応答時間に問題がある場合は、サーバーのグレードアップや乗り換えを検討してみてください。
それだけでもスコアが改善する可能性があります。
gzip圧縮を行う
html、css、javascriptなどをgzipで圧縮することで、表示速度の改善ができます。
gzip圧縮はテキストファイルを圧縮するものです。
なお、gzip圧縮は画像ファイルは対象外となるため、画像は別に圧縮しましょう。
▼関連記事
まとめ
表示速度を向上させることで、ユーザーにとって見やすいサイトを作ることができます。
検索順位にも関わってくるので、対策を行っていきましょう。
ページスピードインサイトやサーチコンソールを活用しながら、改善できるところから改善していってください。
関連
Webサイト制作サイト制作
Webデザイン
SEO対策コンテンツSEO
SEO基礎SEO対策SEO解析
