Core Web Vitals: 웹 성능 측정 및 개선하기
Core Web Vitals이 웹사이트에 중요한 이유
아마도 Core Web Vitals(CWV)에 대해 들어보셨을 겁니다. Google이 사용자 경험을 측정하는 지표입니다. 하지만 사이트가 느리거나 버벅거린다면, 여러분만 그런 것이 아닙니다. 많은 개발자가 CWV 점수를 구체적인 수정 사항으로 전환하는 데 어려움을 겪습니다. 이 가이드는 각 바이탈을 측정하고 개선하는 실용적인 단계와 코드 스니펫을 안내합니다.
Core Web Vitals은 세 가지 특정 지표입니다: 로딩 성능을 위한 Largest Contentful Paint (LCP), 상호작용성을 위한 First Input Delay (FID), 시각적 안정성을 위한 Cumulative Layout Shift (CLS)입니다. Google은 이를 순위 신호로 사용하므로, 최적화하면 사용자와 SEO 모두에게 이익이 됩니다.
세 가지 Core Web Vitals 이해하기
수정 방법을 살펴보기 전에 각 지표가 무엇을 측정하는지, 좋은 점수의 임계값을 명확히 합시다.
| 지표 | 측정 항목 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 2.5초 – 4.0초 | > 4.0초 |
| FID | 상호작용성 | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | 시각적 안정성 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
참고: FID는 2024년 3월에 Interaction to Next Paint (INP)로 대체되지만 최적화 원칙은 유사합니다. 여기서는 여전히 널리 참조되는 FID에 초점을 맞춥니다.
Core Web Vitals 측정 방법
완전한 그림을 얻으려면 실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터(합성 테스트)는 디버깅에 도움이 되고, 필드 데이터(실제 사용자 모니터링)는 실제 사용자 경험을 보여줍니다.
실험실 도구
- Chrome DevTools의 Lighthouse: Lighthouse 탭에서 감사를 실행합니다.
- PageSpeed Insights: URL에 대한 실험실 및 필드 데이터를 모두 제공합니다.
- WebPageTest: 사용자 지정 네트워크 조건으로 고급 테스트를 수행합니다.
필드 도구
- Chrome User Experience Report (CrUX): 실제 사용자 지표의 공개 데이터 세트입니다.
- Google Search Console: Core Web Vitals 보고서는 그룹 성능을 보여줍니다.
- web-vitals JavaScript 라이브러리: 분석에서 실제 사용자로부터 지표를 수집합니다.
필드 데이터를 수집하려면 web-vitals 라이브러리를 포함하고 지표를 분석 엔드포인트로 전송하세요:
<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>이렇게 하면 실험실 테스트를 보완하는 실제 데이터를 얻을 수 있습니다.
Largest Contentful Paint (LCP) 개선하기
LCP는 가장 큰 콘텐츠 요소(이미지, 텍스트 블록 또는 비디오)가 표시되는 시점을 측정합니다. 개선하려면 서버 응답 시간, 리소스 로딩, 렌더링 차단 리소스에 집중하세요.
1. 서버 응답 시간 최적화
- CDN을 사용하여 사용자에게 더 가까운 곳에서 콘텐츠를 제공하세요.
- 캐싱을 활성화하세요(HTTP 캐시 헤더, 서버 측 캐시).
- TTFB(Time to First Byte)가 지속적으로 높으면 호스팅을 업그레이드하세요.
2. 이미지 최적화
- 이미지를 압축하고 WebP 또는 AVIF와 같은 최신 형식을 사용하세요.
srcset및sizes를 사용한 반응형 이미지를 사용하세요.- 스크롤 아래 이미지는 지연 로드하되 LCP 이미지는 지연 로드하지 마세요.
빠른 이미지 압축을 위해 이미지 압축기를 사용해 보세요.
3. 렌더링 차단 리소스 제거
- 중요 CSS를 인라인화하고 중요하지 않은 CSS는 지연시키세요.
- JavaScript에
async또는defer를 사용하세요. - CSS와 JavaScript를 축소하세요.
4. 중요한 리소스 사전 로드
글꼴이나 히어로 이미지와 같은 주요 자산에 <link rel="preload">를 사용하세요:
<link rel="preload" href="/hero.webp" as="image">First Input Delay (FID) 개선하기
FID는 사용자가 페이지와 처음 상호작용한 시점부터 브라우저가 응답할 수 있을 때까지의 시간을 측정합니다. 긴 JavaScript 작업이 메인 스레드를 차단하여 지연을 발생시킵니다.
1. 긴 작업 분할
setTimeout 또는 requestIdleCallback을 사용하여 장시간 실행되는 JavaScript를 작은 청크로 나누세요. 예를 들어:
function processItems(items) {
if (items.length === 0) return;
const item = items.pop();
// Process item
setTimeout(() => processItems(items), 0);
}2. 이벤트 핸들러 최적화
- 입력 핸들러를 디바운스하거나 스로틀하세요.
- 이벤트 리스너에서 복잡한 계산을 피하고 Web Worker로 오프로드하세요.
3. JavaScript 실행 시간 줄이기
- 동적 가져오기로 코드 분할을 하세요.
- 사용하지 않는 JavaScript를 제거하세요(트리 쉐이킹).
- 중요하지 않은 iframe에
loading="lazy"를 사용하세요.
4. 무거운 작업에 Web Worker 사용
CPU 집약적인 작업을 메인 스레드에서 오프로드하세요:
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };Cumulative Layout Shift (CLS) 개선하기
CLS는 예기치 않은 레이아웃 이동을 측정합니다. 일반적인 원인으로는 크기가 지정되지 않은 이미지, 광고, 임베드, 웹 글꼴이 있습니다.
1. 미디어에 항상 너비와 높이 설정
이미지와 비디오에 width 및 height 속성을 포함하거나 CSS aspect-ratio를 사용하세요:
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}2. 동적 콘텐츠를 위한 공간 확보
광고나 임베드의 경우 자리 표시자 요소로 공간을 확보하거나 고정 크기를 설정하세요.
3. 기존 콘텐츠 위에 콘텐츠 삽입 피하기
배너를 삽입해야 하는 경우 레이아웃을 이동시키지 않는 변환 애니메이션 또는 오버레이를 사용하세요.
4. Font-Display: swap 사용
웹 글꼴로 인한 보이지 않는 텍스트와 레이아웃 이동을 방지하세요:
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}모니터링 및 지속적인 개선
Core Web Vitals 최적화는 일회성 작업이 아닙니다. 다음과 같은 도구로 지속적인 모니터링을 설정하세요:
- Google Search Console: CWV 회귀에 대한 알림.
- Lighthouse CI: 모든 풀 리퀘스트에서 감사 실행.
- Real User Monitoring (RUM): New Relic, Datadog 또는 사용자 지정 분석과 같은 도구.
정기적으로 필드 데이터를 검토하고 수정 사항을 반복하세요. 점수가 가장 나쁜 지표를 먼저 우선순위로 지정하세요.
FAQ
Core Web Vitals이란 무엇인가요?
Core Web Vitals은 Google이 사용자 경험을 측정하기 위해 사용하는 지표 세트입니다: LCP(로딩), FID(상호작용성), CLS(시각적 안정성)입니다.
Core Web Vitals을 얼마나 자주 확인해야 하나요?
Search Console 또는 RUM을 통해 필드 데이터를 지속적으로 모니터링하세요. 주요 변경 후 및 최소 월 1회 실험실 테스트를 실행하세요.
Core Web Vitals 개선이 SEO에 영향을 미치나요?
예, Core Web Vitals은 순위 신호입니다. 더 나은 점수는 검색 가시성과 사용자 만족도를 향상시킬 수 있습니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 무료 이미지 압축기를 사용하여 품질 손실 없이 파일 크기를 줄이세요.