viewport内のLargest Contentの初期読み込みにかかる時間

「一番大きいコンテンツがuserにとって重要なものであろう」ということが前提にある

評価

スコアの値は小さいほど良い

viewport内のLargest Contentとは ref

first viewでのviewport内のみが対象

もしLargest Contenstの一部がviewportからはみ出ていたとしても、viewport内の部分のみが対象になる

CSSによるmargin, padding, borderは考慮されない

LCPで考慮される要素は以下のみ

<svg>内の<img>

ポスター画像を使用した<video>

url()を介してloadされた背景画像を持つ要素

テキストノードまたは他のインラインレベルのテキスト要素の子を含むblock-level element

よくわからん

逆に言えば、これらの要素を一切使わずにサイトを作れば100%クリアするってこと？

計測する

これに関してはLighthouseの指摘であまり親切に教えてくれない

まずここで良いのか悪いのか確認しておく

これはYouTubeの例、左下がLCPの指摘。悪い

Largest Contentの調べ方でLargest Contentを特定する

速く出るように頑張る

Search Consoleで確認する

ここから「レポートを開く」とかでみると、LCPの問題がある場合、いろいろ表示されるので、そこから詳細が見れる

2021では、First Contentful Paint(FCP)も評価の対象になるらしい