한 줄 요약
웹 성능 최적화를 위한 Web Vitals 핵심 개념에 대해 알아보겠습니다.
성능 최적화가 중요한 이유
웹사이트의 성능은 사용자 경험(UX)과 비즈니스 성과에 큰 영향을 미칩니다. 페이지 로딩 시간이 길어질수록 사용자는 서비스를 이탈할 가능성이 높아지고, 전반적인 전환율이 감소합니다. 연구에 따르면, 페이지 로딩 시간이 1초 지연될 때마다 사용자의 약 10%가 사이트를 떠날 가능성이 높아진다고 합니다.
속도가 중요한 또 다른 이유는 검색 엔진 최적화(SEO)입니다. 구글은 웹사이트 속도를 검색 순위의 중요한 요소로 평가하며, 특히 모바일 검색 결과에서 속도가 중요한 역할을 합니다. 즉, 웹사이트가 빠르게 로딩될수록 검색 결과에서 더 높은 순위를 차지할 가능성이 커집니다.
기업 사례를 살펴보면, 성능 최적화가 실제 비즈니스 성장으로 이어질 수 있음을 알 수 있습니다.
예를 들어, Vodafone은 웹사이트의 주요 성능 지표인 LCP(다음 내용 참조) 를 31% 개선하여 판매량을 8% 증가시켰습니다. 또한, 웹사이트 성능을 개선하면 사용자 참여도가 증가하고, 반복 방문율도 높아지는 경향이 있습니다.
결론적으로, 웹사이트의 성능을 최적화하는 것은 단순한 기술적 개선이 아니라 사용자 만족도와 비즈니스 성공을 위한 필수 전략입니다.
Web Vitals란?
Web Vitals는 구글이 웹사이트 사용자 경험을 객관적으로 평가하기 위해 정의한 지표입니다. 페이지 로딩 속도, 사용자 인터랙션, 시각적 안정성을 핵심 지표로 분류하며, 이를 Core Web Vitals라 정의하고 있습니다.
Core Web Vitals를 모니터링하고 개선하기 위해 노력함으로써 다음의 목적들을 달성할 수 있습니다.
- 사용자 경험(UX) 개선
사용자 경험을 정량적으로 평가할 수 있도록 하여, 사이트 방문자의 이탈률을 낮추기 위해 활용할 수 있습니다. - SEO(검색 엔진 최적화) 최적화
Google은 Web Vitals 지표를 검색 순위 알고리즘에 반영하기 때문에 관련 지표를 개선하면 검색 결과에서 상위에 노출될 가능성이 높아집니다. - 전환율(Conversion Rate) 및 수익 증대
빠르고 안정적인 웹사이트는 사용자의 만족도를 높여, 이탈률이 낮아지며 최종적으로 매출 증가 및 비즈니스 성과 향상으로 이어질 수 있습니다. - 개발 생산성 향상 및 운영 효율성 증가
측정과 분석을 위한 도구들이 다양해 성능 문제를 빠르게 파악하고 해결할 수 있습니다. 또한 측정되는 데이터를 지속적으로 모니터링하기 쉬워 사이트 운영 효율성이 높아집니다.
2025년 3월 기준 Core Web Vitals를 구성하는 지표들은 LCP, INP, CLS이며 각 지표의 의미와 주요 내용에 대해 알아보겠습니다.
Core Web Vitals 구성 지표
1. LCP (Largest Contentful Paint)
LCP는 사용자가 페이지로 처음 이동한 시점을 기준으로 화면(View Port)에서 가장 큰 영역을 차지하는 콘텐츠(이미지, 텍스트 블록 또는 동영상) 가 화면에 나타나는 데 걸리는 시간을 측정합니다. 일반적으로 가장 큰 영역을 차지하는 콘텐츠는 해당 페이지의 핵심 요소일 가능성이 높아 해당 콘텐츠를 로드 중일 때 사용자는 페이지가 아직 완전히 로드되지 않은 것으로 인식하고 기다릴 수 있습니다. 따라서 가장 큰 콘텐츠는 최대한 빠르게 표시하여 체감 로드 속도를 높이는 것이 중요합니다.
LCP 측정 기준과 타임라인을 이해하기 위해 두 가지 사례를 비교해 보겠습니다.
첫 번째 예는 기사 메인 이미지가 가장 큰 콘텐츠이며 페이지의 모든 구성 요소가 로드된 후 마지막에 로드되어 표시되고 있습니다.
하지만 두 번째 예에서는 텍스트 단락이 가장 큰 콘텐츠이며 이미지나 로고와 같은 다른 구성 요소들이 로드되기 전에 가장 먼저 표시되고 있습니다.
예시와 같이 LCP에서는 페이지 내 요소들 중에서 화면에 가장 크게 보이는 콘텐츠의 표시 속도를 측정하며 다음과 같은 성능 기준을 제시하고 있습니다.
가장 큰 콘텐츠가 2.5초 이하로 화면에 표시되면 해당 사이트의 로딩 성능이 우수한 것으로 판단할 수 있으며, 2.5초 이상 특히 4.0초 이상으로 측정된다면 사용자 경험 개선을 위한 최적화가 필요할 것입니다.
2. CLS (Cumulative Layout Shift)
CLS는 사용자가 느끼는 시각적 안정성에 관한 지표로 페이지가 로드되는 동안 내부 레이아웃이 얼마나 변경되었는지 측정합니다. 예기치 않은 레이아웃 변화는 사용자가 읽던 위치를 놓치는 것부터 잘못된 링크나 버튼을 클릭하게 하는 것까지 사용자 경험을 심각히 저해하는 요인입니다.
이러한 문제는 주로 비동기적으로 로드되는 리소스나 동적으로 추가되는 DOM 요소로 인해 발생하며, 이미지나 비디오의 크기가 지정되지 않았거나, 글꼴이 예상치 못하게 렌더링 되거나, 서드 파티 광고나 위젯이 동적으로 크기를 조정할 때 발생할 수 있습니다.
CLS 지표는 화면 변경 비율(Impact Fraction)과 콘텐츠 이동 거리 비율(Distance Fraction)의 곱으로 계산되며, 각 요소의 측정 원리는 다음과 같습니다.
2-1. Impact Fraction
Impact Fraction은 화면에서 변경이 발생했던 영역이 차지하는 비율이며 위 상황을 예로 들어보겠습니다. 첫 번째 프레임에선 콘텐츠가 50%의 영역을 차지하고 있다가 다음 프레임에서 아래로 25% 이동하여 총 75% 영역에서 변경이 발행하였습니다. 따라서 해당 케이스의 Impact Fraction 값은 0.75이며, 측정값이 클수록 사용자는 시각적으로 큰 변화를 느끼게 됩니다.
2-2. Distance Fraction
Distance Fraction은 요소가 화면에서 이동한 거리를 나타내는 비율이며 동일한 상황을 예로 들어보겠습니다. 콘텐츠가 이동한 거리는 화면(View Port)의 25%이며 해당 상황의 Distance Fraction은 0.25입니다.
위 예시의 CLS 값을 계산하면 아래와 같습니다.
0.7(Impact Fraction) * 0.25(Distance Fraction) = 0.1875(CLS)
위 계산은 단일 세션에 대한 예시이며, 실제로는 여러 세션을 반복하여 가장 높은 값을 결과로 도출합니다. 1초 이내에 발생한 움직임들은 단일 세션으로 그룹화되어 합산되고, 변경이 발생한 특정 시점으로부터 1초를 초과한 변경은 새로운 세션으로 계산됩니다.
이런 원리로 CLS 지표로 사용자가 느끼는 시각적 안정성을 평가할 수 있으며 다음 기준이 제시되고 있습니다.
CLS 수치가 0.1 이하라면 해당 사이트는 시각적으로 안정적이나 0.25 이상으로 측정된다면 레이아웃 변화를 줄이는 등의 개선이 필요한 것으로 판단할 수 있습니다.
3. INP (Interaction to Next Paint)
INP는 웹 페이지의 전반적인 응답성을 평가하기 위한 측정 항목입니다. INP는 사용자가 페이지를 방문하는 동안 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하여, 가장 긴 지연 시간을 최종 INP 값으로 평가합니다. 따라서 INP 값이 낮을수록 사용자 상호작용에 빠르게 응답함을 의미합니다.
위 예시에서 보이는 바와 같이 사용자 행위에 느리게 응답하는 경우 사용자는 버튼이 클릭 되지 않았다고 생각하여 여러 번 클릭할 수 있습니다. 여러 번 요청된 클릭 이벤트가 뒤늦게 일괄 처리되면, 의도치 않게 메뉴가 열렸다가 닫히게 되어 사용자 경험이 크게 훼손되게 됩니다.
INP에 대해선 다음의 기준을 충족하는 것을 권장하고 있습니다.
사용자 동작에 200ms 이하로 피드백이 된다면 응답성이 우수한 것이고, 200ms를 초과하는 경우 개선이 필요하다고 판단할 수 있습니다.
Core Web Vitals 라이프 사이클
Core Web Vitals 지표 구성은 라이프 사이클 프로세스 하에 관리되며, 개발 트렌드와 커뮤니티의 의견을 수렴하여 지속적으로 진화하고 있습니다. 위와 같이 INP의 경우 2022년부터 도입 논의를 시작하여 2024년에 FID(First Input Delay)를 대체하는 지표가 되었습니다.
그 외 지표
Web Vitals는 앞서 소개한 핵심 지표들 외에도 이를 보완할 수 있는 보조 지표들을 함께 제공하며, 다음과 같은 지표들이 있습니다.
- First Contentful Paint (FCP)
사용자가 페이지로 처음 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링 되는 시점까지의 시간입니다. - Time to First Byte (TTFB)
브라우저가 서버에서 첫 번째 바이트를 받는 데 걸린 시간이며, 백엔드의 응답 성능을 파악하는 데 활용합니다. - Total Blocking Time (TBT)
페이지가 로딩되는 동안 메인 스레드가 차단된 총시간이며, 사용자의 입력에 대한 반응성을 파악하는 데 활용합니다.
Web Vitals 측정과 분석
필드 데이터와 실험실 데이터
측정과 분석 방법을 알아보기에 앞서 수집 방법에 따라 구분되는 데이터의 특성을 살펴보겠습니다.
| 비교 항목 | 필드 데이터 | 실험실 데이터 |
|---|---|---|
| 측정 환경 | 실제 사용자 환경 | 개발 또는 특정 테스트 환경 |
| 측정 변수 | 네트워크 상태, 기기 사양, 브라우저 등 | 테스트 환경으로 고정됨 |
| SEO 반영 여부 | 검색 순위에 반영됨 | 검색 순위에 영향 없음 |
결론적으로, 상시로 실험 데이터를 측정하여 지표 개선 작업을 수행하되, 실제 작업이 적용된 필드에서 데이터를 수집하고 지표를 통해 사용자 경험이 올바르게 유지되는지 관리해야겠습니다. 단, 사용자 환경이 모두 일정 사양 이상일 수는 없으므로 수집된 필드 데이터 중 75% 분위 측정값이 Core Web Vitals 기준 지표에 부합(사용자의 75% 이상이 기준 충족) 되도록 개선하는 것을 목표로 합니다.
측정 방법
Core Web Vitals 지표를 측정하기 위한 도구는 다양하며, 이 중 몇 가지 방법에 대해 알아보겠습니다.
Chrome 개발자 도구
Web Vitals를 확인하는 가장 간단한 방법은 크롬 브라우저의 개발자 도구를 활용하는 방법입니다. 성능 탭으로 Core Web Vitals 지표와 세부 측정 데이터를 확인할 수 있으며, Lighthouse 탭의 분석 기능을 통해 보조 지표가 포함된 데이터까지 확인할 수 있습니다.
PageSpeed Insights
PageSpeed Insights에 URL을 입력하면 해당 사이트의 Web Vitals의 필드 데이터와 함께 개선 가이드까지 확인할 수 있습니다.
Web-vitals JavaScript 라이브러리
만약 일반적으로 제공되는 방법으로 확인 불가능한 필드 데이터를 수집하고 싶다면 web-vitals javascript 라이브러리를 활용할 수 있습니다. 예를 들어 SPA(Single Page Application)의 경우 페이지 이동이 제한적이라 MPA(Multi Page Application)에 비해 수집되는 데이터가 제한적일 수 있는데 직접 API를 호출하여 데이터 수집 타이밍을 결정할 수 있습니다.
그 외의 방법과 자세한 내용을 알고 싶으시면, 아래 링크를 참고해 주세요.
Conclusion
서비스의 성공을 위해선 지속적인 성능 최적화를 통해 좋은 사용자 경험을 극대화하는 것이 중요합니다. 구글은 오랜 기간의 고민을 통해 Web Vitals를 정의하여 공개하고 있으며, 이에 더해 다양한 도구를 제공하고 있습니다. 또한, Core Web Vitals를 도입하고 투자하여 비즈니스 성과를 도출한 수많은 성공 사례가 있습니다. 저희 역시 서비스 성공의 핵심 요소인 성능 최적화에 체계적으로 접근하며, 지속적인 개선을 위해 노력하고 있습니다.