2. LCP의 세부 구성요소

LCP 지표를 개선하기 위해서는 LCP 지표를 구성하는 세부 요소들에 대해 먼저 이해해야 함

다음은 네트워크를 통해 HTML 문서(.html)부터 스타일 시트(.css), 스크립트(.js) 및 그 외 이미지나 영상과 같이 페이지에 필요한 부가적인 리소스들을 순차적으로 받아오는 과정을 나타낸 네트워크 워터폴 이미지로, 두 번째 이미지에는 LCP의 세부 구성요소가 #1 ~ #4로 구분되어 표시되어 있음

1. LCP의 세부 구성요소

LCP는 크게 네 가지의 세부 요소로 구성되어 있음

1-1. Time to First Byte(TTFB) 

The time from when the user initiates loading the page until the browser receives the first byte of the HTML document response.

TTFB란 사용자가 페이지 로딩을 시작한 시점부터 브라우저가 서버로 요청한 HTML 문서가 포함된 HTTP 응답의 첫 번째 바이트를 받을 때까지 걸리는 시간으로, 서버가 얼마나 빨리 응답을 시작하는지를 의미함
→ 서버의 처리 속도, 네트워크 지연(latency), 백엔드 처리 로직 등에 영향을 받음

1-2. Resource load delay

The time between TTFB and when the browser starts loading the LCP resource. If the LCP element doesn’t require a resource load to render (for example, if the element is a text node rendered with a system font), this time is 0.

Resource load delay란, TTFB 이후부터 브라우저가 LCP 리소스(ex. 이미지)를 다운로드하는 작업을 시작하기 전까지 소요된 시간으로, 만약 LCP 리소스가 별도의 리소스 다운로드를 필요로 하지 않는 경우 이 시간은 0이라고 볼 수 있음
ex. 시스템(OS) 내 자체 폰트로 렌더링되는 텍스트 노드

1-3. Resource load duration

The duration of time it takes to load the LCP resource itself. If the LCP element doesn’t require a resource load to render, this time is 0.

Resource load duration이란, LCP 리소스를 실제로 로딩(다운로드)하는데 걸리는 시간으로,
이미지나 비디오와 같은 리소스의 다운로드 속도나 네트워크 상태, CDN, 이미지 용량 등에 따라 달라짐

1-4. Element render delay

The time between when the LCP resource finishes loading and the LCP element rendering fully.

Element render delay란, LCP 리소스의 로딩이 완료된 이후부터 해당 리소스가 페이지에 렌더링되기까지 걸리는 시간으로,
리소스를 다 받아도 CSS나 레이아웃 계산이 끝나지 않으면 실제 렌더링이 지연될 수 있음
그 외 브라우저의 렌더링 병목, 복잡한 스타일링 코드, 자바스크립트 실행 등도 마찬가지