LCP（Largest Contentful Paint）
とは何か
LCP（Largest Contentful Paint）とは、「Webページのメインコンテンツがどれだけ速くロードされ、ユーザがそれを視認できるか」を計測することを企図した指標。
ページ読み込みのパフォーマンスを計測する指標であり、「見た目上の表示速度」を測る指標の1つである。
具体的には、「現在表示されている画面範囲（ビューポート）内で最も大きな画像もしくはテキストブロックが表示されるまでの、初期ロード開始時点からの経過時間」とされている。
LCPの目標タイムとしては、2.5秒以下が望ましいとされる。
また、このタイムをほとんどのユーザで体験できることを目指すのであれば、ページロードにおいて75パーセンタイルに当たるところが良い閾値となるとのこと。
「最も大きな画像もしくはテキストブロック」というのは、何を以って決まるのか
まず、対象となる要素は
-
<img>要素 -
<svg>内の<image>要素 -
<video>要素（poster画像が指定されているもの） - CSSの
url()関数でbackground画像が指定されている要素 - テキストノードもしくは他のインラインレベルテキスト要素を子に含むブロックレベル要素
と説明されており、
今後の調査の進捗次第で<svg>, <video>などの要素が対象に追加される可能性があるとのこと。
そして、これらを初めから対象に含んでおかなかったのは、「始めはなるべくシンプルにしておきたかったから、意図的に除外した」とのこと。
また「最も大きい」の判断基準は、画面内のユーザに見えてる範囲内の大きさであり、画面外にはみ出たり、クリップされたり、インラインスクロールで見えない部分はサイズ判定の対象外となる。
画像要素では、もし表示上リサイズされていた場合、リサイズ前と後のサイズのうち小さい方のサイズが対象とされる。
テキスト要素では、テキストノードのサイズのみが考慮され、全てのテキストノードを内包する最小の矩形のサイズとなる。
そして全ての要素に共通する基準として、CSSによるいずれのmargin, padding, borderに起因するサイズは一切考慮されない。
他の読み込み時間系指標との比較
loadおよびDOMContentLoaded
Older metrics like load or DOMContentLoaded are not good because they don't necessarily correspond to what the user sees on their screen. And newer, user-centric performance metrics like First Contentful Paint (FCP) only capture the very beginning of the loading experience. If a page shows a splash screen or displays a loading indicator, this moment is not very relevant to the user.
loadやDOMContentLoadedのような古い指標は好ましくなくて、というのもそれらはユーザが実際に画面上で体感するものとは必ずしも一致しないから。そして新たな、ユーザ中心のパフォーマンス指標であるFirst Contentful Paint (FCP)はそのローディング体験の最初期のみを対象としている。もしページがスプラッシュスクリーンやローディングインジケーターを表示させている場合、この間はユーザにとってとても無価値な時間となる。
（かつてGoogleがオススメしていた）First Meaningful Paint (FMP)やSpeed Index (SI)
In the past we've recommended performance metrics like First Meaningful Paint (FMP) and Speed Index (SI) (both available in Lighthouse) to help capture more of the loading experience after the initial paint, but these metrics are complex, hard to explain, and often wrong—meaning they still do not identify when the main content of the page has loaded.
かつて我々（Google）はパフォーマンス指標としてFirst Meaningful Paint (FMP)およびSpeed Index (SI) (both available in Lighthouse)を推奨し、それが初期描画後の読み込み体験についてより多くを知る手助けになると考えていた。しかしこれらの指標は複雑で、説明し難く、またそれらはページのメインコンテンツのロード時間を示していないという点でしばしば意味上の齟齬があった。