Core Web Vitals

Web Vitals

웹에서 훌륭한 사용자 경험을 제공하기 위해, 필수적인 성능 지표에 대해 지침을 제공하는 Google의 개발 도구입니다. 그 간, Google은 성능 측정을 위해 다양한 도구를 제공해 왔습니다. 이런 다양한 도구와 지표를 버거워하는 사람들을 위해, 사이트에서 가장 중요한 지표인 Core Web Vitals에 초점을 맞추어 지원합니다.

 

Core Web Vitals

아래 세 가지 지표는 사용자 경험에 영향을 미치는 가장 핵심적인 지표입니다.

• LCP(Largest Contentful Paint): 로딩 성능 지표입니다. 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 최대 콘텐츠(이미지, 텍스트 블록 등)의 렌더링 시간을 측정합니다. HTML 요소들은 단계별로 로드되며, 각 요소들이 렌더링되는 시간에 따라 최대 콘텐츠가 변경될 수 있습니다. 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생하면 좋은 사용자 경험으로, 4초가 넘어가면 좋지 못한 사용자 경험으로 간주됩니다.
• FID(First Input Delay): 상호작용 준비 시간 지표입니다. 사용자가 최초로 이벤트(링크, 버튼 클릭 등)를 발생시켰을 때, 브라우저가 이벤트 처리를 시작하기까지의 시간을 측정합니다. 브라우저의 메인 스레드는 대규모 JavaScript 파일을 분석하고 실행하는 등의 작업에 의해 사용자의 응답에 답할 수 없는 상황이 발생하기도 합니다. 그리고 사용자의 이벤트 발생 타이밍에 따라 FID 지표가 달라진다는 걸 인지해야 합니다. 페이지의 FID가 100ms 이내면 좋은 사용자 경험으로, 300ms가 넘어가면 좋지 못한 사용자 경험으로 간주됩니다.
• CLS(Cumulative Layout Shift): 예상치 못한 레이아웃 변경 발생에 대한 지표입니다. 예를 들면, DOM 요소가 기존 페이지에 동적으로 추가되면서 원래 누르려던 결제 버튼이 밀려 취소 버튼을 누르게 되는 상황이 발생할 수 있습니다. 그러면 결제 정보가 초기화되는 불상사가 발생하겠죠. CLS는 모든 예기치 못한 레이아웃 이동에 대해 점수를 측정하며, 레이아웃이 크고 많은 이동을 할수록 가산점을 받습니다. 0.1 이하로 지표를 유지하는 걸 권장합니다.

 

Core Web Vitals 측정하기

최근 작업했던 Clipper 서비스의 성능을 분석해 봤습니다. mvp 단계의 제품이었기에 오롯이 구현에만 초점을 맞췄었는데, 역시 Core Web Vitals를 확인해 보니 처참한 결과가 나왔습니다. 아래는 Lighthouse를 통해 Clipper의 메인 페이지를 분석한 결과의 일부입니다.

 

• LCP: 낮은 성능 기준인 4초를 훌쩍 넘겨, 9.4초나 나왔습니다...
• FID: TBT(Total Blocking Time)는 모든 HTML 요소들의 페이지 로드 시작 시점(FCP)부터 사용자 상호작용 가능 시간(TTL)까지 지연된 시간의 합입니다. 그러므로 TBT 지표로 대체될 수 있습니다. 600ms가 초과되면 성능이 좋지 못하다고 판단합니다. Clipper의 TBT는 5,700ms가 나왔고, 역시 개선할 필요가 있습니다.
• CLS - 권장하는 0.1에 훨씬 못 미치는 0.001이 나왔으므로, CLS 지표는 매우 훌륭하네요:)

 

Lighthouse
웹 애플리케이션의 성능 지표를 모으고, 이를 시각화하여 성능 개선을 돕는 오픈소스 자동화 도구입니다. 크롬 개발자 도구에서 기능을 제공하며, node.js module 등의 방법을 통해서도 사용할 수 있습니다.
Core Web Vitals가 포함된 Performance 지표와 Accessibility, Best Practices, SEO, PWA 지표를 종합적으로 측정할 수 있도록 지원합니다.

 

마치며

지난 3년간 이 개념을 모르고 웹 개발을 해왔습니다. 사실 몰라도 개발은 가능했으나, 한계가 분명 있었습니다. 단순한 성능 저하에 대해서 문제 원인 파악이 쉽지 않고, 치명적인 성능 에러가 나지 않는 이상 해결할 엄두도 못 냈습니다. Web Vitls에 대해 개념적으로 인지했을 뿐이지만, 자연스럽게 그 간의 성능 저하에 대한 원인 추측하기 시작했습니다. 그리고 웹 개발에 조금 더 자신감이 붙으면서 재밌어졌습니다. 기존 프로젝트의 성능을 깔끔하게 개선하고 싶어 지네요.

 

출처

• Web Vitals - https://web.dev/vitals/
• Largest Contentful Paint(LCP) - https://web.dev/lcp/
• First Input Delay(FID) - https://web.dev/fid/
• Cumulative Layout Shift(CLS) - https://web.dev/cls/
• Total Blocking Time(TBT) - https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/?utm_source=lighthouse&utm_medium=devtools