最大コンテンツの表示

<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のスクロールイベントが dispatch 済みまたは入力イベントが dispatch 済みのいずれかが true なら、終了する。

3. newCandidateSizeをdocumentの最大コンテンツ描画サイズとする。

4. newCandidateをnullにする。

5. paintedImagesの各 recordについて：

   1. imageElementをrecordの要素とする。

   2. もしimageElementが描画タイミング用に公開済みでない場合（documentを指定）、次へ。

   3. intersectionRectを、intersection rect algorithm により imageElementをターゲット、viewportをルートとして返される値とする。

   4. sizeをintersectionRectと recordのリクエストを用いた 効果的視覚サイズとする。

   5. もしsizeがnewCandidateSize以下なら次へ。

   6. newCandidateSizeをsizeに設定する。

   7. newCandidateに新しい最大コンテンツ描画候補を設定し、その 要素をimageElement, サイズをsize, リクエストを recordのリクエスト, ロード時間を recordのロード時間に設定する。

6. paintedTextNodesの各 textNodeについて：

   1. もしtextNodeが描画タイミング用に公開済みでない場合（documentを指定）、次へ。

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

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

   3. intersectionRectを、textNodeの所有テキストノード集合内の全ての Text ノードの border box の合計を ビジュアルビューポートと重ね合わせたものとする。

   4. sizeをintersectionRectとnullを用いた 効果的視覚サイズによって算出する。

   5. もしsizeがnewCandidateSize以下なら次へ。

   6. newCandidateSizeをsizeに設定する。

   7. newCandidateに新しい最大コンテンツ描画候補を設定し、その 要素をtextNode, サイズをsize, リクエストをnull、 ロード時間を0に設定する。

7. もしnewCandidateがnullでなければ：

   1. LargestContentfulPaintエントリーを作成する （newCandidate, paintTimingInfo, documentを指定）。

入力

intersectionRect、DOMRectReadOnly

imageRequest、Request または null

element、要素

document、文書

出力

Largest Contentful Paint に報告するサイズ（ピクセル単位）、または要素がLCP候補でなければnull。

1. width を intersectionRect の 横幅とする。

2. height を intersectionRect の 縦幅とする。

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 を imageRequest の 具体オブジェクトサイズ（element内）とする。

   3. visibleDimensions を concreteDimensionsの位置調整結果とし、object-position または background-position、elementのコンテンツボックスを使って調整。

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

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

   2. intersectingClientContentRect を clientContentRect と intersectionRect の重なり部分とする。

   3. size を intersectingClientContentRectの 横幅 * intersectingClientContentRectの 高さとする。

   注記: 画像本体のみと要素装飾部を区別し画像本体部分のみ重なりを取っています。

   1. naturalArea を imageRequest の 自然横幅 * imageRequest の 自然高さとする。

   2. naturalArea が 0 なら、null を返す。

   3. boundingClientArea を clientContentRect の 横幅 * clientContentRect の 高さとする。

   4. scaleFactor を boundingClientArea / naturalAreaとする。

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

9. size を返す。

入力

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

paintTimingInfo、描画タイミング情報

document、Document

出力

なし

1. document の 最大コンテンツ描画サイズを candidate の サイズに設定する。

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

3. candidate の リクエスト が null でなければ、 url を candidate の リクエスト の リクエストURLとする。

4. entry を新しい LargestContentfulPaint エントリー（document の 関連レルムで、描画タイミング情報は paintTimingInfo）とし、

   • size を candidate の サイズに設定する,

   • url を url に設定する,

   • id を candidate の 要素 の element idに設定する,

   • loadTime を candidate の ロード時間に設定する,

   • さらに element を candidate の 要素に設定する。

5. PerformanceEntry entry をキューする。