Core Web Vitals 최적화 실전 가이드

사용자 경험의 정량화

2023년 구글의 Core Web Vitals가 검색 순위에 본격 반영되기 시작했습니다. 웹 성능이 단순히 기술적 지표가 아니라 비즈니스 지표가 되었습니다.

3가지 핵심 지표

1. LCP (Largest Contentful Paint) - 2.5초 이하

페이지 로드 후 가장 큰 콘텐츠(이미지, 텍스트)가 화면에 나타나는 시간입니다.

// 이미지 최적화
<img src="large-image.jpg" loading="lazy" width="400" height="300" alt="...">

// 웹폰트 최적화
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* 빠른 로딩 */
}

2. FID (First Input Delay) - 100ms 이하

사용자가 버튼을 클릭할 때, 브라우저가 반응하기까지의 시간입니다.

• 자바스크립트 최적화: 번들 크기 줄이기
• 메인 스레드 작업 분산
• 오래 실행되는 작업 분할

3. CLS (Cumulative Layout Shift) - 0.1 이하

페이지 로드 중 콘텐츠가 예기치 않게 움직이는 정도입니다.

/* 안전한 방법: 이미지에 고정 크기 설정 */
<img src="..." width="400" height="300" alt="...">

/* 또는 aspect-ratio 사용 */
img {
  aspect-ratio: 16 / 9;
}

측정 도구

• PageSpeed Insights: 구글의 공식 도구
• Lighthouse: 크롬 개발자 도구
• Web Vitals 라이브러리