하위 요소 분석을 통한 Largest Contentful Paint 문제 해결

하위 요소 분석을 통한 Largest Contentful Paint 문제 해결 방법

Largest Contentful Paint(LCP)이 느리게 로딩되나요?

Google이 새롭게 도입한 LCP 하위 요소(Subparts)를 활용하면 페이지 로딩 지연의 원인을 정확히 파악할 수 있습니다. 이제 Chrome UX Report에서 이 데이터를 제공하여 실제 방문자들의 경험을 분석하고 사이트 속도를 개선할 수 있도록 돕습니다.

Largest Contentful Paint(LCP)란?

Core Web Vitals의 한 요소인 **Largest Contentful Paint(LCP)**는 사용자의 관점에서 웹사이트가 얼마나 빠르게 로드되는지를 측정하는 지표입니다. 사용자가 페이지를 열었을 때 가장 큰 콘텐츠 요소가 화면에 나타나는 데 걸리는 시간을 측정합니다.

만약 웹사이트의 LCP 속도가 느리다면, 사용자 경험이 나빠질 뿐만 아니라 Google 검색 순위도 낮아질 수 있습니다.

하지만 LCP 문제를 해결하려고 할 때, 어디를 집중적으로 개선해야 할지 모호한 경우가 많습니다.

서버 응답이 느린가?
이미지 크기가 너무 큰가?
콘텐츠가 제대로 표시되지 않는가?

이러한 문제를 해결하기 위해 Google은 최근 LCP 하위 요소(Subparts) 개념을 도입했습니다. 이를 통해 페이지 로딩 지연이 발생하는 원인을 보다 명확히 파악할 수 있습니다.

현재 Chrome UX Report에도 추가되어 실제 방문자의 웹사이트 로딩 경험을 분석할 수 있게 되었습니다.

이제 LCP 하위 요소가 무엇인지, 웹사이트 속도에 어떤 영향을 미치는지, 그리고 어떻게 측정할 수 있는지 살펴보겠습니다.

LCP 하위 요소 4가지

LCP 하위 요소는 LCP 측정값을 다음 4가지 구성 요소로 나뉩니다.

Time to First Byte(TTFB) – 서버가 문서 요청에 응답하는 속도
Resource Load Delay – LCP 이미지가 다운로드를 시작하기 전까지의 지연 시간
Resource Load Time – LCP 이미지가 다운로드되는 데 걸리는 시간
Element Render Delay – LCP 요소가 화면에 렌더링되기까지 걸리는 시간

참고:

LCP 요소가 이미지(또는 배경 이미지)인 경우에만 리소스 로딩 지연(Resource Load Delay)과 리소스 로드 시간(Resource Load Time) 이 적용됩니다.
텍스트 요소인 경우에는 Load Delay와 Load Time이 항상 0 입니다.

LCP 하위 요소 측정 방법

각 요소가 웹사이트의 LCP 속도에 얼마나 영향을 미치는지 측정하려면 Chrome UX Report 및 Chrome DevTools를 활용할 수 있습니다.

Chrome DevTools의 Performance 패널을 사용하면 LCP 이벤트와 관련된 타임라인을 자세히 분석할 수 있으며, CrUX 데이터를 활용하면 실제 사용자 환경에서 LCP 하위 요소가 어떻게 작동하는지 확인할 수 있습니다.

LCP 하위 요소 상세 분석

1. Time To First Byte(TTFB)

LCP 요소를 표시하기 위해 첫 번째로 HTML 문서를 가져옵니다.

서버 연결을 설정하는 데는 시간이 오래 걸리지 않지만, 서버가 HTML 페이지를 생성하는 시간이 가장 많은 비중을 차지합니다.

따라서 TTFB를 개선하려면 다음과 같은 방법을 고려해야 합니다.

서버 성능을 개선하여 HTML 생성을 빠르게 처리
캐싱을 활용하여 HTML을 미리 저장하고 빠르게 제공
CDN(Content Delivery Network) 활용

2. Resource Load Delay (리소스 로딩 지연)

LCP 요소(ex. 이미지)가 로드되기 전에 발생하는 지연 시간입니다.

이상적으로는 <img> 태그가 HTML 최상단에 있어야 하고, 브라우저가 즉시 이를 감지하여 로드를 시작해야 합니다.

하지만 일부 사이트에서는 lazy load(지연 로딩) 기능을 사용하여 이미지 로드를 지연시키는 경우가 있습니다.

예를 들어 lazysize.js 같은 JavaScript 라이브러리를 사용하면 LCP 이미지는 뷰포트에 표시될 때까지 로딩되지 않습니다.

해결 방법

<img> 태그에 loading="lazy" 속성을 사용하여 네이티브 lazy loading 적용
하지만 LCP 이미지는 lazy load를 사용하지 않는 것이 가장 좋음 (즉시 로딩해야 성능이 향상됨)

3. Resource Load Time (리소스 로드 시간)

LCP 요소(이미지)를 다운로드하는 데 걸리는 시간입니다.

이 요소를 최적화하려면 다음과 같은 방법을 사용할 수 있습니다.

최신 이미지 포맷(WebP, AVIF 등) 사용
이미지 크기를 표시 크기에 맞게 최적화
LCP 이미지보다 중요하지 않은 리소스의 우선순위 낮추기

4. Element Render Delay (렌더링 지연 시간)

이미지가 다운로드되었지만, 브라우저가 이를 화면에 표시하지 못하는 경우가 있습니다.

이런 경우 렌더링을 방해하는 요소를 제거해야 합니다.

렌더링 차단 스크립트와 스타일시트 제거 또는 최소화
LCP 이미지 미리 로드(preload) 적용

참고: 이미지를 미리 로드하면 다운로드 속도는 빨라지지만, 페이지가 렌더링되기 전에 이미지가 준비되면서 렌더링 지연이 발생할 수도 있습니다. 이는 최적화 과정에서 발견될 수 있는 또 다른 개선 포인트입니다.

CrUX 데이터에서 LCP 하위 요소 분석

Google은 2025년 2월부터 CrUX(Chrome UX Report)에 LCP 하위 요소 데이터를 추가했습니다.

2025년 2월부터 CrUX API 및 CrUX History API에 추가되었으며, DebugBear 등 CrUX API를 사용하는 다른 서드 파티 도구에도 차차 적용이 될 것으로 예상됩니다. 이를 활용하면 사이트 방문자의 실제 LCP 하위 요소 데이터를 조회하고 장기적인 성능 트렌드를 분석할 수 있습니다.

실제 방문자 데이터를 활용한 성능 모니터링

실험실(Lab) 데이터와 실제 사용자 경험이 다를 수 있기 때문에, CrUX 데이터만으로는 한계가 있습니다.

DebugBear 같은 실시간 사용자 모니터링(RUM) 도구를 활용하면 다음과 같은 일들을 할 수 있습니다.

모든 페이지의 LCP 성능을 추적
하위 요소별 분석 대시보드 제공
방문자의 실제 LCP 경험 확인

TI Tech Lab 이유진 연구원

하위 요소 분석을 통한 Largest Contentful Paint 문제 해결