가장 큰 콘텐츠 페인트

<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가 null을 기준으로 페인트 타이밍에 노출됨이 아니라면, null을 반환.

2. this의 element 반환.

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

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

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

최대 콘텐츠 렌더를 보고한다 요청을 받았을 때, Document document, 페인트 타이밍 정보 paintTimingInfo, 순서 집합의 대기 중인 이미지 기록들 paintedImages, 그리고 순서 집합의 요소들 paintedTextNodes가 주어지면, 다음 단계를 수행한다:

참고: paintedImages의 각 대기 중 이미지 기록과 paintedTextNodes의 텍스트 요소는 첫 번째 paint에서 단 한 번만 mark paint timing에 의해, 해당 요소가 렌더 가능(즉, opacity와 visibility를 갖는)하고 콘텐츠가 존재(즉, 이미지 리소스나 차단 폰트가 충분히 로드됨)로 간주될 때 보고된다.

1. window를 document의 관련 글로벌 객체로 설정한다.

2. window의 스크롤 이벤트 발생 여부 또는 입력 이벤트 발생 여부가 true이면, 반환한다.

3. newCandidateSize를 document의 최대 콘텐츠 렌더 크기로 설정한다.

4. newCandidate를 null로 설정한다.

5. 각 paintedImages의 record에 대해:

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

   2. imageElement가 페인트 타이밍에 노출된 요소가 아니면, document 기준으로 계속 진행한다.

   3. intersectionRect를 교차 영역 알고리즘이 imageElement를 대상으로 하고 viewport를 root로 사용하여 반환한 값으로 설정한다.

   4. size를 실효 시각 크기로 imageElement, intersectionRect, record의 request 기준으로 설정한다.

   5. size가 newCandidateSize 이하이면, 계속 진행한다.

   6. newCandidateSize를 size로 설정한다.

   7. newCandidate를 새로운 최대 콘텐츠 렌더 후보 로 설정한다. element는 imageElement, size는 size, request는 record의 request, loadTime은 record의 loadTime으로 설정한다.

6. 각 paintedTextNodes의 textNode에 대해,

   1. textNode가 페인트 타이밍에 노출된 요소가 아니면, document 기준으로 계속 진행한다.

   2. textNode의 알파 채널 값이 <=0 이거나 불투명도 값이 <=0 인 경우:

      1. textNode의 text-shadow 값이 none이고, textNode의 stroke-color 값이 투명이며 textNode의 stroke-image 값이 none이며, 계속 진행한다.

   3. intersectionRect를 모든 Text 노드의 border box 합( textNode의 소유 텍스트 노드 집합 )을 시각적 뷰포트와 교차시켜서 얻은 값으로 설정한다.

   4. size를 실효 시각 크기로, textNode, intersectionRect, null 기준으로 설정한다.

   5. size가 newCandidateSize 이하이면, 계속 진행한다.

   6. newCandidateSize를 size로 설정한다.

   7. newCandidate를 새로운 최대 콘텐츠 렌더 후보로 설정한다. element는 textNode, size는 size, request는 null, loadTime은 0으로 설정한다.

7. newCandidate가 null이 아니면:

   1. LargestContentfulPaint 엔트리 생성 시 newCandidate, paintTimingInfo, document를 사용한다.

입력

intersectionRect, DOMRectReadOnly

imageRequest, Request 또는 null

element, Element

document, Document

출력

Largest Contentful Paint에 대해 보고할 크기(픽셀 단위), 또는 해당 요소가 LCP 후보가 아니면 null.

1. width를 intersectionRect의 width로 설정한다.

2. height를 intersectionRect의 height로 설정한다.

3. size를 width * height로 설정한다.

4. root를 document의 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 활성 document로 설정한다.

5. rootWidth를 root의 시각적 viewport의 너비(스크롤바 제외)로 설정한다.

6. rootHeight를 root의 시각적 viewport의 높이(스크롤바 제외)로 설정한다.

7. size가 rootWidth와 rootHeight의 곱과 같으면, null을 반환한다.

8. imageRequest가 null이 아니면, 이미지 위치 및 업스케일링을 조정하기 위해 다음 단계를 수행한다:

   1. imageRequest의 response의 바이트 단위 콘텐츠 길이가 size * 0.004보다 작으면 null을 반환한다.

      참고: 이 휴리스틱은 이미지 리소스가 사용자에게 충분한 콘텐츠로 보일 수 있는지 테스트한다. 전송된 파일 크기와 실제 생성되는 픽셀 수를 비교한다(디코딩과 이미지 스케일링 적용 후). 아주 적은 바이트로 많은 픽셀을 인코딩한 이미지는 일반적으로 콘텐츠가 적은 배경이나 그라디언트로, LCP 후보로 간주하지 않는다.

   2. concreteDimensions를 element 내 imageRequest의 구체 객체 크기로 설정한다.

   3. visibleDimensions를 concreteDimensions에서 object-position이나 background-position로 위치를 조정한 후 element의 콘텐츠 박스에서 계산하여 설정한다.

   참고: 이러한 알고리즘 중 일부는 CSS에서 엄밀히 정의되지 않았다. 기대 결과는 element 내 실제 이미지 위치와 크기를 DOMRectReadOnly로 얻는 것이다.

   1. clientContentRect를 visibleDimensions를 포함하고 element의 변환이 적용된 최소 DOMRectReadOnly로 설정한다.

   2. intersectingClientContentRect를 clientContentRect와 intersectionRect의 교차 영역으로 설정한다.

   3. size를 intersectingClientContentRect의 width * intersectingClientContentRect의 height로 설정한다.

   참고: 이것은 요소의 장식이 아닌 실제 이미지와만 교차 영역을 계산함을 보장한다.

   1. naturalArea를 imageRequest의 자연 너비 * imageRequest의 자연 높이로 설정한다.

   2. naturalArea가 0이면, null을 반환한다.

   3. boundingClientArea를 clientContentRect의 width * clientContentRect의 height로 설정한다.

   4. scaleFactor를 boundingClientArea / naturalArea로 설정한다.

   5. scaleFactor가 1보다 크면, size를 scaleFactor로 나눈다.

9. size를 반환한다.

입력

candidate, 최대 콘텐츠 렌더 후보

paintTimingInfo, 페인트 타이밍 정보

document, Document

출력

없음

1. document의 최대 콘텐츠 렌더 크기를 candidate의 크기로 설정한다.

2. url을 빈 문자열로 설정한다.

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

4. entry를 새로운 LargestContentfulPaint 엔트리로 만들고, document의 관련 realm에서, paint timing info는 paintTimingInfo로, 다음과 같이 설정한다:

   • size 를 candidate의 크기로,

   • url 를 url로,

   • id 를 candidate의 element의 element id로,

   • loadTime 를 candidate의 로드 시간으로,

   • 그리고 element 를 candidate의 element로.

5. PerformanceEntry entry를 큐에 넣는다.