Core Web Vitals: 웹 성능 향상을 위한 측정 및 개선 방법
빠른 웹사이트를 구축했는데도 사용자들이 느린 로딩이나 끊기는 상호작용에 대해 불평할 수 있습니다. 또는 SEO 순위가 떨어졌고 페이지 경험이 원인이라고 의심할 수도 있습니다. Core Web Vitals은 Google이 사용자 경험을 수량화하는 지표이며 검색 순위에 직접적인 영향을 미칩니다. 이 가이드에서는 실용적이고 실행 가능한 단계를 통해 이를 측정하고 개선하는 방법을 안내합니다.
Core Web Vitals이란?
Core Web Vitals은 Google이 웹페이지의 사용자 경험을 평가하기 위해 사용하는 세 가지 지표 세트입니다:
- Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(예: 이미지, 비디오 또는 텍스트 블록)가 표시되는 시간을 나타냅니다. 좋은 LCP는 2.5초 이하입니다.
- First Input Delay (FID): 상호작용성을 측정합니다. 사용자가 페이지와 처음 상호작용(예: 링크 클릭)한 시간부터 브라우저가 응답할 수 있는 시간까지를 기록합니다. 좋은 FID는 100밀리초 이하입니다.
- Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 페이지 로드 중 예기치 않은 레이아웃 이동을 수량화합니다. 좋은 CLS는 0.1 이하입니다.
이 지표들은 Google의 페이지 경험 신호의 일부이므로 최적화하면 사용자 만족도와 검색 순위를 모두 향상시킬 수 있습니다.
Core Web Vitals 측정 방법
개선하기 전에 측정해야 합니다. 주요 도구 유형은 두 가지입니다: 실험실 도구(합성 테스트)와 필드 도구(실제 사용자 모니터링).
실험실 도구
실험실 도구는 통제된 환경에서 페이지 로드를 시뮬레이션합니다. 디버깅 및 배포 전 변경 사항 테스트에 적합합니다.
- Lighthouse: Chrome DevTools에 내장되어 있으며 성능, 접근성, SEO를 감사합니다. 점수와 구체적인 개선 기회를 제공합니다.
- WebPageTest: 여러 위치와 장치에서 테스트할 수 있으며 고급 지표와 필름스트립을 제공합니다.
필드 도구
필드 도구는 실제 사용자로부터 데이터를 수집하여 다양한 장치와 네트워크에서 성능의 진정한 그림을 제공합니다.
- Chrome User Experience Report (CrUX): Chrome의 실제 사용자 지표 공개 데이터 세트입니다. PageSpeed Insights 또는 BigQuery에서 CrUX 데이터를 볼 수 있습니다.
- Google Search Console: CrUX 데이터를 기반으로 페이지 성능을 보여주는 Core Web Vitals 보고서를 제공합니다.
- Web Vitals JavaScript 라이브러리: 사이트에 계측을 추가하여 Core Web Vitals 데이터를 분석 플랫폼으로 보낼 수 있습니다.
Search Console 또는 PageSpeed Insights에서 사이트의 Core Web Vitals을 확인하는 것으로 시작하세요. 그런 다음 Lighthouse를 사용하여 특정 페이지를 디버깅하세요.
Largest Contentful Paint (LCP) 개선
LCP는 종종 최적화해야 할 가장 영향력 있는 지표입니다. 개선 방법은 다음과 같습니다:
1. 이미지 최적화
- 품질 손실 없이 이미지를 압축하세요. Image Compressor와 같은 도구를 사용하여 파일 크기를 줄이세요.
- JPEG 또는 PNG보다 더 나은 압축을 제공하는 WebP 또는 AVIF와 같은 최신 형식을 사용하세요.
srcset및sizes속성을 사용하여 반응형 이미지를 구현하여 적절한 크기의 이미지를 제공하세요.- 스크롤 아래의 이미지는 지연 로드하되 LCP 이미지는 지연 로드하지 마세요.
2. 렌더링 차단 리소스 제거
- CSS와 JavaScript를 최소화하세요.
- 중요하지 않은 JavaScript는
defer또는async속성으로 지연시키세요. - 중요 CSS를 인라인하고 나머지는 비동기로 로드하세요.
3. 서버 응답 시간 개선
- CDN(콘텐츠 전송 네트워크)을 사용하여 사용자에게 더 가까운 위치에서 자산을 제공하세요.
- 정적 자산 및 API 응답에 캐싱을 활성화하세요.
- 데이터베이스 쿼리와 서버 측 코드를 최적화하세요.
4. 중요한 리소스 사전 로드
글꼴, 주요 이미지 또는 늦게 발견되는 스크립트와 같은 중요한 자산에는 <link rel="preload">를 사용하세요.
First Input Delay (FID) 개선
FID는 응답성을 측정합니다. 높은 FID는 메인 스레드가 바쁘고 사용자 입력에 신속하게 응답할 수 없음을 의미합니다.
1. 긴 작업 분할
긴 JavaScript 작업은 메인 스레드를 차단합니다. setTimeout 또는 requestIdleCallback을 사용하여 더 작은 작업으로 분할하세요.
2. JavaScript 실행 최적화
- 사용하지 않는 JavaScript를 제거하세요(트리 셰이킹).
- 번들을 코드 분할하여 초기에 필요한 코드만 로드하세요.
- 무거운 계산에는 웹 워커를 사용하세요.
3. 큰 타사 스크립트 피하기
분석 또는 광고와 같은 타사 스크립트는 메인 스레드를 차단할 수 있습니다. 비동기로 로드하고 태그 관리자를 사용하여 실행 시점을 제어하는 것을 고려하세요.
4. JavaScript 부팅 시간 단축
페이지 로드 시 구문 분석 및 실행해야 하는 JavaScript의 양을 최소화하세요. 서버 측 렌더링 또는 정적 사이트 생성이 도움이 될 수 있습니다.
Cumulative Layout Shift (CLS) 개선
CLS는 시각적 안정성을 측정합니다. 레이아웃 이동은 요소가 예기치 않게 위치를 변경할 때 발생합니다.
1. 미디어에 항상 크기 속성 포함
이미지와 비디오의 경우 width 및 height 속성을 설정하거나 CSS aspect-ratio를 사용하여 공간을 확보하세요.
2. 광고 및 임베드에 공간 확보
광고 또는 iframe과 같은 동적 콘텐츠가 있는 경우 자리 표시자 또는 고정 크기로 공간을 확보하세요.
3. 기존 콘텐츠 위에 콘텐츠 삽입 피하기
기존 콘텐츠를 아래로 밀어내는 동적으로 주입된 콘텐츠(예: 배너, 알림)는 이동을 유발합니다. 오버레이를 사용하거나 공간을 확보하세요.
4. Font-Display Swap 사용
사용자 정의 글꼴은 FOIT(보이지 않는 텍스트 플래시) 또는 FOUT(스타일 없는 텍스트 플래시)를 유발할 수 있습니다. font-display: swap을 사용하여 대체 텍스트를 즉시 표시하세요.
Core Web Vitals 지표 비교
| 지표 | 측정 대상 | 좋은 임계값 | 일반적인 원인 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 느린 서버, 큰 이미지, 렌더링 차단 리소스 |
| FID | 상호작용성 | ≤ 100밀리초 | 긴 JavaScript 작업, 무거운 타사 스크립트 |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 없는 이미지, 동적 콘텐츠 주입 |
실제 예: LCP를 위한 이미지 최적화
LCP 요소가 히어로 이미지라고 가정해 보겠습니다. 최적화 방법은 다음과 같습니다:
<!-- 이전: 최적화되지 않음 -->
<img src="#" alt="Hero">
<!-- 이후: 최적화됨 -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">
Image Compressor를 사용하여 이미지를 WebP로 변환하고 압축하세요. fetchpriority="high"를 설정하여 브라우저에 일찍 로드하도록 지시하세요. 레이아웃 이동을 방지하려면 크기를 지정하세요.
시간 경과에 따른 Core Web Vitals 모니터링
최적화는 일회성 작업이 아닙니다. 지속적인 모니터링을 설정하세요:
web-vitals라이브러리를 사용하여 지표를 분석으로 보내세요.- Search Console에서 회귀에 대한 알림을 설정하세요.
- CI/CD 파이프라인에서 Lighthouse로 정기적으로 감사하세요.
FAQ
Core Web Vitals이란 무엇이며 왜 중요한가요?
Core Web Vitals은 로딩, 상호작용성, 시각적 안정성을 측정하는 세 가지 지표(LCP, FID, CLS)입니다. 실제 사용자 경험을 반영하고 Google이 순위 신호로 사용하기 때문에 중요합니다.
Core Web Vitals을 얼마나 자주 확인해야 하나요?
주요 배포 후 확인하고 필드 데이터를 통해 지속적으로 모니터링하세요. Search Console은 월간 보고서를 제공하지만 web-vitals 라이브러리를 사용하여 실시간으로 추적할 수 있습니다.
개발자 없이 Core Web Vitals을 개선할 수 있나요?
이미지 압축이나 CDN 사용과 같은 일부 개선은 플러그인이나 도구로 수행할 수 있습니다. 그러나 더 깊은 최적화는 종종 코드 변경이 필요합니다. 이미지 압축과 캐싱부터 시작하세요.
LCP를 개선할 준비가 되셨나요? 무료 Image Compressor로 이미지를 압축하여 품질 손실 없이 파일 크기를 줄이세요.