Core Web Vitals: 웹 성능 측정 및 개선 방법
Core Web Vitals가 중요한 이유
아름다운 웹사이트를 만들었지만 사용자들이 느리다고 느껴 이탈하고 있나요? Core Web Vitals는 Google이 실제 사용자 경험을 측정하는 지표입니다: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). 이 지표들은 검색 순위에 영향을 미치며, 더 중요하게는 방문자가 사이트에 머무는지 여부를 결정합니다. 이 가이드에서는 이 지표들을 측정하고 개선하는 방법을 보여드립니다.
세 가지 지표 이해하기
각 지표는 로딩, 상호작용성, 시각적 안정성의 서로 다른 측면을 측정합니다.
| 지표 | 측정 대상 | 권장 기준 |
|---|---|---|
| LCP | 가장 큰 콘텐츠 요소(이미지, 텍스트 블록)를 렌더링하는 데 걸리는 시간 | ≤ 2.5초 |
| FID | 첫 사용자 상호작용부터 브라우저 응답까지의 시간 | ≤ 100ms |
| CLS | 시각적 안정성: 예상치 못한 레이아웃 이동 | ≤ 0.1 |
참고: FID는 2024년에 Interaction to Next Paint (INP)로 대체될 예정이지만, 최적화 원칙은 유사하게 유지됩니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자를 반영합니다.
- Chrome DevTools Lighthouse: Lighthouse 탭에서 감사를 실행하세요. 실험실 점수와 개선 기회를 제공합니다.
- PageSpeed Insights: URL을 입력하면 Chrome User Experience Report (CrUX)의 필드 데이터와 실험실 제안을 볼 수 있습니다.
- Search Console: Core Web Vitals 보고서에서 그룹 수준의 필드 데이터를 확인하세요.
- Web Vitals JavaScript 라이브러리:
web-vitals를 사이트에 추가하여 실제 사용자 지표를 수집하세요.
import {onLCP, onFID, onCLS} from 'web-vitals';
onLCP(console.log);
onFID(console.log);
onCLS(console.log);이 데이터를 사용하여 패턴을 파악하고 수정 우선순위를 정하세요.
Largest Contentful Paint (LCP) 개선하기
LCP는 종종 가장 영향력이 큰 지표입니다. 다음 영역을 최적화하세요:
- 이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF를 사용하며, 반응형 크기를 제공하세요. Image Compressor와 같은 도구는 눈에 띄는 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다.
- 중요 리소스 사전 로드: 히어로 이미지와 폰트에
<link rel="preload">를 사용하세요. - 렌더링 차단 리소스 제거: 중요 CSS를 인라인하고, 중요하지 않은 JavaScript를 지연시키세요.
- CDN 사용: 사용자에게 더 가까운 위치에서 자산을 제공하세요.
- 자산 캐시: 정적 파일에 긴 캐시 수명을 설정하세요.
예: LCP 이미지 사전 로드:
<link rel="preload" as="image" href="#">First Input Delay (FID) 개선하기
FID는 응답성을 측정합니다. 긴 JavaScript 작업은 메인 스레드를 차단합니다.
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 메인 스레드에 양보하세요. - 메인 스레드 작업 최소화: 사용하지 않는 JavaScript를 제거하고, 코드 분할하며, 중요하지 않은 스크립트를 지연시키세요.
- 웹 워커 사용: 무거운 계산에 사용하세요.
- 큰 동기 스크립트 피하기: 서드파티 스크립트를 비동기로 로드하세요.
Lighthouse의 "Minimize main-thread work" 및 "Reduce JavaScript execution time" 기회를 감사하세요.
Cumulative Layout Shift (CLS) 개선하기
CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인과 해결 방법:
- 크기 없는 이미지: 항상
width및height속성을 설정하거나 CSSaspect-ratio를 사용하세요. - 광고, 임베드, iframe: 플레이스홀더나 고정 크기 컨테이너로 공간을 확보하세요.
- 동적 콘텐츠 삽입: 사용자 상호작용에 의해 트리거되지 않는 한 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.
- 웹 폰트:
font-display: swap을 사용하고 폰트를 사전 로드하여 보이지 않는 텍스트나 레이아웃 이동을 피하세요.
예: 이미지 공간 확보:
<img src="#" width="800" height="600" alt="...">지속적 모니터링을 위한 도구와 워크플로
성능은 일회성 수정이 아닙니다. 개발 프로세스에 모니터링을 통합하세요:
- Lighthouse CI: 모든 풀 리퀘스트에서 감사를 실행하여 회귀를 잡아내세요.
- Real User Monitoring (RUM):
web-vitals라이브러리를 사용하고 데이터를 분석 플랫폼으로 전송하세요. - 성능 예산: 지표에 대한 임계값을 설정하고 초과 시 빌드를 실패시키세요.
정기적으로 PageSpeed Insights와 Search Console을 확인하여 진행 상황을 추적하세요.
FAQ
Core Web Vitals란 무엇인가요?
Core Web Vitals는 Google이 정의한 지표 세트로, 실제 사용자 경험을 측정합니다: Largest Contentful Paint(로딩), First Input Delay(상호작용성), Cumulative Layout Shift(시각적 안정성).
Core Web Vitals는 얼마나 자주 측정해야 하나요?
RUM으로 지속적으로 모니터링하고, 중요한 코드 변경 시마다 실험실 감사를 실행하세요. Search Console 또는 PageSpeed Insights를 통해 매월 필드 데이터를 확인하세요.
개발자 없이 Core Web Vitals를 개선할 수 있나요?
이미지 압축이나 CDN 사용과 같은 일부 수정은 플러그인이나 도구로 가능하지만, 더 깊은 최적화는 종종 코드 변경이 필요합니다. 이미지와 캐싱부터 시작하세요.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질을 희생하지 않고 파일 크기를 줄이는 무료 Image Compressor를 사용해 보세요.