最大コンテンツの表示

<img src="large_image.jpg">
<p id='large-paragraph'>This is large body of text.</p>
...
<script>
const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  let lastEntry = perfEntries[perfEntries.length - 1];
  // Process the latest candidate for largest contentful paint
});
observer.observe({entryTypes: ['largest-contentful-paint']});
</script>

[Exposed=Window]
interface LargestContentfulPaint : PerformanceEntry {
    readonly attribute DOMHighResTimeStamp loadTime;
    readonly attribute DOMHighResTimeStamp renderTime;
    readonly attribute unsigned long size;
    readonly attribute DOMString id;
    readonly attribute DOMString url;
    readonly attribute Element? element;
    [Default] object toJSON();
};

LargestContentfulPaint includes PaintTimingMixin;

1. thisのelementがpaint timing用に公開されていない場合、nullを返す。

2. thisのelementを返す。

event dispatchアルゴリズムを次のように修正します。

ステップ1の直後に次のステップを追加：

• targetのrelevant global objectがWindow オブジェクトであり、eventのtype がscroll であり、かつそのisTrusted がtrueであれば、targetのrelevant global objectのスクロールイベントがディスパッチされたかをtrueにする。

最大コンテンツの表示を報告する際は、Document document、paint timing info paintTimingInfo、 順序付きセット の pending image records paintedImages、および順序付きセット の 要素 paintedTextNodesを引数に、次を実行：

1. paintedImages の各 record について：

   1. imageElement を record のelementとする。

   2. imageElement が paint timing用に公開されていなければ、documentを与えて続行。

   3. requestをrecordのrequestとする。

   4. candidateを (imageElement, request) とする

   5. intersectionRect を intersection rectアルゴリズムの結果（targetにimageElement、rootはviewport）とする。

   6. Potentially add a LargestContentfulPaint entryにcandidate、 intersectionRect、paintTimingInfo、recordのloadTime、documentを渡す。

2. paintedTextNodes の各 textNode について、

   1. もし textNode が paint timing 用に公開されていなければ、documentを与えて続行。

   2. もし textNode の アルファチャンネル の値が0以下、または 不透明度 の値が0以下の場合：

      1. もし textNode の text-shadow の値が none、 textNode の stroke-color の値が 透明 かつ textNode の stroke-image の値が none なら、続行。

   3. candidate を (textNode, null) とする

   4. intersectionRect を空の矩形とする。

   5. 各 Text ノード text を textNode の 所有テキストノードの集合から取り出して：

      1. intersectionRect を text のボーダーボックスと intersectionRect をともに含む最小の矩形に拡張する。

   6. intersectionRect をビジュアルビューポートと交差させる。

   7. LargestContentfulPaint エントリーの追加検討を candidate、intersectionRect、paintTimingInfo、0、document で実行する。

入力

intersectionRect、DOMRectReadOnly

imageRequest、Request

element、要素

document、Document

出力

Largest Contentful Paintとして報告するサイズ（ピクセル単位）。要素がLCPの候補でない場合はnull。

1. widthをintersectionRectのwidthとする。

2. heightをintersectionRectのheightとする。

3. sizeをwidth * heightとする。

4. rootをdocumentの閲覧コンテキストの最上位閲覧コンテキストのアクティブドキュメントとする。

5. rootWidthをrootのvisual viewportの横幅（スクロールバーを除く）とする。

6. rootHeightをrootのvisual viewportの縦幅（スクロールバーを除く）とする。

7. sizeがrootWidth×rootHeightと等しければ、nullを返す。

8. imageRequestがlargest contentful paintの候補として適格でなければnullを返す。

9. imageRequestがnullでない場合は、画像の位置やアップスケーリングに対応するため次を実行：

   1. concreteDimensionsを、imageRequestのconcrete object size（element内）とする。

   2. visibleDimensions を concreteDimensions に、 object-position または background-position および element の content box による位置調整を加えたものとする。

   備考: これらのアルゴリズムの一部はCSSで厳密には定義されていません。期待される結果は、element内の画像の実際の位置とサイズをDOMRectReadOnlyとして得ることです。

   1. clientContentRectをDOMRectReadOnlyのうち、 visibleDimensionsにelementのtransformを適用した最小矩形とする。

   2. intersectingClientContentRectをclientContentRectとintersectionRectの交差部分とする。

   3. sizeをintersectingClientContentRectのwidth * intersectingClientContentRectのheightとする。

   備考: これは要素の装飾部分ではなく画像そのものとの交差だけを考慮するためです。

   1. naturalAreaをimageRequestのnatural width * imageRequestのnatural heightとする。

   2. naturalAreaが0の場合はnullを返す。

   3. boundingClientAreaをclientContentRectのwidth * clientContentRectのheightとする。

   4. scaleFactorをboundingClientArea / naturalAreaとする。

   5. scaleFactorが1より大きければ、sizeをscaleFactorで割る。

10. sizeを返す。

入力

candidate、largest contentful paint候補

intersectionRect、DOMRectReadOnly

paintTimingInfo、paint timing info

loadTime、DOMHighResTimestamp

document、Document

出力

なし

1. documentのcontent setがcandidateを含んでいればリターン。

2. appendでcandidateをdocumentのcontent setに追加。

3. windowをdocumentのrelevant global objectとする。

4. windowのスクロールイベントがディスパッチされたかまたは入力イベントがディスパッチされたかがtrueなら、リターン。

5. sizeをcandidateのelementにintersectionRectを与えて実効視覚サイズで算出。

6. sizeがdocumentのlargest contentful paint size 以下ならリターン。

7. urlを空文字列とする。

8. candidateのrequestがnullでなければ、 urlをcandidateのrequestの request URLにする。

9. idをcandidateのelementのelement idとする。

10. contentInfoをcontentInfo["size"] = size, contentInfo["url"] = url, contentInfo["id"] = id, contentInfo["loadTime"] = loadTime, contentInfo["element"] = candidateのelementとするmapとする。

11. LargestContentfulPaintエントリーの作成を contentInfo, paintTimingInfo, documentで実行する。

入力

contentInfo、map

paintTimingInfo、paint timing info

document、Document

出力

なし

1. documentのlargest contentful paint sizeに contentInfo["size"]をセットする。

2. entryを新しいLargestContentfulPaint エントリーとする。documentのrelevant realmで、paint timing infoはpaintTimingInfo、 さらに

   • size ← contentInfo["size"]

   • url ← contentInfo["url"]

   • id ← contentInfo["id"]

   • loadTime ← contentInfo["loadTime"]

   • およびelement ← contentInfo["element"]

3. PerformanceEntryキュー entryを呼び出す。