LCP란 무엇인가요? 가장 큰 콘텐츠 페인트(LCP)

최대로 그릴 수 있는 콘텐츠(엘씨피)는 페이지 로드 타임라인에서 페이지의 주요 콘텐츠가 기본적으로 로드된 시점을 나타내므로, 사용자 중심의 체감 로드 속도를 측정하는 데 중요한 지표입니다. 빠른 LCP는 사용자가 페이지의 유효성을 스스로 확인할 수 있도록 도와줍니다.

웹 페이지의 주요 콘텐츠가 얼마나 빨리 로드되고, 해당 콘텐츠가 사용자에게 얼마나 빨리 표시되는지 측정하는 것은 오랫동안 웹 개발자들의 과제였습니다.

와 같은짐또는DOMContentLoaded(DOM 콘텐츠 로드됨)이러한 이전 표시기는 사용자가 화면에서 보는 내용과 반드시 일치하지 않았기 때문에 좋지 않았습니다.첫 번째 콘텐츠 페인트(FCP)이러한 새로운 사용자 중심 성과 지표는 로딩 경험의 아주 초기 단계만을 포착합니다. 페이지에 스플래시 화면이나 로딩 표시기가 표시되면 해당 순간은 사용자에게 덜 중요해집니다.

우리는 과거에 다음과 같은 몇 가지 성과 지표를 추천했습니다.첫 번째 의미 있는 페인트(FMP)그리고속도 지수 속도 지수(SI) (두 가지 지표 모두 Lighthouse 도구에 포함되어 있습니다.) 이러한 지표는 초기 페인트 이후의 로딩 경험을 더 잘 포착하는 데 도움이 되지만 복잡하고 해석하기 어려우며 종종 틀리기 때문에 페이지의 주요 콘텐츠가 로드된 시점을 여전히 식별할 수 없습니다.

때로는 적은 것이 많은 것보다 낫습니다.W3C 웹 성능 워킹 그룹Google과의 논의와 Google에서 실시한 조사에 따르면, 페이지의 주요 콘텐츠가 로드된 시점을 측정하는 더 정확한 방법은 가장 큰 요소의 렌더링이 완료된 시점을 살펴보는 것입니다.

LCP란 무엇인가요?

가장 큰 콘텐츠 페인트(LCP) 메트릭은 페이지를 기반으로 합니다.첫 번째 시작 로딩가시영역의 최대 가시영역은 시간점에서 보고됩니다.이미지 또는 텍스트 블록렌더링이 완료된 상대적 시간입니다.

좋은 LCP 점수는 몇 점인가요?

좋은 사용자 경험을 제공하기 위해 웹사이트는 최대한의 콘텐츠 페인트를 유지하도록 노력해야 합니다.2.5초또는 그 이하입니다. 대부분의 사용자 방문에 대해 권장 목표를 달성하고 있는지 확인하려면 적절한 측정 임계값이 필요합니다.75번째 백분위수, 이 임계값은 모바일 및 데스크톱 장치 모두에 적용됩니다.

이러한 권장 값의 기반이 되는 연구 및 방법론에 대한 자세한 내용은 다음을 참조하세요.핵심 웹 메트릭에 대한 메트릭 임계값 정의

어떤 요소가 고려되나요?

현재에 따르면최대 콘텐츠 그리기 가능 API규정에 따르면 최대 콘텐츠 그리기에 고려되는 요소 유형은 다음과 같습니다.

이미지요소
에 내장됨SVG요소 내부영상요소
동영상요소(표지 이미지 사용)
통과하다url()함수(사용하는 것보다CSS 그라디언트) 배경 이미지가 로드된 요소
텍스트 노드 또는 기타 인라인 수준 텍스트 요소 자식을 포함합니다.블록 수준 요소.

초기 단계에서는 간소화를 위해 의도적으로 몇 가지 유형의 요소만 포함했습니다. 향후 다른 요소를 추가할 수도 있습니다(예:SVG , 동영상).

요소의 크기를 어떻게 결정하나요?

가장 큰 콘텐츠 드로어블에 대해 보고되는 요소의 크기는 일반적으로 뷰포트 내에서 사용자에게 표시되는 크기입니다. 요소가 뷰포트 밖으로 확장되거나, 요소가 잘리거나 보이지 않는 요소를 포함하는 경우과다이러한 부분은 요소 크기에 계산되지 않습니다.

을 위한원본 크기크기가 조정된 이미지 요소의 경우, 메트릭에 보고되는 요소 크기는 표시 크기 또는 원본 크기 중 더 작은 크기입니다. 예를 들어, 원본 크기보다 훨씬 작은 축소된 이미지는 표시된 크기만 보고하는 반면, 확대되거나 확대된 이미지는 원본 크기만 보고합니다.

텍스트 요소의 경우 메트릭은 텍스트 노드의 크기(모든 텍스트 노드를 포함하는 가장 작은 사각형)만 고려합니다.

모든 요소에 대해 CSS를 통해 설정된 여백, 패딩 또는 테두리는 고려되지 않습니다.

어떤 텍스트 노드가 어떤 요소에 속하는지 판단하는 것은 때로 까다로울 수 있습니다. 특히 자식 요소에 인라인 요소와 일반 텍스트 노드가 모두 포함되어 있고, 블록 수준 요소에도 속하는 요소의 경우 더욱 그렇습니다. 핵심은 각 텍스트 노드가 가장 가까운 블록 수준 조상에만 속한다는 것입니다.표준 용어설명: 각 텍스트 노드는 다음에 속합니다.블록 포함.의 해당 요소.

가장 많은 페인트가 보고되는 시기는 언제인가요?

웹 페이지는 종종 단계적으로 로드되므로 페이지에서 가장 큰 요소가 변경될 수 있습니다.

이러한 잠재적인 변경 사항을 고려하기 위해 브라우저는 다음을 전송합니다.가장 큰-내용-페인트유형퍼포먼스엔트리가장 큰 콘텐츠 요소를 식별하는 . 그러나 후속 프레임을 렌더링한 후 브라우저는 다른 프레임을 전송합니다.퍼포먼스엔트리.

예를 들어, 텍스트와 헤더 이미지가 있는 페이지에서 브라우저는 처음에 텍스트 부분만 렌더링하고 다음을 발행할 수 있습니다.가장 큰-내용-페인트일반적으로 요소 속성이 참조하는 항목피또는h1 그런 다음 첫 번째 이미지가 로드되면 브라우저는 두 번째 이미지를 전송합니다.가장 큰-내용-페인트요소 속성은 다음을 참조합니다.이미지 .

요소는 렌더링이 완료되어 사용자에게 표시되어야만 가장 큰 콘텐츠 요소로 간주됩니다. 아직 로드되지 않은 이미지는 "렌더링됨"으로 간주되지 않습니다.글꼴 차단 기간웹 폰트를 사용하는 텍스트 노드에도 마찬가지입니다. 이 경우, 작은 요소가 가장 큰 콘텐츠 요소로 보고될 수 있지만, 큰 요소의 렌더링이 완료되면 다른 요소에 의해 가장 큰 콘텐츠 요소로 보고됩니다.퍼포먼스엔트리주제가 보고됩니다.

이미지와 글꼴을 느리게 로딩하는 것 외에도, 페이지는 새 콘텐츠가 제공될 때 DOM에 새 요소를 추가할 수 있습니다. 새 요소 중 하나가 이전에 가장 큰 콘텐츠 요소보다 큰 경우, 브라우저는 새 요소를 보고합니다.퍼포먼스엔트리.

현재 가장 큰 콘텐츠 요소가 뷰포트(또는 DOM)에서 제거되면 더 큰 요소의 렌더링이 완료될 때까지 해당 요소가 가장 큰 콘텐츠 요소로 유지됩니다.

Chrome 88 이전에는 제거된 요소가 가장 큰 콘텐츠 요소로 간주되지 않았으며, 현재 후보를 제거하면 브라우저가 새 후보를 전송했습니다.가장 큰-내용-페인트하지만 이 지표는 DOM 요소가 종종 제거되는 이미지 캐러셀과 같은 인기 UI 패턴의 사용자 경험을 더 정확하게 반영하도록 업데이트되었습니다.변경 사항 자세한 내용은.

사용자가 페이지와 상호 작용할 때(탭, 스크롤 또는 키 누름) 브라우저는 새 항목 보고를 즉시 중단합니다. 사용자 상호 작용으로 인해 사용자에게 표시되는 콘텐츠가 변경되는 경우가 많기 때문입니다(특히 스크롤하는 경우).

분석 목적으로 가장 최근에 배포된 것만 보고해야 합니다.퍼포먼스엔트리.

사용자가 백그라운드 탭에서 페이지를 열고 페이지가 처음 로드될 때보다 훨씬 늦게 해당 탭에 포커스를 맞출 수 있으므로, 사용자가 탭에 포커스를 맞출 때까지 최대 콘텐츠 페인트가 발생하지 않을 수 있습니다.

로딩 시간 대 렌더링 시간

안전상의 이유로,타이밍-허용-원점헤더에서 이미지의 렌더링 타임스탬프는 노출되지 않습니다. 대신 이미지의 로드 시간만 노출됩니다(로드 시간은 다른 여러 웹 API를 통해 이미 노출되어 있기 때문입니다).

아래에사용 예렌더링 시간을 사용할 수 없는 요소를 처리하는 방법을 설명합니다. 하지만 항상 다음을 설정하는 것이 좋습니다.타이밍-허용-원점헤더를 사용하면 측정항목의 정확도가 높아집니다.

요소 레이아웃과 요소 크기 변경을 어떻게 처리하나요?

새로운 성능 항목의 계산 및 배포 비용을 낮추기 위해, 요소의 크기나 위치가 변경되어도 새로운 LCP 후보가 생성되지 않습니다. 가시 영역 내에서 요소의 초기 크기와 위치만 고려됩니다.

즉, 처음에 화면 밖에서 렌더링되었다가 화면으로 전환된 이미지는 그렇게 보고되지 않을 수 있습니다. 또한, 처음에 뷰포트 내에서 렌더링되었다가 뷰포트 밖으로 밀려난 요소도 초기 크기가 뷰포트 내에 있는 것으로 보고됩니다.

예

인기 있는 일부 사이트에서 가장 많은 콘텐츠가 발생하는 경우는 다음과 같습니다.

위의 두 타임라인에서 가장 큰 요소는 콘텐츠가 로드됨에 따라 변경됩니다. 첫 번째 예시에서는 새로운 콘텐츠가 DOM에 추가되어 가장 큰 요소가 변경됩니다. 두 번째 예시에서는 레이아웃 변경으로 인해 이전에 가장 큰 콘텐츠가 표시 영역에서 제거됩니다.

지연 로드된 콘텐츠는 페이지에 이미 있는 콘텐츠보다 큰 경우가 많지만, 반드시 그런 것은 아닙니다. 다음 두 예시는 페이지가 완전히 로드되기 전에 가장 큰 콘텐츠 페인트가 나타나는 모습을 보여줍니다.

첫 번째 예시에서 인스타그램 로고는 비교적 일찍 로드되며, 다른 콘텐츠가 나중에 표시되더라도 가장 큰 요소로 유지됩니다. Google 검색 결과 페이지 예시에서 가장 큰 요소는 이미지나 로고가 로드되기 전에 나타나는 텍스트 블록입니다. 모든 개별 이미지가 텍스트보다 작기 때문에 로딩 과정 내내 가장 큰 요소로 유지됩니다.

인스타그램 타임라인의 첫 번째 프레임에서 카메라 아이콘이 녹색 상자로 둘러싸여 있지 않은 것을 보셨을 수도 있습니다. 이는 카메라 아이콘이SVG요소, 그리고SVG해당 요소는 현재 LCP 후보로 간주되지 않습니다. 첫 번째 LCP 후보는 두 번째 프레임의 텍스트입니다.

LCP 측정 방법

LCP는 가능합니다실혐실측정하거나실제측정되어 다음 도구에서 사용할 수 있습니다.

측정 도구

실험실 도구

JavaScript에서 LCP 측정

JavaScript에서 LCP를 측정하려면 다음을 사용할 수 있습니다.최대 콘텐츠 그리기 가능 API 다음 예제에서는 다음을 만드는 방법을 보여줍니다.퍼포먼스 옵저버가장 큰 콘텐츠가 있는 페인트 항목을 수신하고 콘솔에 기록합니다.

새로운 PerformanceObserver((entryList) => { (entryList.getEntries()의 const 항목에 대해) console.log('LCP 후보:', entry.startTime, entry); } }).observe({유형: '가장 큰-내용-페인트', 버퍼링: true});

위의 코드는 다음 방법을 보여줍니다.가장 큰-내용-페인트항목은 콘솔에 기록되지만, JavaScript에서 LCP를 측정하는 것은 더 복잡합니다. 자세한 내용은 아래를 참조하세요.

위의 예에서 기록된 각가장 큰-내용-페인트항목은 현재 LCP 후보를 나타냅니다. 일반적으로 가장 최근 항목에서 생성된 startTime 값이 LCP 값이지만, 항상 그런 것은 아닙니다. 모든 항목이 LCP 값인 것은 아닙니다.가장 큰-내용-페인트LCP를 측정하는 데 항목을 사용할 수 있습니다.

다음 섹션에서는 API가 보고하는 내용과 측정항목을 계산하는 방법의 차이점을 나열합니다.

지표와 API의 차이점

API는 백그라운드 탭에 로드된 페이지에 대해 가장 큰 콘텐츠가 있는 페인트 항목을 배포하지만, LCP를 계산할 때 이러한 페이지는 무시되어야 합니다.
API는 페이지가 백그라운드로 이동한 후에도 largest-contentful-paint 항목을 계속 배포하지만, LCP를 계산할 때 이러한 항목은 무시해야 합니다(요소는 페이지가 항상 포그라운드에 있을 때만 고려됩니다).
페이지가 지나갈 때왕복 캐시API는 재개 시 largest-contentful-paint 항목을 보고하지 않지만, 이는 사용자의 여러 페이지 방문이기 때문에 이런 경우 LCP를 측정해야 합니다.
API는 iframe 내의 요소를 고려하지 않지만, LCP를 정확하게 측정하려면 이러한 요소를 고려해야 합니다. 자식 프레임은 이 API를 사용하여 이러한 요소에 대한 최대 콘텐츠 페인트 항목을 부모 프레임에 보고하여 집계할 수 있습니다.

개발자는 이러한 모든 뉘앙스를 기억하는 대신 다음을 사용할 수 있습니다.웹 바이탈스 JavaScript 라이브러리LCP를 측정하기 위해 라이브러리는 가능한 경우 다음과 같은 차이점을 직접 처리합니다.

'web-vitals'에서 {getLCP}를 가져옵니다. // LCP가 사용 가능해지면 측정하고 기록합니다. getLCP(콘솔.로그);

JavaScript에서 LCP를 측정하는 방법에 대한 전체 예는 getLCP()의 소스 코드를 참조하세요.

일부 경우(예: 크로스 도메인 iframe)에는 JavaScript에서 CLS를 측정할 수 없습니다. 자세한 내용은 웹 바이탈 라이브러리를 참조하세요.한정부분.