최대 함량을 측정하는 페인트

최대 내용 그리기(LCP)는 페이지의 최대 요소를 렌더링하는 데 걸리는 시간을 측정합니다.이것은 실제 사용자가 현대 웹 응용 프로그램의 성능을 어떻게 감지하는지 평가하는 몇 가지 중요한 지표 중의 하나이다.자바스크립트와 SPA가 페이지 불러오기가 끝난 후에 더 많은 내용을 보여줌에 따라 가장 큰 Contentful 그리기와 같은 새로운 측정이 점점 중요해진다.

최대 페인트

가장 큰 내용 그리기 도량은 이러한 가설 아래 작동한다. 즉, 사용자가 가장 큰 내용을 볼 수 있다면 페이지는 사용자에게 유용하다.이것은 중요한 핵심 네트워크가 매우 중요하다는 지표Google will soon be considering when ranking search results이다.
LCP는 단일 측정이 아니라 일련의 측정입니다.새 최대 요소를 렌더링할 때마다 추가 항목LargestContentfulPaint이 생성됩니다.페이지 로드의 마지막 Largest ContentfulPaint 항목을 사용하여 LCP 메트릭을 단일 값으로 묶을 수 있습니다.LCP 항목은 블록 레벨 요소가 포함된 이미지, 비디오 및 텍스트만 트리거할 수 있습니다.
최대를 구성하는 요소는 요소 유형에 따라 다릅니다.이미지 요소 크기는 페이지에 표시되는 이미지 크기에 따라 결정됩니다.요소 크기를 포함하는 텍스트는 텍스트 자체를 포함하는 최소 상자입니다.
이 사람의 예시에서 하이라이트는 가장 큰 렌더링 요소를 보여 준다.일부 요소는 기본 HTML에 있고 즉시 표시됩니다.나중에 JavaScript에 다른 요소가 삽입됩니다.

그러나 가장 만족스러운 페인트의 가치는 무엇입니까?구글은 크롬 브라우저에서 수집한 데이터를 이용하여 추천 시간을 정하는데 도움이 된다.

최대 도료 API

Largest Contentful Paint API는 JavaScript를 통해 최대 페인트 측정 값을 공개하는 의안 기준입니다.현재 Chrome, Edge, Opera 등 Blink 기반 브라우저에서 지원됩니다.주: 표준 초안으로 가끔 changes to how LCP is determined 있습니다.
일부 코드를 사용하여 API 동작을 테스트할 수 있습니다.

new PerformanceObserver(entryList => {
    console.log(entryList.getEntries());
}).observe({ type: "largest-contentful-paint", buffered: true });

buffered: true 옵션은 PerformanceObserver를 구성하기 전에 발생한 모든 항목을 반환합니다.sloth 예제 페이지는 다음과 같은 항목을 반환합니다.

LCP 운영 API의 괴벽과 함정

위의 API 예는 생산 환경에 사용하기 전에 고려해야 할 몇 가지 문제와 놀라운 행동을 감추었다.

1. 백그라운드에서 로드된 페이지를 측정하지 마십시오!

백그라운드 탭에서 페이지를 로드할 때 마지막 내용 그리기를 측정해서는 안 됩니다.이 경우 측정값은 사용자가 처음으로 탭을 프론트 데스크로 가져오는 시간만 표시합니다.추가 검사를 통해 측정 배경 탭을 방지합니다.

var hiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;

document.addEventListener('visibilitychange', (event) => {
    hiddenTime = Math.min(hiddenTime, event.timeStamp);
}, { once: true });

new PerformanceObserver(entryList => {
    entryList.getEntries().forEach((entry) => {
        if (entry.startTime < hiddenTime) {
            // This entry occurred before the page was hidden
            console.log(entry);
        }
    };
}).observe({ type: "largest-contentful-paint", buffered: true });

2. 최대 내용 페인트 API 특징 검출

모든 브라우저에서 최대 컨텐츠 드로잉 API를 지원하는 것은 아닙니다.Try/catch는 일부 브라우저에서 API를 사용할 때 예외가 발생할 수 있으므로 기능을 검사하는 유일한 신뢰할 수 있는 방법입니다.

try {
    new PerformanceObserver(entryList => {
        console.log(entryList.getEntries());
    })
    // Some browsers throw when 'type' is passed:
    .observe({ type: "largest-contentful-paint", buffered: true });
}
catch (e) {
    // The Largest Contentful Paint API is not supported by this browser
}

3. Largest ContentfulPaint 항목은 이전 값으로 "복원"할 수 있습니다.

DOM에서 현재 최대 요소를 제거하면 이전LargestContentfulPaint 항목을 다시 게시할 수 있습니다.이 경우 entryList.getEntries() 에서 마지막 항목이 이전 항목보다 짧음startTime:

블록 요소의 경계와 배경은 크기에 영향을 주지 않습니다.

Largest ContentfulPaint 항목의 "최대"요소는 의외일 수 있습니다.일반적으로 LCP 크기 규칙에 따라 시각적으로 가장 큰 요소는 가장 크지 않습니다.이것은 경계와 컬러 배경이 요소의 크기 계산에 포함되지 않기 때문이다.텍스트의 경계 상자만 사용:

5. 사용자 상호 작용으로 LCP 항목 추가 중지

컨텐츠가 계속 표시되고 사용자가 페이지와 상호작용하지 않을 때 새 항목LargestContentfulPaint이 생성됩니다.페이지를 클릭하거나 스크롤하면 LCP 측정이 즉시 중지됩니다.풍자적인 것은 낙담하여 속도가 느린 페이지와 상호작용하는 사용자가 실제 가장 큰 페이지를 숨길 수 있다는 것이다.

결론

위의 괴벽이 밝힌 바와 같이 가장 큰 지족화는 항상 전체 이야기를 할 수 있는 것은 아니다.그것은 웹 성능 도구 상자의 다른 도구일 뿐이다.전통적인 성능 측정과 다른 새로운 성능 측정(예를 들어)을 결합하면 사용자의 체험을 더욱 잘 이해할 수 있다.

LCP 성능 모니터링

우리가 어려운 일을 처리합시다.Request Metrics를 사용하여 실제 사용자의 네트워크 관건을 감시합니다. 예를 들어 가장 큰 지족 도료입니다.