Core Web Vitals 예산 계산기

Core Web Vitals 예산 계산기 사용 가이드

Core Web Vitals는 페이지가 얼마나 빨리 보이고(LCP), 얼마나 빨리 반응하고(INP), 화면이 얼마나 덜 밀리는지(CLS)를 재는 Google의 사용자 경험 지표입니다. PageSpeed Insights 결과를 받아도 숫자가 좋은 편인지 바로 판단하기 어렵습니다.

이 계산기는 lcp_ms=2900처럼 측정값을 적으면 Google이 공개한 경계값으로 판정합니다. LCP는 2.5초 이하 좋음·4초 초과 나쁨, INP는 200ms·500ms, CLS는 0.1·0.25, FCP는 1.8초·3초, TTFB는 0.8초·1.8초가 기준입니다.

자바스크립트(350KB), CSS(100KB), 이미지 총용량(1MB)은 흔히 쓰는 작업 예산을 기준으로 판정합니다. 지표 이름은 'LCP 가장 큰 콘텐츠 표시'처럼 한국어 뜻과 함께 나옵니다. 넣은 지표만 표에 나오므로 일부만 확인해도 됩니다.

사용 방법

1. 1PageSpeed Insights나 크롬 개발자 도구에서 측정값을 확인합니다.
2. 2'측정값 (lcp_ms=, inp_ms=, cls=, fcp_ms=, ttfb_ms=, js_kb=, css_kb=, img_kb=)' 칸에 한 줄씩 적습니다.
3. 3'실행'을 누르면 지표마다 판정과 기준이 표로 나옵니다.
4. 4'나쁨'과 '개선 필요' 지표부터 원인을 찾아 고칩니다.

lcp_ms=2900
inp_ms=180
cls=0.12
ttfb_ms=650
js_kb=410
img_kb=1500

LCP 가장 큰 콘텐츠 표시	2900ms	개선 필요	좋음 ≤ 2500ms · 나쁨 > 4000ms
INP 반응 속도	180ms	좋음	좋음 ≤ 200ms · 나쁨 > 500ms
CLS 화면 밀림	0.12	개선 필요	좋음 ≤ 0.1 · 나쁨 > 0.25
TTFB 서버 첫 응답	650ms	좋음	좋음 ≤ 800ms · 나쁨 > 1800ms
자바스크립트 용량(압축 후)	410KB	개선 필요	좋음 ≤ 350KB · 나쁨 > 1000KB
이미지 총용량	1500KB	개선 필요	좋음 ≤ 1000KB · 나쁨 > 3000KB

이럴 때 쓰면 좋아요

• PageSpeed Insights 결과를 팀에 공유하기 쉬운 표로 정리할 때
• 개편 전후 측정값을 같은 기준으로 비교할 때
• 성능 예산(용량 한도)을 정하고 지키는지 볼 때
• 어느 지표부터 손볼지 우선순위를 정할 때

문제가 생겼을 때

활용 팁

• CLS가 높으면 크기 속성이 없는 이미지와 늦게 끼어드는 광고·배너를 먼저 확인하세요.
• INP가 나쁘면 클릭 후 실행되는 무거운 자바스크립트와 큰 DOM을 의심하세요. HTML DOM 복잡도 분석기가 도움이 됩니다.
• 용량 예산은 사이트 성격에 따라 조정해도 됩니다. 기준을 정해 두고 꾸준히 지키는 것이 중요합니다.

자주 묻는 질문