Web Vitals

Web Vitals는 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google의 지표입니다.

 

1. Largest Contentful Paint(LCP)

페이지 로딩 중 페이지에서 가장 큰 영역을 차지하는 Text node, Image, Video 등의 콘텐츠가 Viewport에 노출되는 시점

2. First Input Delay(FID)

웹페이지 로드 후 첫번째 상호작용에 대한 브라우저의 응답 시간, 상호작용의 범위에 스크롤 및 화면 확대/축소는 포함되지 않음

* Interaction to Next Paint(INP) -  First Input Delay는 2024년 3월부터 INP로 대체됩니다.

  페이지가 로드된 후 페이지와 상호작용 이후 브라우저가 이벤트 핸들링 및 다음 페이지를 그리기전(Paint 전) 까지의 시간 

 

 

3. Cumulative Layout Shift(CLS)

페이지 이용 중 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 점수화 한 것, 레이아웃 변경으로 클릭하려던 엘리먼트 위치가 변경되는 것 등이 예상치 못한 변화에 해당

 

CLS 예상치 못한 변화 예제

 

 

참고

https://web.dev/i18n/ko/vitals/

https://betterprogramming.pub/web-vitals-guide-b56e28798e7f