表示速度改善レポート

確認する項目

• Largest Contentful Paint

  通信を制限したスマートフォンで、メインのコンテンツが表示されるまでの時間を、2.5秒のしきい値と比較します。

• レイアウトシフト

  読み込み中にコンテンツが動いてしまわないかを、0.1のしきい値と比較します。

• Total Blocking Time

  スクリプトがページの応答を妨げている時間です。Interaction to Next Paintの代わりとなるラボでの指標です。

• 実ユーザーデータ

  サイトにGoogleのChrome UX Reportに掲載されるだけのトラフィックがある場合、そこから75パーセンタイルのLCP、INP、CLSを示します。

• 重すぎる画像と大きすぎる画像

  150 KBを超える画像、表示サイズよりはるかに大きい画像、遅延読み込みされているメイン画像を確認します。

• ページの重さとリクエスト数

  合計ダウンロードサイズ、リクエスト数、そのうち第三者から読み込まれる割合を確認します。

• レンダリングを妨げるファイル

  最初の描画を遅らせるスクリプトとスタイルシートを確認します。

• Problem

  The main content appears slowly on phones

  Largest Contentful Paint reached {time} on {path} in our phone test (good is under 2.5 s).{"time":"{s} s{\"s\":{\"$num\":8.3,\"digits\":1}}","path":"/products/trail-daypack"}

  Fix: Start with the largest image or banner at the top of the page (see the findings below).

• Problem

  The main image is lazy-loaded

  On {n} page(s) the largest image at the top has {attribute}, which delays it.{"n":1,"attribute":"loading=\"lazy\""}

  Fix: Load the first, largest image eagerly and give it high fetch priority; keep lazy loading for images further down.

• Problem

  Images larger than they need to be

  {n} image(s) are heavy (over 150 KB) or much wider than they are shown.{"n":2}

  Fix: Upload product and banner images at sensible sizes (around 2000 px wide is plenty) instead of camera originals.