[Vitals] 웹 바이탈 (Web Vitals) #2 - 측정지표

 

웹 바이탈은 6개의 성능 측정 지표가 있습니다. 6개중 5개는 밀리초 또는 초 단위로 측정되며, 일반적으로 2초 이내 측정된 결과를 빠르다고 표현합니다.

1. First Contentful Paint 

- FCP는 브라우저가 첫번째 중요한 콘텐츠(텍스트 또는 이미지/애니메이션 등)를 표시하는 첫 번째 시점까지의 소요시간입니다.

- 브라우저에 첫번째로 픽셀이 로드되는 First Paint(FP)와 FCP는 다릅니다.

- FCP는 로딩 프로세스 초기에 발생하므로 백엔드 성능을 나타내는 좋은 지표가 되며 목표 FCP는 0~2초 범위입니다.

- 요점 : FCP 이전에 발생되는 속도 저하 요소 감지

2. Time to Interactive  

- TTI는 페이지가 사용자와 완전히 상호작용할 때 까지의 소요시간입니다.

- 완전한 상호작용이란 Javascript의 각종 이벤트 핸들러의 준비가 완료 된 시점을 뜻하며, 스크롤, 클릭 등의 사용자 상호작용이 발생할 수 있는 시점입니다.

- TTI 점수 향상은 Javascript 로딩 및 실행에 중점을 두어 개선하는 것이며 목표 TTI는 0~3.8초 범위입니다.

- 요점 : 사용자가 얼마나 빠르게 페이지를 사용할 수 있는지에 대한 기준

3. Speed Index  

- Speed Index는 페이지 로드 시점에 스냅샷으로 시각적 진행상황을 실제로 측정한 값을 뜻합니다. 

- 대부분의 지표와 마찬가지로 정밀하고 정확한 지수는 아니며, 다른 콘텐츠의 중요성은 고려되지 않습니다.

- 클라이언트에서 실행되는 전반적인 프로세스보다, 부하의 시각적 측면에 더 많이 의존된 포괄적인 값이며 목표 지수는 0~4.3초 범위입니다. 

- 요점 : 전체 속도 게이지를 제공하여 개선 전/후 비교 포인트로 사용

4. Total Blocking Time  

- TBT는 페이지 로드 시작부터 사용자 입력이 실제로 차단되는 시간을 측정한 값입니다. (FCP  ~ TTI)

- Google에서는 50ms를 기준으로 long task로 분류하며 Javscript, font file과같은 resource의 로드시간이 50ms를 초과하면 차단시간이 추가됩니다.

- long task는 Devtools의 Performance에서 확인 가능합니다.

- 목표 TBT는 0~300ms 입니다.

- 요점 : 개별적인 큰 차단요소(Long Task)를 찾을 때 유용 

5. Largest Contentful Paint  

- LCP는 사용자가 처음 페이지로 이동한 시점을 기준으로 가장 큰 컨텐츠(이미지 또는 텍스트 블록)의 렌더링 시간을 나타냅니다. 

- 빠르게 LCP 리소스를 요청하고 LCP 리소스의 로드가 완료된 후 LCP 요소가 최대한 빨리 렌더링되도록 해야 합니다.

- 목표 LCP는 0~2.5초 범위입니다.

- 요점 : 페이지의 가장 큰 부분이 렌더링을 완료하는 시점을 추적

6. Cumulative Layout Shift (not a time measurement)

- CLS는 사용자에게 발생하는 레이아웃 이동(layout shift) 빈도를 측정하는 것으로 시간을 측정하지 않는 측정 요소입니다.

- 레이아웃 이동은 페이지의 요소가 비동기적으로 로드되어 주변 컨텐츠에 영향(Reflow)을 주는 값을 측정합니다.

- 일반적으로 비동기 요소의 경우 해당 요소가 차지할 수 있는 공간을 미리 예약한 방법으로 개선할 수 있으며 목표 CLS는 0.1 미만 입니다.

- 요점 : 로드 중에 레이아웃 변경이 얼마나 발생하는 지에 대한 측정

 

 

 

 

참고사이트

https://www.paperstreet.com/blog/tuning-your-website-for-modern-page-speed-metrics/

https://wit.nts-corp.com/2020/12/28/6240