PageSpeed Insightsの使い方！分析結果で高得点をだす高速化・最適化方法を解説！

Googleが提供するWEBページの表示速度を計測するチェックツール「PageSpeed Insights」の使い方はとても簡単です。現在WEBページの表示速度はSEO、検索順位に影響があると言われていて、WEBに携わる人には無視できない重要なものになっています。

そんな重要なWEBページ速度を無料で計測できる「PageSpeed Insights」の使い方、また分析結果で高得点を出すためには、どうすればよいのか、WEBページを高速化する方法と、「PageSpeed Insights」で高得点を出す為の使い方をご紹介します。

「PageSpeed Insights」の使い方はとても簡単です。まずは、「PageSpeed Insights」の公式サイトへアクセスします。上記画像の様なページが表示されるはずなので、「ウェブページのURLを入力」と書かれている場所に分析をしたいWEBページのURLを入力して、「分析」をクリックします。

これだけで、分析が完了し分析結果が表示されます。WEBページの分析には、WEBページにもよりますが、数分程度で完了します。分析の得点は「モバイル」と「パソコン」があり、それぞれで得点が表示されます。モバイルの方が得点を低く評価され、辛口の評価をされやすい傾向にあります。

Pagespeed insightsはとても高機能で、使い方もとても簡単ですが、分析結果の見方は慣れるまで少し使いづらいかもしれません。ここでは、Pagespeed insightsで表示される分析結果の見方をご紹介します。

「Google Pagespeed insights」とは、Googleが提供するWEBサイトの表示速度を計測するチェックツール、チェックページです。分析したいWEBページのURLを入力して「分析」をクリックするだけで、細かな分析をしてくれて、表示速度を得点として表示してくれます。

また、単純に表示速度を得点として表示するだけでなく、どうすれば高速化できるかの提案もPageSpeed Insightsはしてくれます。なので、Pagespeed insightsで分析をするだけで、WEBページの表示速度と高速化の具体的な方法までわかるので、WEBページの表示速度を改善し、高速化したい時にはかなり有用なツールだと言えます。

PageSpeed Insightsでは、Googleが表示速度の判断材料としているChrome User Experience Report（CrUX）からレポートを出してくれることがあります。フィールドデータが出た際に「提供元の概要を表示」をクリックすることで、Chrome User Experience Report（CrUX）と比較した際のデータの閲覧ができます。

このChrome User Experience Report（CrUX）とは、Google Chromeを使用している人のデータを蓄積したもので、様々なデータの比較・検証ができます。ここでは、実際に該当のWEBページを検索した人のデータを実際にとったものを使ってPageSpeed Insightsでは検証をしているようです。

この時、PageSpeed Insightsでは、WEBページによってはデータが足りずに、「実際の速度データが十分にありません。」と表示されるときがありますが、この時も「提供元の概要を表示」をクリックすることで上記画像の様に、「Origin Summary」として、該当のWEBページの分析の基準としたデータを表示してくれます。

PageSpeed Insightsでは、WEBページの分析結果を6つのデータで得点を評価してくれます。この一連のデータを「ラボデータ」と呼びます。それぞれのデータにおいて、三段階、緑は平均以上、オレンジは返金的、赤は平均以下を表します。

それぞれの、評価は「コンテンツの初回ペイント」はコンテンツあるいは、画像が初めて描写されるまでの時間を表し、「速度インデックス」ではページのコンテンツが初めて表示されるまでの時間を表し、「インタラクティブになるまでの時間」では、該当WEBページが完全に操作可能になるまでの時間を表します。

「意味のあるコンテンツの初回ペイント」はページの主要なコンテンツが可視化されるまでの時間を表し、多くは「コンテンツの初回ペイント」と似たような時間になります。「CPU の初回アイドル」はページのメインのスレッド処理が停止し初回入力が可能になった時間、つまりはユーザーが操作をしてからの反応時間を表します。

「最大推定 FID」はユーザーが入力してから、反応するまでかかった最大の反応時間を表します。それぞれのデータは個別に聞いてもいまいちピンとこないかもしれませんが、基本的には、色で判断し、全てが緑色になることを目指すことが重要になります。

PageSpeed Insightsでは、具体的なWEBページの表示速度高速化の提案をしてくれます。このWEBページの高速化の具体的な提案項目が「改善できる項目」になります。赤色とオレンジ色でそれぞれ改善できる度合いを表していて、赤色の項目がより、改善によって大きく高速化ができることを表しています。

PageSpeed Insightsでは、「最適なサイズの画像」や「次世代フォーマットでの画像の配信」などの具体的な改善項目があり、この項目をクリックすることで、該当の画像や該当の箇所が表示されます。

PageSpeed Insightsでは、上記項目の「改善できる項目」とは別にアプリケーションのパフォーマンスに対する高速化する為の改善案も提示してくれます。ここでも、赤色がより効果が大きく、改善できる項目になっていて、項目ごとにクリックすることで、該当箇所の確認ができます。