最大コンテンツの表示

<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にする。

次のとき、largest contentful paint を報告するように求められた場合、Document document、paint timing info paintTimingInfo、順序付き集合のpending image records paintedImages、および順序付き集合の要素 paintedTextNodes を受け取った場合、以下の手順を実行する：

注記: paintedImages 内の各 pending image record および paintedTextNodes 内のテキスト要素は、mark paint timing から、要素が描画可能（すなわち opacity・visibility がある）かつ contentful（画像リソースまたはブロックフォントが十分ロードされている）の最初の描画で、正確に一度だけ報告される。

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

2. window の has dispatched scroll event または has dispatched input event のいずれかが true なら、return する。

3. currentSize を document の largest contentful paint size とする。

4. currentWidth を document の largest contentful paint width とする。

5. currentHeight を document の largest contentful paint height とする。

6. largestSize を currentSize とする。

7. newCandidate を null とする。

8. 各 record を paintedImages について:

   1. imageElement を record の element とする。

   2. imageElement が paint timing で公開されていない場合（document に対して）、continue。

   3. intersectionRect を、imageElement を target、viewport を root として intersection rect アルゴリズムを使用して得られる値とする。

   4. result を、imageElement、intersectionRect、および record のrequest を指定した effective visual size の結果とする。

   5. result が null なら、continue。

   6. result の size が largestSize 以下なら、continue。

   7. largestSize に result の size をセットする。

9. newCandidate を新しい largest contentful paint candidate（以下の値をセット）にする：

   1. element は imageElement とする。

   2. size は result の size とする。

   3. width は result の width とする。

   4. height は result の height とする。

   5. request は record の request とする。

   6. loadTime は record の loadTime とする。

10. 各 textNode を paintedTextNodes について:

    1. textNode が paint timing で公開されていない場合（document に対して）、continue。

    2. textNode の alpha channel 値 <=0 または opacity 値 <=0 の場合：

       1. textNode の text-shadow 値が none、 textNode の stroke-color 値が transparent かつ textNode の stroke-image 値が none なら、continue。

    3. intersectionRect を、すべての Text ノードの textNode の 所有テキストノードの集合 の border box の和集合と、visual viewport との共通部分とする。

    4. result を、textNode、intersectionRect、および null を与えた effective visual size の結果とする。

    5. result が null なら、continue。

    6. result の size が largestSize 以下なら、continue。

    7. largestSize に result の size をセットする。

    8. newCandidate を新しい largest contentful paint candidate（以下の値でセット）にする：

       1. element は textNode とする。

       2. size は result の size とする。

       3. width は result の width とする。

       4. height は result の height とする。

       5. request は null とする。

       6. loadTime は 0 とする。

11. newCandidate が null でなければ：

    1. currentSize が 0 より大きい場合：

       1. newCandidate の width から currentWidth を引いた値が 3 以下かつ newCandidate の height から currentHeight を引いた値が 3 以下なら、return。

    2. LargestContentfulPaint エントリを作成し、newCandidate、paintTimingInfo、document を用いる。

入力

intersectionRect、DOMRectReadOnly

imageRequest、Request または null

element、要素

document、Document

出力

effective visual size result、これはstructであり、要素として size（数値）、width（数値）、および height（数値）を持ち、Largest Contentful Paint に報告する有効な見た目のサイズ・幅・高さ（ピクセル単位）を表す。要素がLCP候補であってはならない場合は null。

1. width を intersectionRect の width（最大整数に切り上げ）とする。

2. height を intersectionRect の height（最大整数に切り上げ）とする。

3. size を width * height とする。

4. root を document の browsing context の top-level browsing context の active document とする。

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

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

7. size が rootWidth × rootHeight に等しい場合、null を返す。

8. imageRequest が null でなければ、画像の位置と拡大率を調整するために次を実行：

   1. imageRequest の response のバイト数が size * 0.004 より小さい場合は null を返す。

      注記: このヒューリスティックは画像リソースがユーザーにとって十分コンテンツフルかどうかを判定する。転送されたファイルサイズと実際に生成されるピクセル数（デコードやスケーリング後）を比較する。ごく少量のバイトで大量のピクセルをエンコードしている画像は通常、低コンテンツな背景やグラデーションなどであり、LCP候補としない。

   2. concreteDimensions を imageRequest の concrete object size（element の中）とする。

   3. visibleDimensions を concreteDimensions とし、位置は object-position や background-position、element の content box で調整する。

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

   4. clientContentRect を visibleDimensions（element の transform を適用したもの）を含む最小の DOMRectReadOnly とする。

   5. intersectingClientContentRect を clientContentRect と intersectionRect の共通部分とする。

   6. width を intersectingClientContentRect の width（最大整数に切り上げ）とする。

   7. height を intersectingClientContentRect の height（最大整数に切り上げ）とする。

   8. size を width * height にセットする。

      注記: これによって要素の装飾ではなく、画像自身とのみ交差することを保証する。

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

   10. naturalArea が 0 なら null を返す。

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

   12. scaleFactor を boundingClientArea / naturalArea とする。

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

9. effective visual size result を返す。size は size、width は width、 height は height とする。

入力

candidate、largest contentful paint candidate

paintTimingInfo、paint timing info

document、Document

出力

なし

1. document の largest contentful paint size を、 candidate の size で設定する。

2. document の largest contentful paint width を candidate の width で設定する。

3. document の largest contentful paint height を candidate の height で設定する。

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

5. もし candidate の request が null でなければ、 url を candidate の request の request URL で設定する。

6. entry を新しい LargestContentfulPaint エントリ（document の relevant realm で、paint timing info が paintTimingInfo）にし、下記の値を設定する：

   • size を candidate の size で設定、

   • url を url で設定、

   • id を candidate の element の element id で設定、

   • loadTime を candidate の loadTime で設定、

   • そして element を candidate の element で設定。

7. PerformanceEntry をキューする entry。