SEOにも有利！サイト表示速度の分析が瞬時にできるPageSpeed Insightsの使い方

こんにちは！社員Aです👩

今回は、「サイト表示速度の分析が瞬時にできるPageSpeed Insightsの使い方」をご紹介したいと思います。

SEO対策で重要になるサイトの表示速度ですが、GoogleのPageSpeed Insightsを使うことで実際にどれくらいの速度で表示されるのか、スマートフォンとPCに分けて調査できます。

サイト表示速度の分析が瞬時にできるPageSpeed Insights

developers.google.com

 

34 Tweets

43192 Shares

991 Users

7132 Pockets

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。

スコアは主に下記を基準に評価されます。

速度スコア

PageSpeed Insights では Chrome ユーザー エクスペリエンス レポート（CrUX）のデータを組み入れて、ページに関する実際のパフォーマンス データを表示します。

PSI レポートで確認できる指標は First Contentful Paint（FCP）と DOMContentLoaded（DCL）の 2 つです。

全体の速度スコアは、各指標に割り当てられたカテゴリに基づいて評価されます。

• 速い: ページのすべての指標が「速い」に分類されている場合。
• 遅い: ページの指標のいずれかが「遅い」に分類されている場合。
• 平均: 上記以外の場合。

最適化スコア

PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0～100 の値として算出します。

次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。

1. スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
2. ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。

スコアは「Good」、「Medium」、「Low」のいずれかに分類されます。この計算は、デベロッパーがページの外観と機能の変更を検討していないという前提で行われます。

1. Good: ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは 80 以上になります。
2. Medium: ページには、パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。ページのスコアは 60～79 の範囲になります。
3. Low: ページは最適化されておらず、最適化すべき点がかなり多くあります。ページのスコアは 0～59 の範囲になります。

最適化スコアは、ページのパフォーマンス改善の余地を推定した値です。読み込み速度の遅いページであっても、ページで使用されている全リソースに対するレンダリング ブロック リソースの割合が少ないと、最適化スコアが高くなる場合があります。

一方で、読み込み速度が速いページでも、全リソースに対するレンダリング ブロック リソースの数が多いと、最適化スコアが低くなる場合があります。

実際にPageSpeed Insightsを使って当ブログを評価してみる

ここからは実際にPageSpeed Insightsを使って当ブログの表示速度を評価してもらいたいと思います。

1.サイトからURLを入力し、「分析」をクリック

やり方は簡単で、評価したいサイトのURLを入れて「分析」ボタンを押すだけです。

2.分析完了（スマホ版）

1分ほどで分析が完了しました。

スマホ版とPC版の両方の評価を出してくれるのですが、まずスマホ版からです。

全体の評価としては「Medium」で、パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。ページのスコアは 60～79 の範囲になります。

このツールの良いところは、実際にどの点が悪いのか、改善したほうが良いのか具体的に書いてくれています。

実際に上記で提案された修正方法で細かく修正していくと、スコアや表示速度も上がっていくということでしょう。

3.分析完了（PC版）

続いて、PC版の評価です。

スコアは54で、Low: ページは最適化されておらず、最適化すべき点がかなり多くあります。ページのスコアは 0～59 の範囲になります。注意されちゃいました！（泣）

主な原因を見ていくと、下記の通り、画像の容量の指摘が多かったです。

4.Googleから最適化されたデータをダウンロードできる

最下部にいくと、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」という文言が表示され、これをクリックすると容量の大きかった画像やJs・CSSなどを圧縮したものを一括でダウンロードできます。

そのため、ダウンロードして再度サイトに上書きすることでスコア向上が見込めます。

5.指示通りに変えていくとスコアが改善！

LOWの評価に分類されていたPC版ですが、主に画像面を指示通りに修正することで「54」だったスコアが「73」まで改善しました！

まとめ

Googleが表示速度はSEOの要因のひとつと発表しています。

そのため、サイトがどれくらいの速度で表示されているのか知ることはとても重要です。

今回ご紹介したPageSpeed Insightsは、スマホ・PCに分けてスコア化し、スコアに合わせた改善点なども細かく提案してくれるので、手軽にサイトの表示速度を上げられるのが魅力だと思います。

また、特にブログのようなサイトでは記事が増えてくるにつれ、スコアも変動してくると思いますので定期的な測定や対策が必要だと感じました！