最大コンテンツの表示

<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）場合、null を返す。

2. this の element を返す。

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

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

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

Document document、描画タイミング情報 paintTimingInfo、順序付き 集合である保留中の画像レコード paintedImages、および順序付き 集合である要素 paintedTextNodesを与えて、最大コンテンツ描画を報告するよう 求められた場合は、次の手順を実行します。

注記: paintedImages内の各保留中の画像レコードと、 paintedTextNodes内の各テキスト要素は、その要素が描画可能（すなわち、不透明度と可視性を持つ）かつ コンテンツを含む（すなわち、画像リソースまたはブロッキングフォントが十分に読み込まれている）とみなされる 最初の描画について、描画タイミングを記録する処理から正確に一度だけ報告されます。

1. windowを、documentの関連する大域オブジェクトとします。

2. windowのスクロールイベントを配送済みまたは入力イベントを配送済みのいずれかが true の場合は、返ります。

3. newCandidateを、document、paintedImages、 paintedTextNodes、およびdocumentの現在の最大コンテンツ描画 候補を与えて、新しい最大コンテンツ描画候補を 算出する結果とします。

4. newCandidateが null の場合は、返ります。

5. documentの現在の最大コンテンツ描画 候補をnewCandidateに設定します。

6. entryを、newCandidate、paintTimingInfo、および documentを使用してLargestContentfulPaint エントリーを作成する結果とします。

7. entryであるPerformanceEntryをキューに入れます。

Document document、順序付き集合である保留中の画像レコード paintedImages、順序付き 集合である要素 paintedTextNodes、および最大 コンテンツ描画候補または null であるcurrentCandidateを与えて、新しい最大 コンテンツ描画候補を算出するには、次の手順を実行します。この手順は、最大コンテンツ描画候補または null を返します。

1. currentSizeを、currentCandidateが null でない場合は currentCandidateのサイズとし、それ以外の場合は 0 とします。

2. largestSizeをcurrentSizeとします。

3. newCandidateを null とします。

4. paintedImagesの各recordについて反復します。

   1. imageElementを、recordの要素とします。

   2. documentを与えたとき、imageElementが描画タイミングに公開されていない場合は、 続行します。

   3. intersectionRectを、imageElementをターゲット、ビューポートをルートとして 交差矩形アルゴリズムを使用したときに返される値とします。

   4. resultを、intersectionRectおよびrecordのリクエストを与えたときの imageElementの実効視覚サイズとします。

   5. resultが null の場合は、続行します。

   6. resultのサイズが largestSize以下の場合は、続行します。

   7. largestSizeを、resultのサイズに設定します。

   8. newCandidateを、次の値を持つ新しい最大コンテンツ描画 候補に設定します。

      1. 要素を imageElementに設定します。

      2. サイズを resultのサイズに設定します。

      3. 幅を resultの幅に設定します。

      4. 高さを resultの高さに設定します。

      5. リクエストを recordのリクエストに設定します。

      6. loadTimeを recordのloadTimeに設定します。

5. paintedTextNodesの各textNodeについて反復します。

   1. documentを与えたとき、textNodeが描画タイミングに公開されていない場合は、 続行します。

   2. textNodeのアルファチャンネル値が <=0 であるか、不透明度 値が <=0 の場合:

      1. textNodeのtext-shadow値が none であり、 textNodeのstroke-color値がtransparentであり、かつtextNodeのstroke-image値が none の場合は、続行します。

   3. intersectionRectを、textNodeの所有するテキストノードの集合内のすべてのText ノードの境界ボックスの和集合を、視覚ビューポートと交差させたものとします。

   4. resultを、intersectionRectおよび null を与えたときの textNodeの実効視覚サイズとします。

   5. resultが null の場合は、続行します。

   6. resultのサイズが largestSize以下の場合は、続行します。

   7. largestSizeを、resultのサイズに設定します。

   8. newCandidateを、次の値を持つ新しい最大コンテンツ描画 候補に設定します。

      1. 要素を textNodeに設定します。

      2. サイズを resultのサイズに設定します。

      3. 幅を resultの幅に設定します。

      4. 高さを resultの高さに設定します。

      5. リクエストを null に設定します。

      6. loadTimeを 0 に設定します。

6. newCandidateが null でなく、かつcurrentSizeが 0 より大きい場合:

   1. newCandidateの幅から currentCandidateの幅を引いた値が 3 以下であり、かつnewCandidateの高さから currentCandidateの高さを引いた値が 3 以下である場合は、null を返します。

7. newCandidateを返します。

入力

intersectionRect、DOMRectReadOnly

imageRequest、Request または null

element、要素

document、文書

出力

実効視覚サイズ結果。これは、項目としてサイズ（数値）、幅（数値）、および高さ（数値）を持つ構造体であり、最大コンテンツ描画について報告する実効視覚サイズ、幅、および高さを ピクセル単位で表します。または、要素を LCP 候補とすべきでない場合は null です。

1. widthを、intersectionRectのwidthを 最も近い整数に切り上げた値とします。

2. heightを、intersectionRectのheightを 最も近い整数に切り上げた値とします。

3. sizeをwidth * heightとします。

4. rootを、documentの閲覧コンテキストのトップレベル閲覧コンテキストのアクティブな文書とします。

5. rootWidthを、スクロールバーを除いたrootの視覚ビューポートの幅とします。

6. rootHeightを、スクロールバーを除いたrootの視覚ビューポートの高さとします。

7. sizeがrootWidthとrootHeightの積に等しい場合は、 null を返します。

8. imageRequestが null でない場合は、画像の位置と拡大を調整するために 次の手順を実行します。

   1. imageRequestの応答のバイト単位のコンテンツ長が size * 0.004 未満の場合は、null を返します。

      注記: このヒューリスティックは、 画像リソースに、利用者がコンテンツを含むものとして認識できるだけの十分なデータが含まれているかどうかを 検査します。転送されたファイルサイズと、復号および画像の拡大縮小を適用した後に実際に生成される ピクセル数を比較します。非常に少ないバイト数で極めて多数のピクセルを符号化する画像は、一般に、 コンテンツの少ない背景やグラデーションなどであり、LCP 候補とはみなされません。

   2. concreteDimensionsを、element内における imageRequestの具体的なオブジェクトサイズとします。

   3. visibleDimensionsを、object-positionまたはbackground-positionと、 elementのコンテンツボックスによる位置指定を考慮して調整した concreteDimensionsとします。

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

   4. clientContentRectを、elementの変換を適用した visibleDimensionsを包含する最小のDOMRectReadOnlyとします。

   5. intersectingClientContentRectを、 clientContentRectとintersectionRectの交差部分とします。

   6. widthを、intersectingClientContentRectのwidthを 最も近い整数に切り上げた値に設定します。

   7. heightを、intersectingClientContentRectのheightを 最も近い整数に切り上げた値に設定します。

   8. sizeをwidth * heightに設定します。

      注記: これにより、 要素の装飾ではなく、画像自体とのみ交差することが保証されます。

   9. naturalAreaをimageRequestの自然幅 * imageRequestの自然高さとします。

   10. naturalAreaが 0 の場合は、null を返します。

   11. boundingClientAreaをclientContentRectのwidth * clientContentRectのheightとします。

   12. scaleFactorをboundingClientArea / naturalAreaとします。

   13. scaleFactorが 1 より大きい場合は、sizeを scaleFactorで除算します。

9. 実効視覚サイズ結果を返します。そのサイズをsizeに、幅をwidthに、 高さを heightに設定します。

入力

candidate、最大コンテンツ描画候補

paintTimingInfo、描画タイミング情報

document、Document

出力

LargestContentfulPaint

1. urlを空文字列とします。

2. candidateのリクエストが null でない場合、 urlをcandidateのリクエストのリクエスト URLに設定します。

3. entryを、documentの関連するレルムを持ち、その描画タイミング情報がpaintTimingInfoである、 新しいLargestContentfulPaint エントリーとし、さらに次のように設定します。

   • size をcandidateのサイズに設定し、

   • url をurlに設定し、

   • id をcandidateの要素の要素 IDに設定し、

   • loadTime をcandidateのloadTimeに設定し、

   • さらに、element をcandidateの要素に設定します。

4. entryを返します。