Core Web Vitals
히스토리
웹사이트 성능을 측정하는 Core Web Vitals는 2014년부터 Google의 여러 팀이 협력하여 AMP 프로젝트의 한계를 극복하고, 모든 웹사이트에 적용 가능한 개방형 표준 성능 지표를 정의하려는 노력에서 시작했다.
2020년 5월 세 가지 핵심 지표(로딩 속도의 LCP, 상호작용 응답성의 FID, 시각적 안정성의 CLS)가 공식 발표되었으며, 실제 사용자 경험을 반영하는 필드 측정 가능한 지표로 설계되었다.
2021년 Google Search의 Page Experience 업데이트를 통해 검색 순위 요소로 도입되었고, Top Stories에서 AMP 독점 요구사항이 제거되어 개방형 웹 경쟁 환경이 조성되었다.
Chrome 브라우저 최적화, WordPress 등 주요 CMS 개선, JavaScript 프레임워크 협업을 통해 2023년 기준 사용자 대기 시간 누적 10,000년 이상 절약, 2024년에는 30,000년 절약을 달성했다.
2024년 FID를 INP로 교체하고 SPA를 위한 Soft Navigation API를 도입하는 등 지속적으로 진화하며, 사용자 중심의 빠르고 안정적인 웹 생태계 구축에 기여하고 있다.
개요
사용자 경험 최적화의 중요성은 항상 강조된다. Google 및 기타 검색 엔진은 UX를 순위 요소로 더욱 강조하고 있다. 이는 웹 사이트 소유자가 사용하기 쉽고, 빠르게 로드되며, 모든 장치에서 액세스할 수 있는 웹 사이트를 만드는 데 집중해야 함을 의미한다.
웹사이트를 UX에 맞게 최적화하려면 페이지 속도, 모바일 응답성, 탐색 등의 요소에 집중해야 한다. 이를 위해서는 명확하고 간결한 메뉴와 링크를 사용하여 웹 사이트를 탐색하기 쉽게 만들어야 한다.
사이트의 전반적인 로딩 속도, 상호작용, 웹페이지의 시각적 안정성, 보안 문제 등 여러 요소를 포함하고 있다. 구글에서는 웹 사이트에 방문하는 유저들의 경험을 좌우하는 여러 요소들 중 가장 기본이자 핵심 지표로 보기 때문에 '코어 (Core)'라는 단어를 붙여 부른다.
SEO에서 코어 웹 바이탈이 중요한 이유
코어 웹 바이탈은 웹 사이트의 사용자 경험에 직접적인 영향을 미치고, 결과적으로 검색 엔진 순위에 영향을 미칠 수 있기 때문에 SEO에 중요하다. Google에서는 좋은 사용자 경험을 제공하는 웹 사이트에 우선순위를 두고 싶다는 점을 분명히 밝혔으며, 코어 웹 바이탈은 그러한 경험을 측정하는 Front-end개발자로써 할 수 있는 한 가지 방법이다.
또한, 코어 웹 바이탈을 우선시하는 웹 사이트 소유자는 검색 엔진 순위 향상 이상의 이점을 누릴 가능성이 높다. 빠르게 로드되는 웹 사이트는 사용하기 쉽고 안정적인 사용자 경험을 제공할 수 있기 때문에 사용자의 참여를 유지하고 고객으로 전환할 가능성이 더 높다.
측정 항목
LCP (Largest Contentful Paint)
LCP는 웹 페이지의 로딩 속도에 대한 지표로 콘텐츠 렌더링 시간을 의미한다. 웹 페이지가 완전히 로드되는 데 걸리는 시간을 측정하는 것이 아니라, 가장 중요한 부분이 로드되는 시점에만 집중한다. 즉, 뷰포트* 내에서 가장 큰 페이지 요소(큰 텍스트 블록, 이미지 또는 비디오)를 표시하는 데 걸리는 시간을 측정한다.
텍스트와 큰 이미지만을 포함한 간단한 웹페이지의 경우, 해당 큰 이미지가 LCP로 간주된다. 이는 브라우저에 로드할 수 있는 콘텐츠 중 가장 큰 부분이므로 사용자에게 깊은 인상을 남길 수 있다. 더 빠르게 로드하면 웹페이지가 훨씬 더 빠르게 나타날 수 있다.
구글에 따르면 웹페이지 로드 후 처음 2.5초 이내에 LCP가 발생하도록 목표를 세워야 한다. 2.5초~4초 미만은 개선이 필요하며, 그 이상의 시간이 소요되는 것은 성능이 좋지 않다고 간주할 수 있다.
- 좋음 – 가장 큰 콘텐츠 요소가 2.5초 이내에 렌더링된다.
- 개선 필요 – 가장 큰 콘텐츠 요소는 4초 이내에 렌더링되지만 2.5초보다 오래 걸린다.
- 나쁨 – 가장 큰 콘텐츠 요소를 렌더링하는 데 4초 이상 걸린다.
FID (First Input Delay) → INP (Interaction to Next Paint)
2024년 3월부터 FID가 INP로 교체되었다. FID는 사이트의 상호작용성과 반응성에 대한 사용자의 첫인상을 결정한다고 볼 수 있다. 왜냐하면 FID는 사용자가 웹페이지와 상호작용을 시도하는 첫 번째 순간부터 웹페이지가 응답하는 시간을 측정하기 때문이다. 즉, 브라우저에서 다음 액션이 발생되는 시간까지의 길이를 측정한 지표이며, 밀리세컨드(ms)로 측정한다.
INP는 FID의 한계를 보완하여 모든 상호작용의 응답성을 측정한다. FID는 첫 번째 상호작용만 측정했지만, INP는 페이지의 모든 상호작용을 고려하여 더 포괄적인 사용자 경험을 평가한다.
이 때, FID가 중요하게 여기는 요소는 요청받은 액션을 처리하는데 걸리는 시간이 아닌, 입력 지연을 시키는 시간이다.
좋은 사용자 경험을 제공하기 위해 사이트는 첫 번째 입력 지연이 100ms 이하가 되도록 노력해야 한다. 100ms에서 300ms 사이는 개선이 필요하며, 그 이상은 성능이 좋지 않은 것으로 판단하게 된다.
연결과 장치가 빨라짐에 따라 사용자들의 인내심과 관심은 짧아졌다. 사용자의 상호작용에 대한 즉각적인 피드백을 제공하는 것은 사용자의 관심을 유지하는 데 중요하다. 대부분의 상호작용 문제는 페이지 로드 중에 발생한다. 초기에 모든 문제를 제거함으로써 웹사이트 전반적으로 개선을 할 수 있다.
- 양호 – 페이지가 100ms 미만인 경우 페이지의 FID 점수가 매우 높다.
- 개선 필요 – 페이지 점수가 100ms를 초과하고 300ms 미만인 경우 FID 점수를 개선해야 한다.
- 나쁨 – FID 점수가 300ms보다 길면 성능이 좋지 않은 것으로 간주된다.
CLS (Cumulative Layout Shift)
CLS는 페이지가 로드될 때 페이지가 얼마나 안정적인지 측정하고 '시각적 안정성'을 이루고자 한다. CLS는 모바일 중심의 지표다. 데스크톱 웹사이트에서는 화면 크기 문제가 대부분 존재하지 않기 때문이다.
CLS는 특히 페이지 요소가 화면에서 얼마나 자주 이동하는지 측정한다. 이로 인해 사용자가 작은 모바일 화면의 콘텐츠와 상호작용 하기가 더 어려워진다. 화면 요소가 이동하는 일반적인 원인으로는 사용자가 이미 페이지 콘텐츠와 상호작용하고 탐색하기 시작한 후에 렌더링되는 광고, 이미지 및 기타 레이아웃 요소가 있다.
따라서 페이지가 로드될 때 페이지의 요소가 너무 많이 움직인다면 CLS가 높다는 것이므로 개선이 필요하다. 이 때, CLS 점수 또한 세 가지 범주로 나뉜다.
- 좋음 – 페이지의 CLS 점수가 0.1 미만이면 좋다.
- 개선 필요 – 페이지의 CLS 점수가 0.25 미만, 0.1 이상인 경우 개선이 필요하다.
- 나쁨 – 페이지의 CLS 점수가 0.25 이상으로 낮으면 많은 작업이 필요하다.
코어 웹 바이탈 측정 방법
Chrome UX 보고서(CrUX)
Chrome 사용자가 보고한 필드 데이터를 제공하여 사이트 소유자에게 실제 사용자가 웹 사이트를 어떻게 경험하는지에 대한 데이터를 제공한다.
Google Lighthouse
코어 웹 바이탈에 대한 실험실 지표를 제공하는 무료 도구다. 성능, SEO, 접근성 등을 개선하기 위한 실행 가능한 통찰력을 제공한다.
Google PageSpeed Insights
CrUX와 Lighthouse의 기능을 결합하여 CWV 및 기타 웹 바이탈에 대한 현장 및 실험실 데이터를 모두 제공한다. 사용자는 PageSpeed Insights를 사용하여 웹 사이트 소유 여부에 관계없이 웹 사이트의 성능을 확인할 수 있다.
추가 측정 도구
Web Vitals Chrome Extension: 실시간으로 코어 웹 바이탈을 측정할 수 있는 브라우저 확장 프로그램
Search Console: Google Search Console에서 코어 웹 바이탈 보고서를 통해 사이트 전반의 성능을 모니터링할 수 있다
GTmetrix, Pingdom: 서드파티 성능 측정 도구들도 코어 웹 바이탈 지표를 제공한다
코어 웹 바이탈 개선 방법
LCP 개선 방법
- 이미지 최적화: WebP, AVIF 포맷 사용, 적절한 크기로 리사이징
- Critical CSS: Above-the-fold 콘텐츠의 CSS를 인라인으로 포함
- 리소스 우선순위: 중요한 리소스에 preload 사용
- 서버 응답 시간 단축: CDN 사용, 서버 최적화
INP 개선 방법
- JavaScript 최적화: 불필요한 JavaScript 제거, 코드 스플리팅
- 이벤트 핸들러 최적화: 디바운싱, 쓰로틀링 적용
- 메인 스레드 블로킹 방지: Web Workers 활용
- Third-party 스크립트 최적화: 비동기 로딩, 지연 로딩
CLS 개선 방법
- 이미지/비디오 크기 지정: width, height 속성 명시
- 폰트 로딩 최적화: font-display: swap 사용
- 동적 콘텐츠 예약 공간: 광고, 임베드 콘텐츠를 위한 공간 미리 확보
- CSS 애니메이션 최적화: transform, opacity 속성 사용
2024년 업데이트 사항
INP 도입
2024년 3월부터 FID가 INP(Interaction to Next Paint)로 완전히 교체되었다. INP는 모든 상호작용을 측정하여 더 정확한 사용자 경험을 평가한다.
새로운 지표들
- TTFB (Time to First Byte): 서버 응답 시간
- FCP (First Contentful Paint): 첫 번째 콘텐츠 렌더링 시간
- SI (Speed Index): 페이지 로딩 속도 지표
모바일 우선 접근
모바일 사용자가 데스크톱 사용자를 초과하는 현실을 반영하여, 모든 코어 웹 바이탈 지표가 모바일 환경을 우선적으로 고려한다.
결론
코어 웹 바이탈은 단순한 성능 지표를 넘어 사용자 경험의 핵심을 측정하는 중요한 도구다. 2024년 INP 도입으로 더욱 정확한 상호작용 측정이 가능해졌으며, 지속적인 모니터링과 개선을 통해 사용자 만족도와 검색 엔진 순위를 동시에 향상시킬 수 있다.
웹 개발자와 마케터는 이러한 지표들을 정기적으로 측정하고 개선하여, 사용자에게 최고의 경험을 제공하는 웹사이트를 구축해야 한다.
