Google Page Speed Insightsの使い方を解説！ページの表示スピードを上げよう

Google Page Speed Insightsの概要

ここでは、Google Speed Insightsの基礎知識について解説しつつ、Google Speed Insightsでできることについてご説明します。

Google Page Page Speed Insightsとは？

Google Page Speed Insightsとは、ページの読み込みスピードを向上させるための施策がわかるツールです。

PCとモバイル両方の表示速度に対応しており、それぞれにページ速度の点数がつきます。また、PCとモバイルそれぞれに、ページスピードをアップさせるための提案が出される仕組みとなっており、それぞれの最適な対応策を調査することが可能です。

Google Page Speed Insightsでできること

Google Page Speed Insightsでは、自社の表示スピードを分析、改善することができます。

検索エンジンでNo.1のシェアを誇るGoogleも、「ページスピードはSEOに影響する」と発表しています。つまり、Google Page Speed Insightsを利用してページスピードを改善することで、Webサイト全体でSEOに良い影響をもたらします。

Google Page Speed Insightsの見方

ここでは、Google Speed Insightsを使用する際にチェックしておきたい3つのポイントについてご紹介します。

• 表示速度スコアと配点
フィールドデータ
• ラボデータ

それぞれ順番に見ていきましょう。

表示速度スコアと配点

Google Page Speed Insightsでは、0〜100ポイントの範囲のスコアで採点されます。85ポイント以上は高評価となるため、85ポイント以上を目指して、Google Speed Insightsの各項目を最適化することが必要です。

フィールドデータ

まず、Google Page Speed Insightsを使用すれば、分析するサイト内の全ページの速度を分析することができます。85ポイント以上のページは評価が高いため、あまり改善する必要はありません。

しかし、85点未満のページについては、画像が重すぎる・サーバーとうまく連携できていないなどの改善点がある傾向にあります。

そこで参考になるのがフィールドデータです。Google Page Speed Insightsのフィールドデータでは、様々な環境のユーザーのデータを集計し、28日間の累計データが表示されます。

つまり、改善するべき点を洗い出し、28日間ごとに表示速度のチェックを行うことで、改善のための施策が適切であったかを判断できます。もちろん、28日ごとでなくとも、改善の施策を行った際には必ずチェックを怠らないようにしましょう。

First Contentful Paint（FCP）

FCP（First Contentful Paint）とは、ユーザーが URL をクリックしてから、サイトを表示させるための要素をレンダリングするまでの時間を指します。

FCPは秒数で表し、速度の分類については、0～1 秒未満の場合は「高速」、1以上～2.5 秒の場合は「平均」、2.5 秒以上の場合は「低速」とされています。

First Contentful Paint（FCP）については下記の記事にて詳しく解説していますので、ぜひ参考にしてください。

＞＞FCP（First Contentful Paint）とは？改善方法・低下原因・測定方法を解説

First Input Delay（FID）

FID（First Input Delay）とは、ユーザーがページで行う最初の操作から、第一印象で感じるサイトの「インタラクティブ性や反応速度を測る指標」です。

ここでいう「最初の操作」とは、タップやクリックなどの動作を表します。ズームやスクロールといった動作はこれに含みません。

FIDの判定基準は、ユーザーが最初の操作を行ってから100ms（ミリ秒)未満が「良い」、300ms以下であれば「要改善」、300msを超えた場合は「不十分」とされています。

First Input Delay（FID）については下記の記事にて詳しく解説していますので、ぜひ参考にしてください。

＞＞FID（First Input Delay）とは？低下の原因や測定、TBTの改善方法について解説

Largest Contentful Paint（LCP）

LCP（Largest Contentful Paint）とは、ユーザーがページ内にアクセスしてから、メインコンテンツを見ることができるようになるまでの時間を指し、ユーザーの認識としての「ページ表示速度を測る指標」となります。

「どのようなコンテンツがメインコンテンツである」とは定義することが難しいのが現状で、ページ内でメインとなる画像や動画、見出しなどがこれに当たると考えられています。

LCPの判断基準は秒数で表され、ページ読み込みから2.5秒未満なら「良い」、4秒以下なら「要改善」、4秒を超えると「不十分」と判断されます。

Largest Contentful Paint（LCP）については下記の記事にて詳しく解説していますので、ぜひ参考にしてください。

＞＞LCP(Lrgest Contentful Paint)とは？改善方法・低下原因・測定方法を解説

Cumulative Layout Shift（CLS）

CLS（Cumulative Layout Shift）とは、ページコンテンツにおける「視覚的な安定性を示す指標」です。 CLSの評価は0~1の数値で表され「0」は移動なし、「1」は移動量が最大であることを示します。

判断基準としては、0.1未満が「良い」、0.25以下は「要改善」、0.25を超えると「不十分」と判断され「ズレが生じた表示領域の比率 × 距離の比率」で計算されると言われています。

Cumulative Layout Shift（CLS）については下記の記事にて詳しく解説していますので、ぜひ参考にしてください。

＞＞CLS（Cumulative Layout Shift）とは？低下の原因や測定方法、改善方法について解説

ラボデータ

ラボデータでは、速度インデックスなどのチェック項目が色付けされた表を確認することができます。

• 緑マーク：速い
• オレンジマーク：普通
• 赤マーク：遅い

上記3種類に色分けされるため、ひと目で改善点が分かります。赤マークのついた項目から改善し、すべてが緑マークとなるように改善することが重要です。

Google Page Speed Insightsの各項目を最適化する7つの方法

ここでは、Google Page Speed Insightsそれぞれの項目を最適化する方法を7つご紹介します。

• 画像の最適化
• 表示可能コンテンツの優先順位を決める
• リンク先のリダイレクトを使用しない
• サーバーが早く応答するよう設定
• 圧縮を有効にする
• ブラウザのキャッシュを有効にする
• JavaScript/CSS/HTML を縮小する

それぞれの方法を1つずつ解説していきます。

画像の最適化　

コンテンツのページ内にある画像が、最適化されているかどうかが評価項目となります。

• 最適化されたリソースのダウンロード
• 画像圧縮ツール
• デスクトップツール
• タスクランナー

上記4つの方法で最適化を図ります。

画像の最適化には、無料で使用できる画像圧縮ツールが有用です。Optimizillaなどを状況に応じて使いわけられることに加えて、「jpeg」などの比較的サイズの軽い形式に変換することもできます。

また、デスクトップツールを使用しての画像圧縮も可能です。Windows PCを使用されている場合は「Caesium」がおすすめであり、Macを使用されている場合は「ImageOptim」などが代表的なものとなります。

表示可能コンテンツの優先順位を決める

ファーストビューを表示するためのデータ量が大きすぎると評価が下がります。メインとなる情報のカラムを優先することが大切です。

リンク先のリダイレクトを使用しない

必要以上にリダイレクトが設定されていないかを確認しましょう。サイトを移転する際や、URLの変更などで、リダイレクトが複数設定されている場合があります。

不要なリダイレクトは表示速度の低下に繋がってしまうため、上述のようにサイトの移転やURLの変更時のみなど、リダイレクトは必要最低限の場面でのみ使用するようにしましょう。

サーバーが早く応答するよう設定する

Google Page Speed Insightsでは、サーバーがHTMLを読み込むのに必要な時間も評価されます。サーバーの応答速度は、Googleは0.2秒以内、LightHouseでは0.6秒以内が推奨されています。

実際のところ、サーバーの応答が遅くなる原因は様々であり、知見がない方が改善をするのは困難であることも事実です。

従って、まずは他の項目を最適化することから始めましょう。そこから、サーバーの応答設定を速めることが必要であると判断した場合は、エンジニア等に相談してみることをおすすめします。

圧縮を有効にする

Google Page Speed Insightsでは、Webサーバー上で、HTMやCSSなどのリソースが圧縮されているかも評価される項目となります。ここでの注意点として理解しておくべきことは、サーバの表示速度を最適化したとしても、サーバーによっては逆にスピードダウンしてしまう場合があることです。

サーバー周りに詳しいエンジニアとしての知見がある方の力を借りる必要があるため、こちらも実装する際は必ずエンジニアに相談するようにしましょう。

ブラウザのキャッシュを有効にする

サーバー側で、ブラウザのキャッシュ期間がはっきり設定されているかも評価対象となります。ブラウザのキャッシュを有効にするには、サーバーで「Expires」を設定することで修正が可能になります。

JavaScript/CSS/HTML を縮小する

余計なスペースや改行を減らすことが、JavaScript/CSS/HTMLの縮小に繋がり、評価の向上となります。ここでは4つの方法をご紹介します。

• 最適化されたリソースのダウンロード
• 縮小ツールを使用する
• プラグインの導入

「画像の最適化」と同様に、リソースのダウンロードをするのが最も簡単です。また、HTML Minifierなどの縮小ツールを使用すれば、手間をかけずに圧縮することができます。

まとめ：WEBサイト表示高速化のサポートを承ります

本記事では、Google Page Speed Insightsの使い方や、各項目を最大化する方法を解説してきました。SEO対策を万全の状態に仕上げるためにも、サイトの表示スピードをUPさせることは非常に重要です。

まずは、本記事でご紹介したGoogle Speed Insightsの使い方を理解し、効果的にサイト分析ができるようにしましょう。

しかし、Google Page Speed Insightsを使用しても、「何から始めて良いのかわからない」などの悩みを抱える方は多いのではないでしょうか。また、サーバー周りを改善する必要もあり、万が一のことを考えると、なかなか改善に手を出せない方と悩まれている方も多いかと思います。

弊社では、「WEBサイト表示スピード最適化」のサービスをご用意しています。詳細かつ網羅的なチェックを行い、施策に関するアドバイスをご提供しています。

まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

WEBサイト表示スピード高速化サービス資料 無料ダウンロードする

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス　『HP爆速くん for WP』の詳細はコチラ