Core Web Vitals 예산 관리 가이드

도입

많은 팀이 Core Web Vitals를 "모니터링 지표"로만 관리한다. 그래서 대시보드에는 숫자가 있지만 릴리즈 의사결정에는 반영되지 않는다. 결과적으로 성능 회귀는 배포 후에 발견되고, 수정은 늘 우선순위에서 밀린다.

이 글의 목적은 성능 목표를 예산처럼 운영하는 방법을 제시하는 것이다. 핵심은 지표를 보는 것이 아니라, 지표를 기준으로 배포를 통제하는 데 있다.

Core Web Vitals 예산 관리 가이드 커버 — Wikimedia Commons 기반 무료 이미지

문제 정의

성능 운영이 실패하는 전형적인 패턴은 아래와 같다.

LCP/INP/CLS 목표는 있는데 서비스/페이지별 책임 주체가 없다.
실험 기능이 추가될 때 성능 영향 검증이 PR 단계에 없다.
대시보드 수치는 좋아 보여도 특정 경로만 악화되는 long-tail이 감춰진다.
회귀 발생 시 롤백 기준이 없어 대응이 늦다.

결론적으로 "지표의 가시성"만 있고 "지표의 집행력"이 없는 상태다.

핵심 개념

항목	운영 질문	권장 방식
Budget 정의	어떤 값에서 배포를 막을 것인가	LCP/INP/CLS 페이지별 임계치 지정
측정 위치	어디서 측정할 것인가	Lab + RUM 이중 측정
판단 기준	어떤 구간으로 평가할 것인가	p75 + 최소 샘플 수 동시 확인
대응 전략	임계치 초과 시 무엇을 할 것인가	자동 경고 + 단계 롤백

지표를 예산화할 때는 "단일 전역 목표"보다 "페이지/기능별 목표"가 효과적이다.

코드 예시 1: 성능 예산 설정(JSON)

{
  "budgets": [
    {
      "path": "/",
      "lcp_ms_p75": 2500,
      "inp_ms_p75": 200,
      "cls_p75": 0.1
    },
    {
      "path": "/posts",
      "lcp_ms_p75": 2300,
      "inp_ms_p75": 180,
      "cls_p75": 0.08
    },
    {
      "path": "/posts/[slug]",
      "lcp_ms_p75": 2400,
      "inp_ms_p75": 200,
      "cls_p75": 0.1
    }
  ]
}

코드 예시 2: CI 게이트 스크립트

import fs from "node:fs";

type Budget = {
  path: string;
  lcp_ms_p75: number;
  inp_ms_p75: number;
  cls_p75: number;
};

const budgets: Budget[] = JSON.parse(fs.readFileSync("./performance-budget.json", "utf8")).budgets;
const latest = JSON.parse(fs.readFileSync("./artifacts/web-vitals.json", "utf8"));

const failures = budgets.flatMap((budget) => {
  const row = latest.find((item: any) => item.path === budget.path);
  if (!row) return [`missing metrics: ${budget.path}`];

  const issues: string[] = [];
  if (row.lcp_ms_p75 > budget.lcp_ms_p75) issues.push(`${budget.path} LCP exceeded`);
  if (row.inp_ms_p75 > budget.inp_ms_p75) issues.push(`${budget.path} INP exceeded`);
  if (row.cls_p75 > budget.cls_p75) issues.push(`${budget.path} CLS exceeded`);
  return issues;
});

if (failures.length > 0) {
  console.error(failures.join("\n"));
  process.exit(1);
}

아키텍처 흐름

Mermaid diagram rendering...

트레이드오프

예산 게이트를 강하게 걸면 배포 속도는 느려질 수 있다.
대신 성능 회귀를 사후 대응이 아닌 사전 차단으로 바꿀 수 있다.
초기에 임계치를 너무 빡빡하게 잡으면 팀 피로도가 커진다. 2주 단위로 현실적인 기준을 재조정하는 것이 좋다.

정리

Core Web Vitals 운영의 핵심은 "좋은 수치"가 아니라 "통제 가능한 릴리즈 프로세스"다. 성능 예산을 문서로 정의하고 CI에서 집행하면, 성능은 개인 역량이 아니라 팀 시스템으로 관리된다.

이미지 출처

Cover: source link
License: CC BY-SA 3.0 / Author: Wikimedia Foundation
Note: Wikimedia Commons 무료 라이선스 이미지를 다운로드 후 1600px 기준 JPG로 최적화했습니다.

도입