[FE] Web Vitals 지표 최적화(1) - LCP 최적화

Web Vitals 소개

Web Vitals은 사용자의 웹사이트 경험을 측정하는 일련의 중요한 지표들입니다. 

이 지표들은 웹사이트의 성능, 사용자 경험, 안정성 등을 평가하는 데 중요한 역할을 하며, 웹 개발자와 사이트 운영자들에게 사용자 중심의 성능 지표를 제공할 수 있습니다.

 

왜 측정할까?

웹사이트를 이용하는 사용자의 경험을 향상하기 위해 어떤 점을 개선해야 하는지 명확한 지표를 통해 알 수 있습니다. 

 

Core Web Vitals

Web Vitals 지표들 중에서 웹사이트의 핵심 사용자 경험을 평가하는데 필수적인 지표들을 Core Web Vitals라고 합니다.

Core Web Vitals의 세 가지 주요 요소

출처 : https://developers-kr.googleblog.com/2020/05/Introducing-Web-Vitals.html

Core Web Vitals는 위의 사진의 세 가지 지표로 구성됩니다. 이 지표들은 사용자가 웹사이트를 방문하고 이동할 때의 속도, 반응성, 그리고 시각적 안정성을 측정합니다.

 

이제 하나씩 살펴보면서 각각의 지표에 대해 알아보고 지표 값을 최적화하는 방법에 대해 알아보겠습니다.

LCP (Largest Contentful Paint)

인스타그램의 LCP 타임라인 (출처 : https://web.dev/articles/lcp?hl=ko)

사용자가 페이지를 방문한 후 가장 큰 콘텐츠(이미지나 비디오 등)가 화면에 로딩되어 표시되기까지 걸린 시간을 측정하는 지표입니다. 이 지표는 FCP(First Contentful Paint)와 TTFB(Time to First Byte)에도 의존합니다.

• FCP는 페이지의 첫 번째 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 지표입니다.
• TTFB는 방문자가 페이지 탐색을 시작한 후 링크 클릭과 같이 서버에 요청을 보냈을 때 첫 번째 바이트가 수신될 때까지의 시간입니다.

출처 : https://web.dev/articles/ttfb?hl=ko, https://web.dev/articles/fcp?hl=ko

TTFB는 FCP 및 LCP와 같은 사용자 중심 측정항목보다 우선적인 단계로, 서버가 요청에 빠르게 응답하지 못한다면, LCP를 달성하기가 어렵거나 불가능하기 때문에 빠르게 응답하는 것이 좋습니다.

 

빠른 LCP는 웹사이트의 가장 중요한 콘텐츠를 더 빠르게 렌더링 하는데 도움이 되어, 전반적인 사용자 경험을 향상시킵니다. 또한 사용자 만족도를 높이고 이탈률을 낮출 수 있습니다.

LCP 분류

모든 페이지의 LCP는 다음 4가지 하위 카테고리로 구성됩니다.

출처 : https://web.dev/articles/optimize-lcp?hl=ko

• TTFB
• 리소스 로드 지연 : TTFB부터 브라우저가 LCP 리소스 로드를 시작하는 시점 사이의 시간
• 리소스 로드 시간 : LCP 리소스 자체를 로드하는 데 걸리는 시간
• 요소 렌더링 지연 : LCP 리소스의 로드가 완료된 시점부터 LCP 요소가 완전히 렌더링 될 때까지의 시간

이상적인 LCP 분포는 지연과 관련된 두 하위 카테고리(리소스 로드 지연, 요소 렌더링 지연)는 최대한 축소되어야 하고, 네트워크 요청과 관련이 있는 카테고리(TTFB, 리소스 로드 시간)는 기본적으로 시간이 소요되는 작업이기 때문에 완전히 최적화할 수 없습니다.

LCP 최적화

리소스 로드 지연 최적화

LCP 리소스가 최대한 빨리 로드가 시작되도록 해 리소스 로딩 지연을 줄일 수 있습니다. 밑의 그림과 같이 LCP 요소가 Stylesheet와 동시에 로드할 수 있도록 해 LCP 지표를 향상할 수 있습니다.

출처 : https://web.dev/articles/optimize-lcp?hl=ko

LCP 리소스의 로드 속도에 영향을 미치는 요소는 두 가지가 있습니다.

• 리소스가 검색되는 시점
• 리소스에 지정된 우선순위

LCP 요소가 빨리 로드되기 시작하려면 브라우저의 스캐너가 HTML 문서에서 해당 리소스를 검색할 수 있어야 합니다. 하지만 JS에 의해 동적으로 추가된 요소나 CSS 배경 이미지가 필요한 요소의 경우에는 검색할 수 없으므로 유의해야 합니다.

 

LCP 요소가 검색이 가능하더라도 가장 빠르게 로드되지 않을 수 있기 때문에 리소스의 우선순위를 높이는 속성을 사용해 로드 속도를 향상할 수 있습니다. 

<link rel="preload">을 사용해 리소스를 미리 로드하고 로드 우선순위를 높일 수 있습니다.

<link rel="preload" href="이미지 경로" />

 

fetchpriority 속성을 사용해 리소스 로드 우선순위를 높일 수 있습니다.

<img fetchpriority="high" src="이미지 경로">

추가로 next/image를 사용하는 경우, priority 속성을 true로 설정하여 preload와 같이 리소스를 미리 로드하고 높은 우선순위를 제공할 수 있습니다.

Next 공식 문서

Components: <Image> | Next.js



요소 렌더링 지연 최적화

LCP 요소의 로드가 완료된 후 즉시 렌더링 될 수 있도록 해 렌더링 지연을 줄일 수 있습니다. LCP 요소가 로드가 완료된 후에 즉시 렌더링 되지 않는 이유는 렌더링이 차단되어 있기 때문입니다.

출처 : https://web.dev/articles/optimize-lcp?hl=ko

위의 그림과 같이 LCP 요소는 로드되었지만, LCP 요소보다 Stylesheet가 너무 커서 로드하는데 더 많은 시간이 걸리는 경우, LCP 요소의 렌더링이 차단될 수 있습니다. 이를 해결하기 Stylesheet의 크기를 줄이기 위해 사용하지 않는 CSS를 삭제하고, 중요하지 않은 CSS를 연기하거나 CSS를 축소 및 압축해야 합니다. 또한 짧은 스타일의 경우 인라인 스타일로 추가하는 것이 도움이 될 수 있습니다.

 

리소스 로드 시간 최적화

LCP 리소스 자체를 로드하는 데 걸리는 시간을 줄이기 위해서는 리소스의 크기를 줄여야 합니다.

• 이미지의 경우
  • 렌더링 되는 이미지 사이즈에 맞게 이미지 리사이징
  • AVIF 또는 Webp 형식의 이미지 사용
  • 이미지 압축
• 웹 글꼴 크기 줄이기
  • WOFF와 WOFF 2.0의 경우 압축 사용

 

FID와 CLS 최적화에 대한 내용은 다음 글에서 다루어보겠습니다!

참고 자료

https://developers-kr.googleblog.com/2020/05/Introducing-Web-Vitals.html

https://web.dev/articles/vitals?hl=ko

https://www.ascentkorea.com/core-web-vitals/