서브 파트 분석을 통해 가장 큰 콘텐츠 페인트 문제를 해결하는 방법

느린 만족도가 높은 페인트 (LCP)로 어려움을 겪고 있습니까? Google에서 새로 소개 한 LCP 서브 파트는 페이지로드 지연이 어디에서 나오는지 지적하는 데 도움이됩니다. 이제 Chrome UX 보고서 에서이 데이터는 사이트 속도를 높이고 순위를 높이는 실제 방문자 통찰력을 제공합니다. Matt Zeunert는 LCP 서브 파트가 무엇인지, 웹 사이트 속도에 대한 의미 및 측정 방법을 풀립니다.

Core Web Vitals에서 가장 큰 콘텐츠 페인트 (LCP)는 웹 사이트가 방문자의 관점에서 얼마나 빨리로드되는지를 측정합니다. 페이지를 열린 후 가장 큰 컨텐츠 요소가 표시되는 시간을 살펴 봅니다. 웹 사이트가 느리게로드되는 경우 사용자 경험이 좋지 않으며 사이트가 Google에서 낮게 순위가 매겨 질 수 있습니다.

LCP 문제를 해결하려고 할 때 집중해야 할 것이 항상 명확하지는 않습니다. 서버가 너무 느립니다. 이미지가 너무 큽니까? 내용이 표시되지 않습니까? Google은 최근 LCP 서브 파트를 도입하여이를 해결하기 위해 노력하고 있으며, 이는 페이지로드 지연이 어디에서 나오는지 알려줍니다. 또한이 데이터를 Chrome UX 보고서에 추가하여 웹 사이트의 실제 방문자에게 지연되는 원인을 확인할 수 있습니다!

LCP 서브 파트가 무엇인지, 웹 사이트 속도에 대한 의미 및 측정 방법을 살펴 보겠습니다.

4 개의 LCP 서브 파트

LCP 서브 파트는 가장 큰 콘텐츠 페인트 메트릭을 네 가지 구성 요소로 나눕니다.

첫 바이트까지의 시간 (TTFB): 서버가 문서 요청에 얼마나 빨리 응답하는지.
자원 부하 지연: LCP 이미지가 다운로드되기 전에 보낸 시간.
리소스로드 시간: LCP 이미지를 다운로드하는 데 소요되는 시간.
요소 렌더링 지연: LCP 요소가 표시되기 전의 시간.

리소스 타이밍은 가장 큰 페이지 요소가 이미지 또는 배경 이미지 인 경우에만 적용됩니다. 텍스트 요소의 경우로드 지연 및 하중 시간 구성 요소는 항상 0입니다.

LCP 서브 파트를 측정하는 방법

웹 사이트의 LCP 점수에 기여하는 각 구성 요소의 양을 측정하는 한 가지 방법은 Debugbear의 웹 사이트 속도 테스트를 사용하는 것입니다. LCP 점수와 관련된 서브 파트 및 기타 세부 사항을 볼 수 있도록 최대의 만족스러운 페인트 메트릭을 확장하십시오.

여기서는 TTFB 및 이미지로드 기간이 함께 전체 LCP 점수의 78%를 차지한다는 것을 알 수 있습니다. 이 두 구성 요소는 최적화를 시작하기에 가장 영향력있는 장소라는 것을 알려줍니다.

이 각 단계에서 무슨 일이 일어나고 있습니까? 네트워크 요청 Waterfall은 각 단계를 통해 어떤 자원을로드하고 있는지 이해하는 데 도움이 될 수 있습니다.

LCP 이미지 발견보기는 폭포 시각화를 가장 큰 콘텐츠 페인트 이미지를 표시하는 것과 관련된 리소스로 필터링됩니다. 이 경우, 처음 3 단계 각 단계에는 하나의 요청이 포함되며 최종 단계는 새로운 리소스로드되지 않아 빠르게 마무리됩니다. 그러나 그것은 당신의 특정 웹 사이트에 달려 있으며 항상 그런 것은 아닙니다.

첫 바이트까지의 시간

가장 큰 페이지 요소를 표시하는 첫 번째 단계는 문서 HTML을 가져 오는 것입니다. 우리는 최근 TTFB 지표를 개선하는 방법에 대한 기사를 발표했습니다.

이 예에서는 서버 연결을 만드는 데 시간이 오래 걸리지 않는다는 것을 알 수 있습니다. 대부분의 시간은 서버가 페이지 HTML을 생성하기를 기다리는 데 소비됩니다. 따라서 TTFB를 개선하려면 해당 프로세스 속도를 높이거나 HTML을 캐시하여 HTML 생성을 완전히 건너 뛸 수 있습니다.

자원 부하 지연

로드하려는 “자원”은 LCP 이미지입니다. 이상적으로는, 우리는 단지 an을 가지고 있습니다 HTML 상단 근처에 태그를 지정하면 브라우저가 즉시 찾아로드를 시작합니다.

그러나 때때로, 우리는 여기서와 마찬가지로로드 지연이 발생합니다. 이미지를 직접로드하는 대신 페이지가 사용됩니다 lazysize.js,,, 이미지 게으른 로딩 라이브러리 LCP 이미지가 뷰포트에 나타날 것을 감지 한 후에 만로드합니다.

하중 지연의 일부는 JavaScript 라이브러리를 다운로드해야합니다. 그러나 브라우저는 도서관이 이미지가 뷰포트에 있음을 알기 전에 페이지 레이아웃을 완료하고 컨텐츠 렌더링을 시작해야합니다. 요청을 완료 한 후 페이지가 렌더링을 시작할 때 CPU 작업 (주황색)이 있습니다. 그래야만 라이브러리가 LCP 이미지 요청을 트리거합니다.

이것을 어떻게 최적화합니까? 우선, 게으른 하중 라이브러리를 사용하는 대신 네이티브를 사용할 수 있습니다. loading="lazy" 이미지 속성. 그렇게하면 이미지를로드합니다 더 이상 JavaScript 코드로드에 의존하지 않습니다.

그러나보다 구체적으로, LCP 이미지를 게으르게로드해서는 안됩니다. 이렇게하면 HTML 코드가 준비 되 자마자 브라우저가로드를 시작할 수 있습니다. Google에 따르면 자원 부하 지연을 완전히 제거해야합니다.

리소스로드 기간

로드 기간 서브 파트가 아마도 가장 간단 할 것입니다. LCP 이미지를 표시하기 전에 LCP 이미지를 다운로드해야합니다!

이 예에서는 이미지가 HTML과 동일한 도메인에서로드됩니다. 브라우저가 새 서버에 연결할 필요가 없기 때문에 좋습니다.

부하 지연을 줄이기 위해 사용할 수있는 다른 기술 :

요소 렌더링 지연

네 번째이자 최종 LCP 구성 요소 인 렌더링 지연은 종종 가장 혼란 스럽습니다. 리소스가로드되었지만 어떤 이유로 든 브라우저는 아직 사용자에게 표시 할 준비가되지 않았습니다!

운 좋게도, 우리가 지금까지보고있는 예에서 LCP 이미지가로드 된 후에 빠르게 나타납니다. 렌더 지연의 일반적인 이유 중 하나는 LCP 요소는 이미지가 아닙니다. 이 경우 렌더 지연은 발생합니다 렌더 블로킹 스크립트 그리고 스타일 시트. 텍스트는 이러한로드 된 후에 만 표시 될 수 있으며 브라우저가 렌더링 프로세스를 완료했습니다.

렌더 지연을 볼 수있는 또 다른 이유는 웹 사이트가 LCP 이미지를 예방할 때입니다. 사전 로딩은 부하 지연을 실질적으로 제거하고 이미지가 일찍로드되도록하기 때문에 좋은 생각입니다.

그러나 페이지가 렌더링되기 전에 이미지가 다운로드가 완료되면 페이지의 렌더 지연이 증가 할 것입니다. 그리고 괜찮습니다! 웹 사이트 속도를 전반적으로 개선했지만 이미지를 최적화 한 후에는 새로운 병목 현상을 발견했습니다.

실제 사용자 Crux 데이터의 LCP 하위 부분

실험실 기반 테스트에서 가장 큰 콘텐츠 페인트 서브 파트를 살펴보면 최적화 할 수있는 위치에 대한 많은 통찰력을 제공 할 수 있습니다. 그러나 너무 자주, 실험실의 LCP는 실제 사용자에게 일어나는 일에 맞지 않습니다!

그렇기 때문에 2025 년 2 월 Google은 Crux 데이터 보고서에 서브 파트 데이터를 포함시키기 시작했습니다. Pagespeed Insights에 포함되지는 않았지만 Debugbear의 “Web Vitals”탭에서 이러한 메트릭을 볼 수 있습니다.

여기서 유용한 정보 중 하나입니다 LCP 리소스 유형: LCP 요소를 텍스트 요소 나 이미지로 보았는지 알려줍니다.

같은 페이지에서도 다른 방문자는 약간 다른 콘텐츠를 볼 수 있습니다. 예를 들어, 장치 크기에 따라 다른 요소가 보이거나 일부 방문자는 쿠키 배너를 보는 반면 다른 방문자는 실제 페이지 내용을 보게됩니다.

데이터를 더 쉽게 해석 할 수 있도록 Google은 이미지에 대한 하위 부분 데이터 만보고합니다.

LCP 요소가 일반적으로 페이지의 텍스트 인 경우 대부분의 방문자에게는 적용되지 않으므로 하위 파트 정보가 그다지 도움이되지 않습니다.

그러나 텍스트 LCP를 분해하는 것은 비교적 쉽습니다. TTFB 점수의 일부가 아닌 모든 것은 렌더링됩니다.

실제 사용자 모니터링으로 웹 사이트에서 하위 부분을 추적하십시오

실험실 데이터는 항상 실제 사용자가 경험하는 것과 일치하지 않습니다. Crux 데이터는 피상적이며 교통량이 많은 페이지에 대해서만보고되었습니다그리고 적어도 필요합니다 4 주 변경 후 완전히 업데이트됩니다.

그렇기 때문에 Debugbear와 같은 실제 사용자 모니터링 도구가 LCP 점수를 수정할 때 유용합니다. 당신은 할 수 있습니다 모든 페이지에서 점수를 추적합니다 시간이 지남에 따라 귀하의 웹 사이트에서 각 LCP 서브 파트에 대한 전용 대시 보드를 받으십시오.