LCP(Contentful Paint): 완벽한 기술 가이드 및 최적화 표준

LCP(Largest Contentful Paint)는 인지된 페이지 로딩 속도를 측정하기 위해 설정된 Google의 세 가지 핵심 웹 바이탈 측정항목 중 하나입니다.LCP는 사용자가 웹 페이지 로딩을 시작한 때부터 초기 표시 뷰포트 내의 가장 큰 이미지, 비디오 포스터 프레임 또는 텍스트 블록이 화면에 완전히 그려질 때까지 경과된 시간을 추적합니다.

사용자는 주요 콘텐츠가 얼마나 빨리 표시되고 읽을 수 있는지에 따라 웹 페이지 속도를 판단하기 때문에 LCP는 가장 중요한 로딩 성능 지표로 널리 간주됩니다.결과적으로 Google은 자연 검색을 위한 공식 페이지 경험 순위 신호에 LCP를 통합합니다.

답변 우선 요약

LCP(Largest Contentful Paint)는 뷰포트에 표시되는 가장 큰 텍스트 블록이나 이미지 요소가 렌더링을 완료하는 시점을 기준으로 인지된 페이지 로딩 속도를 측정하는 Core Web Vital 측정항목입니다.합격 LCP 점수는 실제 사용자 필드 데이터(CrUX)의 페이지 방문 중 최소 75%에 대해 2.5초 이하입니다.LCP 대기 시간은 TTFB(Time to First Byte), 리소스 로드 지연, 리소스 로드 기간 및 요소 렌더링 지연이라는 네 가지 하위 부분으로 구성됩니다.LCP를 최적화하려면 히어로 자산을 미리 로드하고, 에지 캐싱을 배포하고, 이미지를 WebP/AVIF 형식으로 압축하고, 렌더링 차단 CSS 및 JavaScript를 제거해야 합니다.

LCP 점수 평가 척도 및 핵심 웹 바이탈 임계값

사용자에게 빠르고 매력적인 환경을 제공하려면 웹페이지는 콘텐츠가 포함된 최대 페인트에 대해 Google에서 정한 핵심 웹 바이탈 기준을 충족해야 합니다.

LCP 렌더링 시간	성과 평가	사용자 영향 및 Google 검색 순위 신호
$\le 2.5\text{초}$	좋음(녹색)	빠른 인식 로딩;Google의 핵심 웹 바이탈 평가를 완전히 만족합니다.
$> 2.5\text {s} $ 및 $\le 4.0\text {s} $	개선 필요(황색)	눈에 띄는 로딩 지연;모바일 전환율과 검색 순위가 하락할 가능성이 있습니다.
$> 4.0\text{초}$	나쁨(빨간색)	심각한 시각적 로딩 지연;높은 이탈률과 검색 순위 페널티.

핵심 웹 바이탈 평가 합격 등급을 얻으려면 웹사이트가 실제 필드 데이터의 데스크톱 및 모바일 장치 집단 전체에서 평가된 최소 75% 페이지 방문에 대해 좋음 범주($\le 2.5\text{초}$)에서 LCP 점수를 획득해야 합니다.

LCP 평가에 적합한 DOM 요소는 무엇입니까?

공식 W3C 콘텐츠가 포함된 최대 페인트 사양에 따라 브라우저는 초기 뷰포트 내에 있는 특정 표시 DOM 요소를 모니터링합니다.

표준 <img> 요소(반응형 <picture> 태그 내부에 렌더링된 이미지 포함).
<image> 요소는 <svg> 벡터 컨테이너 내에 포함됩니다.
비디오 포스터 이미지(<video> 요소의 poster 속성)
url() 함수를 통해 로드된 CSS 배경 이미지가 있는 요소입니다.
텍스트 노드 또는 인라인 텍스트 요소 하위 항목(예: <h1>부터 <h6> 제목, <p> 단락 또는 <div> 블록)을 포함하는 블록 수준 HTML 컨테이너입니다.

LCP 해체: 네 가지 하위 부분

콘텐츠가 포함된 가장 느린 페인트 점수를 효과적으로 진단하고 최적화하기 위해 성능 엔지니어는 LCP 대기 시간을 4가지 하위 부분으로 분류합니다.

첫 번째 바이트까지의 시간(TTFB): 사용자가 페이지를 요청한 시점부터 브라우저가 서버로부터 HTML 문서 응답의 첫 번째 바이트를 수신할 때까지 경과된 시간입니다.목표: $< 800\text {ms} $ (LCP 예산의 $40%$).
리소스 로드 지연: HTML 문서가 응답 바이트 수신을 완료한 시점과 브라우저가 LCP 리소스(예: 히어로 이미지)를 검색하여 가져오기 시작하는 시점 사이의 지연입니다.목표: $< 200\text {ms} $ (LCP 예산의 $10%$).
리소스 로드 기간: 브라우저가 네트워크를 통해 LCP 이미지 또는 글꼴 자산을 다운로드하는 데 필요한 기간입니다.목표: $< 800\text {ms} $ (LCP 예산의 $40%$).
요소 렌더링 지연: LCP 리소스 다운로드가 완료되는 시점과 브라우저가 레이아웃 계산을 완료하고 요소를 화면에 그리는 시점 사이의 시간입니다.목표: $< 200\text {ms} $ (LCP 예산의 $10%$).

수학적으로 총 LCP 대기 시간은 다음 네 가지 하위 부분의 합입니다.

$$\text {LCP} = \text {TTFB} + \text{리소스 로드 지연} + \text{리소스 로드 기간} + \text{요소 렌더링 지연}$$

LCP 최적화를 위한 입증된 기술

리소스 로드 지연 제거: 히어로 이미지 태그에 <link rel="preload" as="image" href="..."> 또는 fetchpriority="high"을 추가하면 HTML 구문 분석 중에 브라우저가 즉시 이미지 다운로드를 시작할 수 있습니다.
서버 응답 최적화(TTFB): CDN을 통해 에지 캐싱을 배포하고, 데이터베이스 쿼리 성능을 최적화하고, HTTP/2 또는 HTTP/3 서버 푸시 멀티플렉싱을 활용합니다.
이미지 압축 및 현대화: 모바일 및 데스크톱 화면 크기에 맞게 조정된 반응형 srcset 크기를 갖춘 최신 WebP 또는 AVIF 형식을 사용하여 히어로 이미지를 제공합니다.
렌더링 차단 리소스 감소: 중요한 CSS를 <head> 태그에 인라인하고 defer 또는 async 스크립트 속성을 사용하여 중요하지 않은 JavaScript를 연기합니다.
웹 글꼴 로딩 최적화: CSS @font-face 규칙에서 font-display: swap 또는 font-display: optional을 사용하여 네트워크를 통해 웹 글꼴 다운로드가 완료되는 동안 텍스트 블록이 즉시 표시되도록 합니다.

LCP 및 첫 번째 콘텐츠가 포함된 페인트(FCP) 및 속도 지수

LCP, FCP 및 Speed Index는 모두 로딩 성능을 측정하지만 페이지 로드 진행의 다양한 측면을 포착합니다.

컨텐츠가 포함된 첫 번째 페인트(FCP): 첫 번째 DOM 요소(예: 배경색, 스피너 또는 헤더 텍스트)가 화면에서 렌더링을 완료하는 시점을 측정합니다.
콘텐츠가 포함된 최대 페인트(LCP): 기본 시각적 콘텐츠 요소(히어로 배너 또는 기본 단락 블록)가 렌더링을 완료하는 시점을 측정합니다.
속도 지수: 시각적 진행 상황을 기록하는 동안 시간이 지남에 따라 시각적 콘텐츠가 뷰포트를 얼마나 빨리 채우는지 측정합니다.

LCP는 페이지 로드 완료에 대한 실제 사용자 인식과 가장 밀접하게 일치하기 때문에 Google의 Lighthouse 점수 알고리즘(현재 전체 성능 점수의 25%)의 로딩 측정항목 중에서 가장 높은 가중치가 부여됩니다.

SimpleOps을 사용한 지속적인 LCP 모니터링

SimpleOps은 단일 통합 모니터링 대시보드에서 종합 Lighthouse 실험실 감사 및 Chrome UX 보고서(CrUX) 필드 데이터세트 측정항목을 캡처하여 콘텐츠가 포함된 최대 페인트 추적을 자동화합니다.SimpleOps은 사이트의 75번째 백분위수 LCP가 2.5초 성능 예산을 위반할 때마다 즉각적인 사전 경고를 발송하여 팀이 전환 및 검색 순위를 보호할 수 있도록 지원합니다.