좋은 웹의 지표, Web Vitals

Chanyoung Park·2025년 9월 11일

Web vitals

모든 공학자와 과학자는 세상에 존재하는 정성적 지표에 대해 측정 가능한 수치가 있기를 바라는 경향이 있어요.

프론트엔드 개발자 역시 필연적으로 커리어를 이어나가다 보면 어느 지점에서 ‘내가 좋은 웹을 만들고 있는게 맞나?’ 확인하고 싶어지는 지점이 생겨요.

모든 개발자가 한 번 쯤 들어본 적 있는 지표이자, 현재 가장 객관화 된 좋은 웹의 지표가 바로 Web Vitals 예요.

Web Vitals

Web Vitals는 Google에서 측정한 ‘좋은 사용자 경험을 제공하는 웹’임을 측정하기 위한 이니셔티브예요.

몇가지 요소가 더 있긴 하지만 대부분의 경우 아래 세가지 지표만 보면 돼요.

LCP (Largest Content Paint)
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)

이 세가지 지표는 특히 중요해서 Core Web Vitals 라는 이름으로 따로 분류돼요.

LCP

LCP는 ‘웹 사이트의 가장 큰 사이즈를 차지하는 요소가 다 그려지기 까지 걸리는 시간’이예요.

‘가장 큰 사이즈의 콘텐츠’는 일반적인 경우 해당 페이지에서 ‘가장 중요한 요소’일 가능성이 높아요.

그래서 웹사이트의 다른 부분은 다 차치하더라도 해당 요소만큼은 빨리 떠야 사용자가 가장 중요한 정보를 빠르게 획득 했다고 느끼기에 해당 지표를 중요하게 보는거예요.

INP

INP는 ‘사용자가 무언가의 상호작용을 한 이후 페이지에 변화가 일어나기 시작한 시점까지의 시간’ 이예요

사용자가 버튼을 누를 때 내부적으로 Javascript가 처리되거나 HTTP 요청이 일어나게 될거예요.
그 다음에는 해당 버튼을 누른 결과가 시각적으로 표시 될텐데 이는 사용자의 응답을 얼마나 빨리 처리하고 반응을 했는지 확인하는 지표라서 사용자 경험에 중대한 영향을 미친다고 판단해요.

CLS

CLS는 ‘컨텐츠가 부분적으로 로드 된 이후 레이아웃의 위치가 얼마나 흔들리냐’를 측정한 결과예요.

이 지표에 영향을 미치는 요소는 다음과 같아요.

웹 폰트
크기가 정해지지 않은 이미지 사이즈
iFrame
Javascript 동적 컨텐츠

위 요소들은 크기를 지정하지 않으면 다운로드 이전에는 크기를 계산할 수 없어서 브라우저가 임의의 크기 값으로 배치해 두었다가 다운로드 이후 크기를 확정하는 요소들이예요.

이러한 요소들은 웹사이트에 배치 된 요소의 위치를 변경하는데, 사용자가 버튼을 누르려고 할 때나 긴 글을 읽고 있을 때 갑자기 위치가 바뀌어버리면 버튼을 잘못 누르거나 글의 맥락을 놓치게 되어 사용자 경험에 치명적이예요.

그래서 이런 요소를 관리할 때는 요소의 크기를 사전에 확정하거나 크기가 변동 되어도 다른 요소에 영향을 미치지 않는 곳에 배치 되어야 해요.

<img 
  src="image.jpg" 
  width={400} 
  height={300} // 명시적 크기 지정
  alt="예시"
/>

이런식으로 고정 크기를 주면 CLS 점수를 확보할 수 있어요.

측정 방법

Web Vitals는 Chrome의 Lighthouse를 통해 측정하거나

Lighthouse

NPM의 Web Vitals 의존성을 사용하여 런타임에서 측정할 수 있어요.

import { useEffect } from 'react';
import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals';

export default function WebVitals() {
  return import.meta.env.DEV ? <WebVitalsLogger /> : null;
}

function WebVitalsLogger() {
  useEffect(() => {
    onCLS(console.log);
    onINP(console.log);
    onLCP(console.log);
    onFCP(console.log); // Core Web Vitals는 아님
    onTTFB(console.log); // Core Web Vitals는 아님
  }, []);

  return null;
}