가장 큰 콘텐츠 페인트

<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 타이밍에 노출됨이 null로 주어졌을 때 아니면 null을 반환한다.

2. this의 element를 반환한다.

event dispatch algorithm을 다음과 같이 수정합니다.

1단계 바로 다음에 다음 단계를 추가합니다:

• target의 관련 전역 객체가 Window 오브젝트이고, event의 type 이 scroll 이며, isTrusted 가 true이면, target의 관련 전역 객체의 스크롤 이벤트 발생 여부를 true로 설정합니다.

최대 콘텐츠 페인트를 보고한다고 요청받으면, Document document, paint timing info paintTimingInfo, 정렬된 집합의 보류 중인 이미지 레코드 paintedImages, 그리고 정렬된 집합의 요소 paintedTextNodes가 주어졌을 때, 다음 절차를 수행한다:

Note: paintedImages의 모든 보류 중인 이미지 레코드와 paintedTextNodes의 텍스트 요소는 마크 페인트 타이밍에서 처음 페인트될 때(즉, opacity와 visibility를 가지는 경우) 그리고 콘텐츠를 포함하는 경우(즉, 이미지 리소스 또는 차단 서체가 충분히 로드된 상태)를 만족할 때 **정확히 한 번만** 보고된다.

1. window를 document의 관련 전역 객체로 한다.

2. window의 스크롤 이벤트 디스패치 여부 또는 입력 이벤트 디스패치 여부 중 어느 하나라도 참이면, 반환한다.

3. currentSize를 document의 최대 콘텐츠 페인트 크기로 한다.

4. currentWidth를 document의 최대 콘텐츠 페인트 너비로 한다.

5. currentHeight를 document의 최대 콘텐츠 페인트 높이로 한다.

6. largestSize를 currentSize로 한다.

7. newCandidate를 null로 한다.

8. 각 paintedImages 내 record에 대하여:

   1. imageElement를 record의 요소로 한다.

   2. imageElement가 document에 대해 페인트 타이밍에 노출되지 않으면 계속한다.

   3. intersectionRect를 타겟으로 imageElement, 루트로 viewport를 사용하여 intersection rect 알고리즘의 결과로 한다.

   4. result를 intersectionRect와 record의 request를 인자로 한 유효 시각 크기로 한다.

   5. result가 null이면 계속한다.

   6. result의 size가 largestSize 이하이면 계속한다.

   7. largestSize를 result의 size로 한다.

9. newCandidate를 다음 값을 가지는 새로운 최대 콘텐츠 페인트 후보로 설정한다:

   1. element는 imageElement로 한다.

   2. size는 result의 size로 한다.

   3. width는 result의 width로 한다.

   4. height는 result의 height로 한다.

   5. request는 record의 request로 한다.

   6. loadTime은 record의 loadTime으로 한다.

10. 각 paintedTextNodes의 textNode에 대하여,

    1. textNode가 document에 대해 페인트 타이밍에 노출되지 않으면 계속한다.

    2. textNode의 알파 채널 값이 0 이하이거나 불투명도 값이 0 이하이면:

       1. textNode의 text-shadow 값이 none이고, stroke-color 값이 transparent이며, stroke-image 값이 none이면, 계속한다.

    3. intersectionRect를 모든 Text 노드의 border box 합집합을 textNode의 소유 텍스트 노드 집합에서 구하여, 시각적 뷰포트와 교집합한 값으로 한다.

    4. result를 유효 시각 크기에서 textNode, intersectionRect, null을 인자로 구한다.

    5. result가 null이면 계속한다.

    6. result의 size가 largestSize 이하이면 계속한다.

    7. largestSize를 result의 size로 한다.

    8. newCandidate를 다음 값들을 가진 새로운 최대 콘텐츠 페인트 후보로 설정한다:

       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 이하면, 반환한다.

    2. LargestContentfulPaint 엔트리 생성를 newCandidate, paintTimingInfo, document로 수행한다.

입력

intersectionRect, DOMRectReadOnly

imageRequest, Request 또는 null

element, 요소

document, 문서

출력

유효 시각 크기 결과, 구조체이고 항목은 size(숫자), width(숫자), height(숫자)로, 최대 콘텐츠 페인트로 보고될 유효 시각 크기, 너비, 높이를 픽셀 단위로 나타낸다. 요소가 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의 response의 바이트 단위 content length가 size * 0.004 보다 작다면 null을 반환한다.

      Note: 이 휴리스틱은 이미지 리소스가 사용자에게 콘텐츠로 인식될 만한 충분한 데이터를 포함하는지 판단한다. 전송되는 파일 크기와 실제로 생산되는 픽셀 수(디코딩 및 스케일 조정 후)를 비교한다. 매우 적은 바이트로 많은 픽셀을 표현하면 보통 저콘텐츠 배경/그래디언트 등이며, LCP 후보로 간주하지 않는다.

   2. concreteDimensions를 element 내에서 imageRequest의 구체 오브젝트 크기로 한다.

   3. visibleDimensions를 concreteDimensions에서 위치 결정을 object-position 또는 background-position로, element의 content box와 함께 보정한 값으로 한다.

      Note: 일부 알고리즘은 CSS에서 엄밀히 정의돼 있지 않다. 기대 결과는 element 내 해당 이미지의 실제 위치와 크기를 DOMRectReadOnly로 얻는 것이다.

   4. clientContentRect를 visibleDimensions를 모두 포함하고, element의 트랜스폼이 적용된 최소 DOMRectReadOnly로 한다.

   5. intersectingClientContentRect를 clientContentRect와 intersectionRect의 교집합으로 한다.

   6. width를 intersectingClientContentRect의 width 를 가장 가까운 정수로 반올림한다.

   7. height를 intersectingClientContentRect의 height 를 가장 가까운 정수로 반올림한다.

   8. size를 width * height로 한다.

      Note: 이렇게 해서 요소의 장식이 아니라 이미지 자체와만 교집합이 되도록 한다.

   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. 유효 시각 크기 결과를 반환하는데 항목은 size에는 size, width에는 width, height에는 height를 넣는다.

입력

candidate, 최대 콘텐츠 페인트 후보

paintTimingInfo, paint timing info

document, Document

출력

없음

1. document의 최대 콘텐츠 페인트 크기를 candidate의 size로 설정한다.

2. document의 최대 콘텐츠 페인트 너비를 candidate의 width로 설정한다.

3. document의 최대 콘텐츠 페인트 높이를 candidate의 height로 설정한다.

4. url을 빈 문자열로 한다.

5. candidate의 request가 null이 아니면, url을 candidate의 request의 request URL로 설정한다.

6. entry를 LargestContentfulPaint 엔트리로 생성하는데, document의 관련 렐름을 사용하고, paint timing info는 paintTimingInfo로 한다. 엔트리의 각 속성은,

   • size 는 candidate의 size로,

   • url 은 url로,

   • id 는 candidate의 element의 element id로,

   • loadTime 는 candidate의 loadTime으로,

   • 그리고 element 는 candidate의 element로 한다.

7. PerformanceEntry entry를 큐에 추가한다.