Core Web Vitals

Core Web Vital

Web Vitals은 간단하게 말하자면 웹사이트에 대한 유저의 경험을 정량화 시킨 가이드라인이라고 할 수 있습니다.

 

Core Web Vitals는 Web Vital의 부분 집합니다.

아래 세가지의 지표를 보여주는 역할을 합니다.

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

위의 세개지 지표에서 좋은 점수를 받는다면 좋은 UX를 지닌 웹사이트라 평가될 수 있습니다.

 

좋은 점수를 받지 못한다면 Core Web Vitals 를 랭킹 지표로 사용하는는 구글에서는 좋은 랭킹을 받을 수 없습니다.

Good, Needs Improvement, Poor

Core Web Vital은 Good, Needs Improvement, Poor 이 세가지 키워드로 점수를 표현합니다.

Core Web Vital 접근 방법

1. 모든 지표에서 highest score를 받는것을 목표로 합니다.
2. 경쟁사의 지표보다 높은 점수를 받는것을 목표로 합니다.

LCP (Largest Contentful Paint)

LCP는 페이지의 viewport에서 가장 큰 element가 로딩이 되고 유저에게 보여질때까지의 시간을 보여준다.

LCP는 쉽게 얘기해서 페이지의 로딩 퍼포먼스 점수라고 볼 수 있다. 점수를 매기는 기준은 페이지에서 가장 큰 element를 기준으로 삼는데 이는 text가 될 수 있고 video가 될수 있고 image가 될 수 있습니다.

 

load, DOMContentLoaded 와 같은 오래된 계산 방식은 로딩 후 실제 유저가 화면에 보여지기까지의 시간을 계산할 수 없고 First Contentful Paint(FCP) 와 같은 비교적 최근에 나온 기술은 맨 처음에 보여주는 element에서 계산을 멈추기 (로딩 표시에도 반응)하기 때문에 실제 유저가 화면에 컨텐츠를 보기까지의 시간을 계산하기 어렵습니다.

FID (First Input Delay)

FID는 유저가 input 박스를 클릭 혹은 사용할때 얼마나 많은 delay 시간이 일어나는지 보여준다

 

유저 경험과 직접적인 관계가 있다. input 박스를 클릭했는데 아무 반응이 없으면 절대로 좋은 ux가 아니기 때문입니다.

 

Total Blocking Time (TBT) 와도 깊은 연관이 있는데 TBT 점수가 낮게 나오면 FID 점수도 낮게 나올 수 밖에 없기 때문입니다.

Total Blocking Time

브라우저의 main thread가 다른 테스크를 진행 중일땐 유저의 요청을 수행하지 못해 반응이 없다. 이 반응을 blocking이라고 하는데 blocking이 없어질때까지의 시간을 계산한것이 Total Blocking Time 입니다.

CLS (Cumulative Layout Shift )

웹 페이지의 레이아웃의 변화가 큰지/작인지 측정한다. 레이아웃의 변화가 큰 페이지는 유저의 입장에선 산만해 보입니다.

파란색 버튼이 뒤늦게 렌더링 되어 제목과 내용이 밑으로 내려갔다.

주로 리소스가 비동기식으로 로딩되거나 DOM 요소가 기존 콘텐츠 위에 추가될때 방생한다. 크기를 예측할 수 없는 이미지/동영상, 크거나 작게 렌더링 되는 글꼴 등이 될 수 있습니다.

 

개발할때는 느끼지 못하여 모르고 넘어갈 수 있습니다.

대부분 개인화된 콘텐츠나 타사 콘텐츠는 개발 환경과 동일하게 작동하기 힘들고 개발 서버에서 개발할 땐 이미 개발자의 브라우저 캐시에 저장되거나 테스트 API 호출이 너무 빨라 지연을 느낄 수 없는 경우가 있습니다.

CLS를 개선하는 방법

아래와 같은 기본 원칙을 준수하면 예기치 않은 layout shift를 방지 할 수 있습니다.

• 이미지/비디오 요소에 항상 크기 속성을 포함한다.
  • 이러한 접근 방식을 사용하면 이미지/비디오가 로드 되는 동안 브라우저가 document의 공간을 할당해 놓을 수 있습니다.
• 기존 콘텐츠 위에 콘텐츠를 삽입하는것을 최대한 피한다.
  • 사용자 interaction에 따른 응답을 제외하고는 최대한 사용을 자제한다.
• 레이아웃을 변경하는 animation 보단 transform animation을 사용한다.
  • 레이아웃을 변경하지 않는 선에서 animation 효과를 사용한다.

 

Summary

Largest Contentful Page (LCP) - 웹 페이지의 로딩 속도를 측정

First Input Delay (FID) - 웹 페이지의 유저와의 상호작용을 측정

Cumulative Layout Shift (CLS) - 웹 페이지의 시각적인 움직임을 측정