Google PageSpeed Insightsでサイトパフォーマンス(速度・最適化)をチェック!
2018.06.05

Google PageSpeed Insightsでサイトパフォーマンス(速度・最適化)をチェック!

Googleのアナウンスによれば、2018年7月からサイト表示速度を検索ランキング要因に使う予定となっています。2018年3月27日、モバイルファーストインデックスを本格始動したことをGoogleが公式に発表したりと、サイト制作に携わる私達は避けて通れない事象・変化が起きているといえます。

請け負っている企業サイトや個人管理しているサイトのパフォーマンス(速度・最適化)を改善する前に、効率よく対応できるように実際どのくらいのパフォーマンス(速度・最適化)なのかを、事前に知っておく必要があります。

そこでオススメなのが“PageSpeed Insights”になります。

PageSpeed Insights について

“PageSpeed Insights”はGoogleが提供しているサービスになります。
Google公式には以下のような記載があります。

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

PageSpeed Insights のルール

以下のルールを実行すれば、サイトパフォーマンス(速度・最適化)は上昇することになります。

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • スクロールせずに見える範囲のコンテンツのサイズを削減する
  • レンダリングを妨げる JavaScript を削除する

下記のリンクからルールの詳細を確認することができます。

PageSpeed Insights の画面

以下のような構成になっています。

PageSpeed Insights 画面1

操作は極めてシンプルなっています。「ウェブページの URL を入力」と表示されているフォームに調べたいURLを入力して、「分析」というボタンをクリック、それだけです。

PageSpeed Insights 画面2

バーが100%になったところで、分析結果が表示されます。
速度最適化という2つのスコアを確認できます。また、ページの読み込み分布ページの統計情報最適化についての提案適用済みの最適化が表示されます。

PageSpeed Insights 画面3

上の画像は「wowstyle.jp」を分析した結果ですが、「速度スコア」がUnavailableとなっており、分析できていません。「ページの読み込み分布」も表示されていませんね。これには理由があります。

速度スコア

Chrome ユーザー エクスペリエンス レポート(CrUX)のデータを組み入れて、ページに関する実際のパフォーマンス データを表示します。PSI レポートで確認できる指標は First Contentful Paint(FCP)と DOMContentLoaded(DCL)の 2 つです。

公式のよくある質問の回答に「ユーザー エクスペリエンス レポートのデータを使用しており、Google のウェブクローラが認識している代表的な URL について速度のデータが表示されます。」とあるので、有名なサイト・メジャーワードでの検索上位サイトは「速度スコア」が表示されるということのようです。最適化スコアについては、どのサイトでも分析が可能です。

ページの読み込み分布

CrUX データセット内での、ページの FCP と DCL の指標の分布が表示されます。各指標の分布は、「速い(上位の 1/3)」、「平均(中間の 1/3)」、「遅い(下位の 1/3)」の 3 カテゴリに分かれます。この分布は毎週更新されます。速度スコアが表示されるサイトのみ確認可能となっているようです。

最適化スコア

ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0~100 の値として算出します。次の 2 つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。スコアは「Good」、「Medium」、「Low」のいずれかに分類されます。この計算は、デベロッパーがページの外観と機能の変更を検討していないという前提で行われます。

ページの統計情報

ページのレンダリング ブロック リソースを読み込むために必要なラウンド トリップの回数、ページで使用されている合計バイト数、データセットのラウンド トリップ回数およびバイト数の中央値との比較が表示されます。ページの外観や機能の変更によって読み込みが速くなるかどうかを確認できます。

最適化についての提案

適用可能なおすすめの方法の一覧が表示されます。

適用済みの最適化

すでに対応できている一覧が表示されます。

興味のあるサイトを分析してみるのも、楽しいかもしれませんね。

余談ですが、自他ともに認めるマイナーサイトwowstyle.jpの分析結果は、「速度スコア」は予想通り結果表示されませんでしたが、「最適化スコア」はまずまずの数値となっており、ホッとしています。改善の余地は、まだまだあると思いますので、適宜修正をしていけたらと考えています。

WOWSTYLE 分析結果
REFERENCE