사이트 속도 측정, 웹 바이탈 4가지 지표

사이트 속도 측정, 웹 바이탈 4가지 지표에 대하여

구글 콘솔 사이트를 열고 자신의 사이트를 보면 웹 바이탈에서 실패 URL이 많이 나온다.

 

1. 사이트 속도 측정

 

 

웹 바이탈 실패

 

2. 웹 바이탈이란 무엇인가?

 

Web Vitals이란 단어 그대로 사이트의 신체 상태(건강 상태)이다. 이것은 구글의 PageSpeed Insight가 제공하는 지표 4가지로 측정된다. (구글의 PageSpeed Insights : 글 하단에 링크 첨부)

 

PageSpeed Insight가 제공하는 지표 4가지는 ① FCP(First Contentful Paint), ② LCP(Largest Contentful Paint), ③ FID(First Input Delay), ④ CLS(Cumulative Layout Shift)이다. 이 네 가지 지표에 대해 알아본다.

 

1) FCP

= First Contentful Paint.

 

FCP(First Contentful Paint)란 말 그대로 최초 콘텐츠가 화면에 표시되기까지 걸리는 시간이다. 다시 말하면 ① 페이지가 로드되기 시작한 시점부터 ② 콘텐츠의 일부가 화면에 렌더링 될 때까지의 시간이다. ("콘텐츠"란 텍스트, 이미지, 요소, 흰색이 아닌 배경이다.)

 

• 그림(FCP) : 구글의 PageSpeed Insights에서 인용(아래 동일)

 

FCP(First Contentful Paint)

 

 

FCP(최초 콘텐츠풀 페인트)는 사용자가 화면에서 콘텐츠를 볼 수 있는 첫 번째 지점이다. 그러므로 사용자가 체감하는 속도를 측정의 매우 중요한 사용자 중심 메트릭이다. FCP가 빠르면 사용자는 페이지에서 뭔가가 일어나고 있음을 인식하기 때문에 안심할 수 있다.

 

1. 합격 FCP 값: 1.8초
2. 불합격(개선 필요) : 1.8초 ~ 3.0초
3. 나쁜 FCP 값: 3.0초 이상

 

 

2) LCP

= Largest Contentful Paint

LCP(Largest Contentful Paint)도 페이지의 로딩 속도를 측정하는 매우 중요한 지표이다. 페이지가 처음 로드를 시작한 시점부터 뷰포트 내에 있는 가장 큰 이미지 또는 '텍스트 블록'이 렌더링 되는 시점까지 걸리는 시간이다.

(뷰포트란=화면에서 페이지를 스크롤하지 않고도 볼 수 있는 곳까지의 영역을 말함.)

 

 

LCP

1. 합격 LCP 값: 2.5초
2. 불합격(개선 필요) : 2.5초 ~ 4.0초
3. 나쁜 LCP 값: 4.0초 이상

즉, 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP(Largest Contentful Paint)가 발생해야 이 기준에 맞는 사이트가 된다.

 

3) FID

= First Input Delay

 

FID(First Input Delay)는 말 그대로, interactivity 즉, 상호작용성을 측정하는 지표이다. FID는 사용자가 처음 클릭할 때부터 응답이 오는 시점까지의 시간의 길이를 말하며, interactivity 즉 이것을 '상호작용'이라 하는데, 사용자와 페이지의 상호작용, 다시 말하면 사용자가 링크를 클릭하거나 버튼을 탭 하고 난 후, 그 응답으로 브라우저가 실제로 처리를 시작하기까지의 시간을 말한다.

 

 

FID( First Input Delay)

 

1. 합격 FID 값: 100밀리 초 이하
2. 불합격(개선 필요) : 100밀리 초 ~ 300밀리 초
3. 나쁜 FID 값: 300밀리 초 이상

 

4) CLS

= Cumulative Layout Shift

* Cumulative : 누적되는

* Layout Shift : 레이아웃 이동.

이것은 말 그대로 누적된 레이아웃 이동, 즉 '시각적 안정성'을 측정하는 지표이다.

 

 

CLS(Cumulative Layout Shift)

 

CLS 계산 방법

CLS를 계산하기 위해 렌더링 된 두 프레임 사이의 뷰포트의 크기와 뷰포트 안의 불안정 요소를 파악하여, 그 움직임에 대한 impact fraction(영향분율)과 distacne fraction(거리분율)이라는 두 가지 측정값을 사용해 계산한다.
layout shift score = impact fraction * distance fraction.

영향분율 = 불안정 요소가 두 프레임 사이 뷰포트 영역에 미치는 영향.
거리분율 = 뷰포트를 기준으로 불안정 요소가 이동한 거리.

 

 

1. 합격 CLS 값: 0.1 이하
2. 불합격(개선 필요) : 0.1 ~ 0.25
3. 나쁜 CLS 값: 0.25 이상

 

3. 속도 측증 사이트: PSI

구글 PageSpeed Insights

 

https://pagespeed.web.dev/