2022.04.18[Mon]

LCPはどのエレメントが判定されているか確認しないといけない

  • パフォーマンス

Core Web VitalsのLCPの対象は、特にトップ(ホーム)ページの訴求コンテンツなど入れ替わりが激しい場所だと変わってしまいやすいです。
上の画像では、テキスト部から背景画像に対象が移動しています。(赤枠部分)
このようにあからさまな場合はスコアも随分違うので気付きやすいですが、メインテキストとサブテキストであったり、テキストとボタンが入れ替わったりした場合は気付きづらいので注意が必要です。

単にスコアの数値だけでいえば、問題ない範囲でなら変わることに大きな害はありません(動画の場合ポスター画像で判定されるため良くなる場合も)。ただ、長期的な指標として蓄積している場合、意図した変更以外では、できるだけ同じ対象が判定され続けた方が好ましいです。不必要なものをLazy loadしたり、ファーストビューのエレメントの大きさ調整などしてをおくといいでしょう。


参考:
LCP解説 https://web.dev/lcp/
LCPエレメント確認方法 https://webenso.com/how-to-find-the-lcp-largest-contentful-paint-html-element/

Share

コンポーネントの処理時間を計測するHOC(Higher-Order Component)を作る自作の型定義ファイルに ".d.ts" と付けない方がいい