Web - Largest Contentful Paint

개념
뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정1

해당 시점에 따라 UX에 엄청난 영향을 끼칩니다. 느리면 느릴 수록 사용자가 메인 컨텐츠를 보기에 많은 시간을 기다려야 하기 때문이죠. 예를 들면, 영상을 보는 페이지에 접근한다고 가정해봅시다. 영상을 보기 위해 페이지에 접근 후 영상은 로딩중이고 그 외의 UI만 노출되고 있다면 사용자는 영상이 보여지기 전까지 기다려야 하는 상황입니다. 다른 UI는 의미가 없죠. 이래서 LCP가 중요합니다.

성능 기준

좋음	~ 2.5sec
성능 개선 필요	2.5 sec ~ 4.0 sec
나쁨	4.0 sec ~

개선 방법
SSR
CSR로만 되어 있다면 SSR를 고려해볼 필요가 있다.

느린 서버 응답 시간
Time to First Byte를 확인해 볼 필요가 있다고 생각합니다.
CDN을 두거나, 글로벌 서비스라면 각 나라별로 캐쉬 서버 또는 백엔드 서버를 배치하는 하는 방법도 있을 수 있네요.

서버 최적화
페이지를 그리기 위해서 API응답 속도를 확인해볼 필요가 있습니다.
DB index, 로컬 캐쉬, 글로벌 캐쉬 등등 고려해볼 수 있겠네요.
또한 HTML 문서 자체를 캐쉬하는 nginx, apache, varnish가 있을 수 있겠네요

service worker
PWA(Progressive Web App)에서 사용하는 것인데요. 백그라운드에서 실행되어 서버의 요청을 가로채어 캐쉬가 가능합니다.

preconnect
문서에 타사 도메인으로 많은 리소스 요청이 있다면, 해당 도메인의 커넥션을 미리 연결하여 리소스를 조금 더 빨리 가져 올 수 있습니다.2

페이지가 다른 원본에 대한 연결을 설정하고 가능한 한 빨리 프로세스가 시작되기를 원한다는 것을 브라우저에 알립니다.

AS-IS / TO-BE 비교 이미지

<link rel="preconnect" href="https://example.com" />

dns-prefetch
도메인 조회를 더 빠르게

<link rel="dns-prefetch" href="https://example.com" />

 

중요한 리소스 미리 로드

<link rel="preload" as="image" href="img.png" />

 

사용자 네트워크 상황에 따른 적절한 리소스 노출
네트워크 연결상태가 좋다면, 조금더 고품질의 리소스를 제공하고 그렇지 않으면, 압축되거나 다른 형태의 리소스를 제공해주어서 LCP 최적화에 도움을 주자. 

if (navigator.connection && navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Load video
  } else {
    // Load image
  }
}

 

마무리
web.dev에서 읽은 내용을 내가 필요한 정보들만 정리해 놓았으므로, 자세한 정보를 원한다면 아래의 링크에서 확인해보자. 개선사항들을 직접 테스트해보고 결과를 알려주겠다.

 

참고
최대 콘텐츠풀 페인트 최적화
사전 연결로 페이지 로드 속도 향상
Establish network connections early to improve perceived page speed
적응형 게재