PageSpeed Insights

PageSpeed Insights

ドキュメント:

PageSpeed Insights | Google Developers [公式]

導入

参考:

PageSpeed Insights API を使ってみる | Google Developers [公式]

指標

  • LCPLargest Contentful Paint
  • FIDFirst Input Delay
  • CLSCumulative Layout Shift
  • FCPFirst Contentful Paint
  • INPInteraction to Next Paint
  • TTFBTime to First Byte

改善できる項目 (Opportunities)

  • 一意なアクセスキー
  • HTTP/2 の使用
  • 使用していない CSS の削減
  • 次世代フォーマットでの画像の配信
  • オフスクリーン画像の遅延読み込み
  • 過大なネットワークペイロードの回避
  • レンダリングを妨げるリソースの除外
  • CSS の最小化
  • JavaScript の最小化
  • アニメーションコンテンツでの動画フォーマットの使用
  • 使用していない JavaScript の削減
  • 静的なアセットでの効率的なキャッシュポリシーの使用
  • 効率的な画像フォーマット
  • テキスト圧縮の有効化
  • 適切なサイズの画像
  • 最初のサーバー応答時間

診断 (Diagnostics)

FCP

コンテンツが最初に表示されるまでの時間

  • ウェブフォント読み込み中のテキストの表示
  • クリティカルリクエストチェーンの回避
TBT

合計ブロック時間

  • 第三者コードの影響
  • メインスレッド処理の最小化
  • JavaScript の実行にかかる時間の低減
  • 過大な DOM サイズの回避
  • 長時間実行されているタスク
LCP

最大視覚コンテンツが表示されるまでの時間

  • ウェブフォント読み込み中のテキストの表示
  • 過大なネットワークペイロードの回避
  • クリティカルリクエストチェーンの回避
CLS

累積レイアウトシフト

  • レイアウトの大きな変化
  • 合成されていないアニメーションの使用

モバイル分析

参考:

PageSpeed Insights でのモバイル分析 | Google Developers [公式]

リフロー

参考:

ブラウザのリフローを最小限にする | Google Developers [公式]

モバイル

2021年6月から、モバイル向け Google 検索でページエクスペリエンスがランキング要因として導入された。

参考:

ページエクスペリエンスアップデートは6月中旬から段階的に導入開始 | 海外 SEO 情報ブログ

ページの読み込み速度をモバイル検索のランキング要素に使用します | Google Developers [公式]

デスクトップ (PC)

2022年2月から、デスクトップ向け Google 検索でページエクスペリエンスがランキング要因として導入された。

参考:

2022年2月よりデスクトップにもページエクスペリエンスをランキングシグナルに展開! | デジタルマーケティングブログ

ページエクスペリエンスのランキングを PC 検索にも拡大 | 海外 SEO 情報ブログ

パソコン向けページエクスペリエンスによるランキングの導入スケジュール | Google Developers [公式]

非公開ページをテストする

参考:

公開前のページでも PageSpeed Insights する .htaccess の記述例 – Qiita

公開前サイトでも PageSpeed Insights したい! リリース前から計測するための Web サーバー設定テクニック | アイデアマンズブログ

ユーザーエージェント

ユーザーエージェント文字列に Chrome-Lighthouse が含まれている。

参考:

PageSpeed Insights はどこからどのようにリクエストを送るのか – Qiita

What is the name of the Google PageSpeed User Agent? – Stack Overflow

API

参考:

PageSpeed Insights API を使ってみる | Google Developers [公式]

FAQ

よくある質問 – PageSpeed Insights | Google Developers [公式]

ドキュメント

PageSpeed Insights | Google Developers [公式]

リンク

Make the Web Faster | Google Developers [Official]

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA