오늘은 웹 성능의 가장 중요한 지표로 사용되는 Core Web Vital을 개선한 과정에 대해서 설명드리겠습니다.
코어 웹 바이탈은 구글이 2020년 이후부터 검색 순위 알고리즘에 반영 중인 SEO 핵심 지표라고 할 수 있습니다.
코어 웹 바이탈은 총 3가지로 구성되어 있습니다.
Largest Contentful Paint는 최대로 의미 있는 페인트가 완료될 때까지의 시간인데, 화면에서 가장 큰 콘텐츠의 페인트가 완료되는 시점이라고 생각하셔도 됩니다.
First Input Delay는 렌더링 이후 사용자가 처음으로 상호작용할 때까지 걸리는 지연입니다.
Cumulative Layout Shift는 누적 레이아웃 시프트라고도 부르고 렌더링 이후 레이아웃의 변화를 감지하는 지표입니다. 예를 들어, 로딩 시 스켈레톤 UI를 적용하면 개선할 수 있습니다.
이 중 최대로 의미있는 페인트가 완료될 때까지의 시간을 의미하는 LCP를 개선한 과정을 설명드리겠습니다.
이 페이지에서 최대 컨텐츠(가장 의미 있는 요소)는 무엇일까요?
오른쪽에 있는 양복을 입은 여우의 이미지입니다.
LCP의 대상인 오른쪽 이미지를 얼마나 빨리 로딩하느냐에 따라 사용자가 사이트 반응성을 체감하게 됩니다..
이거는 개선 전 라이트 하우스 지표입니다.
여기서 주목해야 할 점은 LCP가 2.5초 걸렸다는 겁니다.
구글은 LCP가 2.5초 이상이면 개선이 필요하다고 밝혔는데요
저희 사이트 메인 페이지의 LCP는 개선이 필요한 상태였습니다.
LCP의 구성요소는 다음과 같습니다.
핵심만 따져보면 가장 중요한 포인트는 로드 시간을 줄여서 최대한 컨텐츠가 빨리 뜨게 만드는 것입니다.
다음과 같은 여러 가지의 기법이 사용됩니다.
-
이미지를 캐싱해서 빠르게 다운 받을 수 있게 하는 CDN 사용
-
이미지의 포맷이나 크기를 조정
-
폰트나 이미지를 사용 전에 백그라운드에서 프리로드
-
코드 스플리팅을 통해 초기 로드 크기를 줄이고, 필요한 시점에 모듈을 지연 로드
저희 사이트에는 다음과 같은 3가지의 시도를 했습니다.
우선 이미지 파일의 포맷을 압축률이 높은 포맷으로 바꾼 후 프리로드를 적용했습니다.
두 번째로 리액트의 레이지와 Vite의 라이브러리 모듈화를 적용했습니다. 다만, 저희 서비스 특성상 초기 렌더링에 큰 이점이 없어 롤백했습니다.
결과적으로 퍼포먼스 100점, SEO 100점을 달성할 수 있었습니다. 또한 LCP를 2.5초에서 0.6초로 개선할 수 있었습니다.
결론
이미지 포맷 최적화 및 프리로드 적용을 통해 가장 큰 컨텐츠인 메인 이미지의 로딩 속도를 개선했습니다.
또한 지속적인 성능 측정으로 불필요한 시도는 과감히 롤백하며 핵심 개선 포인트에 집중했습니다.
그 결과, LCP를 2.5초에서 0.6초로 단축하고, 라이트하우스 지표에서 퍼포먼스와 SEO 100점을 달성할 수 있었습니다.
이를 통해 사용자는 사이트에 진입하자마자 빠른 반응성을 체감할 수 있다는 피드백을 받았고, UX를 개선할 수 있었습니다.
