4. Resource load delay 줄이기

LCP 리소스가 로딩을 시작하는 시간을 줄이는 것이 LCP를 개선할 수 있는 첫 번째 방법으로,

이론상 리소스 로딩을 시작할 수 있는 가장 빠른 시기는 TTFB 바로 직후이지만, 실제로 브라우저가 리소스를 실제로 로딩을 시작하기 전까지는 항상 약간의 지연 시간이 발생함

Eliminate-resource-load-delay

따라서 스타일 시트(.css)와 같은 정적 리소스가 TTFB 이후 첫 번째로 로딩 될 때, LCP 리소스도 동시에 로딩되도록 하는 것이 좋음
반대로 말해서, 만약 LCP 리소스가 첫 번째 리소스보다 조금 늦게 로딩을 시작한다면 그 시간 차이만큼 개선이 가능하다는 것을 의미함

1. LCP 리소스 로딩 속도 최적화에 영향을 미치는 요인

LCP 리소스의 로딩을 빨리 수행하는데에 영향을 미치는 요인은 두 가지가 있음

리소스가 발견되는 시점
리소스에 부여된 우선순위(별도 참조)

1-1. 리소스가 발견되는 시점을 통해 최적화하기

LCP 리소스를 최대한 빨리 로딩하기 위해서는 브라우저가 제공하는 사전 로딩 스캐너(Preload scanner)를 통해 LCP 리소스가 특정 페이지에 대한 HTTP 요청으로 응답받은 HTML 문서상에서 발견될 수 있어야 함(discoverable)

다음과 같은 경우에 브라우저는 HTML 문서를 스캔하여 LCP 리소스를 찾을 수 있음

브라우저가 HTML 문서를 스캔하는 과정에서 LCP 리소스를 발견(Discover)할 수 있는 케이스
- src나 srcset 속성을 가지고 있는 <img> 엘리먼트
- CSS 배경 이미지를 필요로 하는 LCP 리소스 중에서 해당 이미지가 <link rel="preload">를 통해 사전 로딩된 리소스
- 웹 폰트를 필요로 하는 텍스트 노드 중에서 해당 웹 폰트가 <link rel="preload">를 통해 사전 로딩된 리소스
브라우저가 LCP 리소스를 발견할 수 없는 케이스
- JavaScript에 의해 페이지에 동적으로 추가되는 <img> 엘리먼트
- JavaScript 라이브러리에 의해 지연 로딩되도록 작성되어 있는 경우
- CSS 배경 이미지를 필요로 하는 LCP 리소스

이렇게 LCP 리소스가 미리 발견되지 않은 경우, 브라우저는 스크립트를 실행하거나 스타일 시트를 적용해야 하는데 해당 리소스들은 네트워크 요청을 통해 받아와야 하기 때문에, LCP 리소스를 발견하고 로딩하려면 먼저 네트워크 요청이 완료될 때까지 기다려야 함

따라서 불필요한 리소스 로드 지연(resource load delay)을 제거하기 위해서는 HTML 문서에서 LCP 리소스를 발견할 수 있어야 함

만약 LCP 리소스가 외부 CSS 파일이나 JavaScript 파일에서만 참조되는 경우에는, 다음과 같이 해당 리소스를 높은 우선순위로 먼저 가져오게 하는 옵션을 통해 미리 로딩되게 해야함

index.html


<!-- Load the stylesheet that will reference the LCP image. -->
<link rel="stylesheet" href="/path/to/styles.css">
 
<!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">