웹 성능 최적화 — Core Web Vitals 2026 가이드

한 줄 요약: Core Web Vitals 2026의 핵심은 INP(Interaction to Next Paint)가 FID를 완전 대체했고, LCP 3초 이내 + CLS 0.1 이하 + INP 200ms 이하가 기준이다.

Google은 Core Web Vitals를 검색 랭킹 요소로 사용하며, 2025년 3월부터 INP가 FID를 공식 대체했다. 이 가이드는 각 지표의 측정법, 최적화 전략, 실전 디버깅 방법을 정리한다.

2026년 Core Web Vitals

2026년 기준 Core Web Vitals: LCP(Largest Contentful Paint, 2.5초 이내), INP(Interaction to Next Paint, 200ms 이내), CLS(Cumulative Layout Shift, 0.1 이내). INP가 FID를 대체한 것이 가장 큰 변화.

LCP(Largest Contentful Paint): 뷰포트 내 가장 큰 콘텐츠 요소가 렌더링되는 시간. 3초 이내가 목표. 가장 흔한 원인은 최적화되지 않은 히어로 이미지, 렌더 블로킹 CSS/JS, 느린 서버 응답이다.

INP(Interaction to Next Paint): 사용자 인터랙션(클릭, 탭, 키보드)부터 다음 화면 업데이트까지의 시간. 200ms 이내가 목표. 메인 스레드를 오래 차단하는 JavaScript가 주 원인이다.

CLS(Cumulative Layout Shift): 페이지 로드 중 예기치 않은 레이아웃 이동의 총합. 0.1 이하가 목표. 크기가 지정되지 않은 이미지, 동적으로 삽입되는 광고, 웹폰트 로드 시 FOUT가 주요 원인이다.

web-vitals 라이브러리로 측정
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(metric => console.log('LCP:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onCLS(metric => console.log('CLS:', metric.value));

LCP 최적화

LCP를 개선하는 핵심 방법: 이미지 최적화(WebP/AVIF, 적절한 사이즈), 서버 응답 시간 단축(CDN, 엣지), 렌더링 차단 리소스 제거(CSS 인라인, JS defer).

INP 최적화

INP를 개선하는 방법: 긴 작업 분할(requestIdleCallback, scheduler.yield), 이벤트 핸들러 최적화, 메인 스레드 부하 감소.

최적화 실전 체크리스트

측정 도구: Chrome DevTools의 Performance 탭, Lighthouse, PageSpeed Insights, Chrome UX Report(CrUX)를 조합하여 측정하라. 실제 사용자 데이터(RUM)가 Lab 데이터보다 중요하다.

실전 디버깅 방법

LCP 디버깅: Chrome DevTools > Performance 탭에서 녹화 후, LCP 마커를 찾아 원인 요소를 확인한다. 대부분 이미지 최적화(WebP + srcset + sizes), 폰트 프리로드, 서버 응답 시간 개선으로 해결된다.

INP 디버깅: PerformanceObserver로 slow interaction을 기록하고, 메인 스레드를 차단하는 긴 태스크를 scheduler.yield()나 requestIdleCallback으로 분할한다.