웹 성능이 중요하다는 건 누구나 알지만,
정작 무엇을 기준으로 "성능이 좋다"고 말할 수 있을까?
바로 그 기준이 Core Web Vitals, 즉 구글이 정의한 웹 사용자 경험 지표들이다.
이번 글에서는 단순히 지표를 나열하는 데 그치지 않고,
각 지표가 어떤 의미를 갖고 실제로 어떻게 개선할 수 있는지까지 정리해봤다.
✅ Core Web Vitals란?
구글이 정의한 웹사이트의 사용자 경험 품질을 평가하기 위한 핵심 지표들
세 가지 주요 항목이 있고, 모두 측정 가능한 수치 기반으로 판단된다.
- LCP (Largest Contentful Paint)
- FID (First Input Delay) → 2024년부터 INP로 대체됨
- CLS (Cumulative Layout Shift)
✅ 1. LCP (Largest Contentful Paint)
"사용자가 볼 수 있는 가장 큰 요소가 화면에 뜨는 데 걸리는 시간"
📏 기준
- 좋음: ≤ 2.5초
- 개선 필요: 2.5초 ~ 4초
- 나쁨: ≥ 4초
📌 주로 영향을 주는 요소들
- Hero 이미지
- 대형 텍스트 블록
- 로딩 블로킹 리소스 (폰트, JS, CSS)
💡 개선 방법
<img>대신next/image사용- 이미지
priority설정 - Critical CSS 우선 로딩
- WebFont 최적화 (
font-display: swap) - Lazy Load는 LCP 대상 제외되므로 주의
✅ 2. INP (Interaction to Next Paint)
"사용자의 인터랙션 후, 화면에 피드백이 반영될 때까지 걸리는 시간"
📏 기준
- 좋음: ≤ 200ms
- 개선 필요: 200ms ~ 500ms
- 나쁨: ≥ 500ms
📌 주로 영향을 주는 요소들
- 버튼 클릭 → 반응 지연
- 입력창 타이핑 → 느린 렌더링
- JavaScript 실행 블로킹
💡 개선 방법
- 이벤트 핸들러 최적화 (불필요한 state update 줄이기)
- Virtualized List 사용 (
react-window,react-virtual) - 긴 작업은 Web Worker로 분리
- Debounce/throttle 적용
- Lazy Loading과 코드 스플리팅
✅ 3. CLS (Cumulative Layout Shift)
"화면이 예상치 않게 움직이는 정도를 수치화한 값"
📏 기준
- 좋음: ≤ 0.1
- 개선 필요: 0.1 ~ 0.25
- 나쁨: ≥ 0.25
📌 주로 발생하는 원인
- 이미지/비디오에 고정 크기 미지정
- 광고, iframe이 동적으로 삽입됨
- Webfont FOUT/FOIT (플래시 현상)
💡 개선 방법
- 이미지에는 항상
width,height지정 - 광고나 비디오 영역은 미리 공간 확보
font-display: swap설정- 애니메이션은
transform,opacity사용
✅ 측정 도구 소개 (실전 활용법)
| 도구 | 설명 |
|---|---|
| Lighthouse | Chrome DevTools 내장 성능 측정 도구 |
| WebPageTest | 상세한 성능 분석 도구 |
| PageSpeed Insights | 구글 웹 성능 진단 웹사이트 |
| Chrome UX Report | 실제 사용자 데이터 기반의 보고서 |
| Web Vitals Chrome Extension | 실시간 지표 확인 가능한 크롬 확장 프로그램 |
✅ 실전 최적화 체크리스트
✅ 초기 렌더링
- Critical CSS 인라인
- 이미지
priority,preload설정 - Lazy Load 전략 적절하게 조절
✅ 인터랙션 성능
- 버튼/입력 등 사용자 이벤트 반응 빠르게
- 불필요한 렌더링 최소화 (
React.memo,useCallback) - 복잡한 작업은 Web Worker로 분리
✅ 레이아웃 안정성
- 모든 시각 요소에 고정 크기 제공
- 폰트 FOUT/FOIT 방지
- 스켈레톤, 플레이스홀더로 사용자 시선 고정
✅ 내 경험에서 느낀 점
회사에서 SSR 기반 Next.js 프로젝트를 할 때,
첫 배포 후 LCP가 3.2초가 나와서 next/image, font-display: swap, preconnect 등을 적용했고
0.9초까지 줄일 수 있었던 경험이 있다.
반대로 CLS는 무심코 들어간 position: absolute의 사이드 이펙트로 0.3 이상이 나와서,
이미지 크기를 미리 고정하고 min-height로 공간 확보하면서 해결했다.
성능 최적화는 "정답"이 아니라, 상황에 맞는 해석과 조정"이 필요하다는 걸 실감했다.
💡 "성능은 기능이 아니라 경험이다. 사용자 눈에 보이는 순간부터 시작된다."
