Core Web Vitals

구글에서 발표한 웹페이지 성능을 측정하기 위한 지표

Core Web Vitals 가 중요한 이유

구글이 자체적으로 진행했던 연구 결과에 따르면 Core Web Vitals의 기준을 충족한 웹 페이지의 경우 방문자가 사이트에서 이탈할 가능성이 24%나 낮다고 한다.

Core Web Vitals 지표 3가지

사용자가 처음 페이지로 이동한 시점을 기준으로 표시 영역에 표시되는 주요 콘텐츠(시각적으로 큰 콘텐츠) 블록의 렌더링 시간을 나타내는 지표

뷰포트 내에서 이미지, 비디오, 텍스트 블록 중 시각적으로 가장 큰 사이즈를 차지하는 블록이 처음으로 paint되기까지의 시간을 의미
사이즈가 큰 콘텐츠가 얼마나 빨리 표시되느냐가 중요함.
대상 : First Veiw
성능 측정
- 좋음 – 가장 큰 콘텐츠 요소 2.5초 이내에 렌더링
- 개선 필요 – 가장 큰 콘텐츠 요소 2.5초 ~ 4초 렌더링
- 나쁨 – 가장 큰 콘텐츠 요소 4초 이상 렌더링

응답성을 측정하는 항목으로, 사용자가 페이지와 처음 상호 작용을 하려고 할 때 느끼는 경험을 정량화한 것 즉, 웹페이지 응답성에 대한 지표

FID가 중요하게 여기는 요소는 요청받은 액션을 처리하는데 걸리는 시간이 아닌, 입력 지연을 시키는 시간이다.
- 좋은 사용자 경험을 제공하기 위해 사이트는 첫 번째 입력 지연이 100ms 이하가 되도록 노력해야한다.
유저의 인터렉션 이후, 이에 대한 이벤트 핸들러를 실행할 준비가 되기(메인 스레드가 비어있기까지 (idle))까지의 시간
브라우저의 JS엔진은 싱글 스레드로 작동하므로 메인 스레드에 남은 작업이 있다면 사용자가 인터렉션을 하더라도 이벤트 핸들러가 동작하지 않는다
현장 데이터에서는 실제 유저가 인터렉션을 하지 않기 때문에 FID를 측정 불가
- 대신 이를 간접적으로 측정하는 지표인 TBT(total Blocking Time)를 사용
성능 측정
- 양호 – 페이지가 100ms 미만인 경우
- 개선 필요 – 페이지 점수가 100ms를 초과하고 300ms 미만인 경우
- 나쁨 – FID 점수가 300ms 초과인 경우

시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화 한 것. layout shift 의 빈도를 정량화하여 시각적 안전성을 측성하는 지표

layout shift : 페이지 렌더링 과정에서 기존 요소들이 밀려나는 것.
CLS는 모바일 중심의 지표이다.
페이지가 로드될 떄 요소들이 얼마나 자주 그리고 얼마나 많이 움직이는 지를 측정
이미지나 광고가 로드외어 페이지의 텍스트나 버튼이 갑자기 움직이면 사용자는 의도하지 않은 클릭을 할 수 있고, 이는 사용자 경험을 저해한다.
페이지가 로드될 때 페이지의 요소가 너무 많이 움직인다면 CLS가 높다는 것이므로 개선이 필요
성능 측정
- 좋음 – 페이지의 CLS 점수가 0.1 미만
- 개선 필요 – 페이지의 CLS 점수가 0.25 미만, 0.1 이상
- 나쁨 – 페이지의 CLS 점수가 0.25 이상

사용자가 페이지를 요청한 후 웹 브라우저가 첫 번째 픽셀을 화면에 그리기 시작하는 시점을 나타내는 성능 지표

Chrome UX 보고서(CrUX) : 크롬 사용자가 보고한 필드 데이터를 제공하여 사이트 소유자에게 실제 사용자가 웹 사이트를 어떻게 경험하는지에 대한 데이터를 제공

Google Lighthouse : 코어 웹 바이탈에 대한 실험실 지표를 제공하는 무료 도구
Google PageSpeed Insights : CrUX 와 Lighthouse의 기능을 결합하여 CWV 및 기타 웹 바이탈에 대한 현장 및 실험실을 확인 가능

웹페이지 품질을 개선하기 위한 오픈소스 자동화 도구. 모든 공개 웹페이지 또는 인증이 필요한 웹페이지에 대해 실행할 수 있으며, 성능, 접근성, 프로그레시브 웹 앱, 검색엔진 최적화 등에 대한 감사가 제공된다.

Google Lighthouse는 5가지 주요 웹사이트 최적화 카테고리에 대한 감사를 수행한다.

화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지

5가지 속도 측정항목에 대한 성능을 보고

First Contentful Paint (FCP):
사용자가 웹 페이지로 이동하여 로드 되었을때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간
Largest Contentful Paint (LCP):
가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간
보통 중요한 콘텐츠일수록 크기가 크기 때문에, Lighthouse는 LCP 점수에 가장 높은 가중치인 25%를 주어 계산
LCP로 간주되는 요소
- <img> 요소
- <svg> 안에 있는 <image> 요소
- <video> 요소
- background-image 속성의 url()로 로드되는 요소
- block 레벨 요소 (elements containing text nodes or other inline-level text elements children)
Total Blocking Time (TBT):
페이지가 마우스 클릭과 같은 사용자 입력에 반응하지 못하도록 차단되는 시간
Cumulative Layout Shift (CLS):
사용자가 페이지에 액세스할 때 발생하는 레이아웃 변경을 측
Speed Index (SI):
웹 페이지를 로드 중에, 콘텐츠가 시각적으로 표시되는 속도로 페이지 콘텐츠가 얼마나 빨리 로드되는지 표시. 리로드되는 페이지의 비디오를 캡쳐하여 프레임 간의 속도를 계산

대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지

HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지

애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지

앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지

총 성능 점수는 6가지 Metric 점수들의 가중 평균으로 계산된다.

가중치가 더 높은 Metric이 전체 성능 점수에 큰 영향을 주게 되며,

Lighthouse 8 에서는 'Total Blocking Time'이 빠를수독 전체 성능 점수가 높아집니다.

각 가중치(%)는 사용자의 성능 인식을 균형있게 검사하기 위해 정해진다.