Web vitals
1. Web vitals 는 무엇일까?
Web vitals 은 우수한 사용자 경험을 제공하는 품질에 대한 기준이다.
이 기준은 구글이 만들었으며,구글은 수년간 웹사이트의 성능을 측정하고 보고하기 위해서 다양한 도구를 제공해왔다.
웹사이트의 품질은 많은 요인에 의해서 결정되고, 또한 유저마다 품질에 대한 평가도 제 각각이라서, 정량적인 평가가 어렵다는 한계가 있었다.
구글은 Web Vitals 라는 개념을 도입해서 웹 사이트의 품질을 평가할 수 있는 기준을 제시했고, Core Web Vitals 을 도입해서 웹 사이트의 성능 평가를 단순화 시킨다.
2. Core Web Vitals
Core Web Vitals는 모든 웹페이지에 적용되는 Web Vitals의 하위 집합으로 모든 사이트 소유자가 측정해야 하며 모든 Google 도구의 표면에 위치합니다. 각각의 Core Web Vitals는 사용자 경험의 고유한 측면을 나타내고, 필드에서 측정 가능하며, 필수적인 사용자 중심 결과에 대한 현실의 경험을 반영합니다. -Google
Core Web Vitals 을 구성하는 메트릭은 시간이 흐름에 따라서 변화한다.
현재는 LCP, FID, CLS 가 Core Web Vitals 의 구성요소이며, 미래에는 다른 매트릭이 Core Web Vitals 에 추가될수도 있다.
3. Core Web Vitals 의 구성요소 (출처: WebVitals)
3-1. LCP (Largest Contentful Paint)
Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP): 로딩 성능을 측정한다. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 한다.
LCP 는 처음 페이지를 로드할 때, 페이지 상에서 가장 큰 콘텐츠(이미지, 비디오 등등) 가 완전히 렌더링 되기 까지 걸린 시간을 의미한다.
페이지에서 가장 큰 콘텐츠가 로드되기 까지 걸린 시간이 짧을수록 해당 페이지의 성능은 뛰어나다고 말할 수 있다.
Core Web Vitals 기준에 따르면, 2.5초 이내에 페인팅이 완료되면 Good, 4초보다 오래걸리면 Bad 이다.
3-2. FID (First Input Delay)
First Input Delay(최초 입력 지연, FID): 상호 작용을 측정한다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 한다.
FID 는 Input 에 입력된 값이 화면에 나타나는 시간이다. 즉, 유저와 웹 상의 인터렉션이 실제 View에 반영되기까지 걸리는 시간이다.
FID 는 구글의 LightHouse 로 측정할 수 없으며, 다른 Web Vitals 측정 도구를 이용해야한다.
3-3. CLS (Cumulative Layout Shift)
Cumulative Layout Shift(누적 레이아웃 시프트, CLS): 시각적 안정성을 측정한다. 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 한다.
CLS 는 페이지가 로드되는 중에 레이아웃이 변경되는 빈도를 측정한 지표이다. CLS 가 클수록 유저의 집중은 흐트러지고, 유저 경험은 나빠진다.
4. Web Vitals 측정 방법
4-1. Chrome User Experience Report
Chrome User Experience Report 는 익명의 실제 사용자로부터 Core Web Vitals 데이터를 수집한다. 이건 추측인데, 구글 애널리틱스랑 사용방법이 비슷할 것 같다.
4-2. 크롬 개발자 도구의 Light House (추천!)
간단하게 크롬 개발자 도구의 Light House 를 통해서 측정할 수 있다.
F-12 를 눌러서 개발자 도구에서 Light House 를 연다음, 페이지 로드 분석을 누르면 된다.
측정에는 30초 정도 소요되며, Core Web Vitals 측정 결과를 알 수 있다.
LightHouse 는 Web Vitals 뿐만 아니라, 성능, 접근성 등 여러 항목을 확인해볼 수 있어서 추천한다. (게다가 너무 간편하고 쉽다.!!)
5. 결론
Web Vitals 은 개발자가 웹의 품질을 측정하기 위해서 사용할 수 있는 기준이다.
하지만 이것은 완벽하지 않으며 향후 언제든 변화할 수 있다.
실무에서 대규모 버전업이나 리펙토링 작업을 한 뒤에, 성능의 변화를 정량적으로 측정하기가 어렵다. 그 이유는 기준이 애매하고, 측정의 변수가 많기 때문이다 (예를들면, 네트워트 속도..). 하지만 Web Vitals 이라는 기준을 잡으면 웹의 성능의 변화량을 정량적으로 측정할 수 있다는 장점이 있다. 하지만 Web Vitals 이 모든걸 나타내지는 않으므로, Web Vitals 에 너무 목매진 말자.
