Web Vitals

Web Vitals

Web Performance는 사용자의 Web Browser에서 Web Page가 보이는데 걸리는 시간을 얘기한다.

Web Performance는 다양한 사항에 연관되어 있다.

• Site Load Time
• Become Interactive and Responsive
• How smooth the content is during user interactions

모두 사용자와 연관되어 있는 지표들이다.

이를 개선하기 위한 Web Performance Optimizaion(WPO)가 중요하다.

WPO를 하기에는 연관되어 있는 지표들이 많다.

 

Google에서 더 나은 Web Performance를 내기 위한 가이드라인으로 제시한 Web Vitals를 소개하려 한다.

Web Vitals

Web Vitals는 Web에서 우수한 사용자 경험을 제공하기 위한 개발 가이드 라인입니다.

Core Web Vitals라는 3가지의 가장 중요한 Metric을 제시합니다.

• Loading -> LCP(Largest Contentful Paint)
• Interactivity -> FID(First Input Delay)
• Visual Stability -> CLS(Cumulative Layout Shift)

LCP

Largest Contentful Paint

출처: https://web.dev/lcp/

LCP는 Web Page의 Main Content가 Load 되는 시간이다.

Page가 Load 한 시점을 기준으로 가장 큰 Image나 Text Block의 렌더링 시간을 의미한다.

Google에서 우수한 사용자 경험을 주려면 LCP가 2.5초 이하로 권장하고 있다.

LCP로 고려할 수 있는 Main Content는 아래와 같다.

• <img> Element
• <svg> Element 내부의 <img>
• <video> Element
• url() 함수를 통해 Load 된 배경 이미지가 있는 
• Text Node 또는 기타 In-line Text 하위 요소를 포함하는 Block-level Element

FID

First Input Delay

출처:&nbsp;https://web.dev/fid/

FID는 사용자가 Web Page와 처음 상호작용할 때부터 해당 작용의 응답으로 Web Browser가 Event Handler 처리를 시작하기까지의 시간을 의미한다.

Google에서 우수한 사용자 경험을 주려면 FID가 100ms 이하로 권장하고 있다.

출처:&nbsp;https://web.dev/fid/

CLS

Cumulative Layout Shift

출처:&nbsp;https://web.dev/cls/

CLS는 Web Page에서 발생하는 모든 예기치 않은 Layout 이동과 관련된 지표이다.

Web Page는 최초 렌더링 이후에도 추가적으로 Element들이 Load 될 수 있다.

추가적인 Element들이 렌더링 되면서 기존의 Element들이 밀려나는(Layout Shift) 상황이 일어날 수 있다.

CLS는 밀려나는 기존의 Element의 크기가 클수록, 밀려나는 거리가 멀수록 커진다.

 

Google에서 제안하는 WebVitals로 Web Performance를 개선하기 위한 지표로 삼을 수 있다.

다음에는 WebVitals를 측정할 수 있는 Tool들을 소개하려 한다.