Core Web Vitals: 웹 성능 측정 및 개선

Core Web Vitals이 중요한 이유

빠른 웹사이트를 구축했는데도 사용자들이 여전히 느린 로딩이나 버벅거리는 상호작용에 대해 불평할 수 있습니다. 또한 Core Web Vitals(CWV) 점수가 좋지 않으면 검색 엔진 순위가 낮아질 수 있습니다. CWV는 Google이 사용자 경험을 정량화하기 위해 사용하는 지표 세트로, Largest Contentful Paint(LCP), First Input Delay(FID), Cumulative Layout Shift(CLS)가 있습니다. 2021년에 Google은 이 지표들을 순위 요소로 반영했기 때문에 이를 무시하면 SEO와 사용자 유지율에 악영향을 미칠 수 있습니다.

이 가이드에서는 각 지표를 측정하는 방법, 일반적인 문제를 식별하는 방법, 그리고 실용적인 해결책을 적용하는 방법을 설명합니다. 모든 예외 상황을 다루기보다는 오늘 바로 실행할 수 있는 조치에 초점을 맞춥니다.

세 가지 Core Web Vitals 이해하기

최적화하기 전에 각 지표가 무엇을 측정하는지와 임계값을 알아두세요.

참고: FID는 2024년 3월에 Interaction to Next Paint(INP)로 대체될 예정이지만 최적화 원칙은 유사합니다. 여기서는 여전히 널리 참조되는 FID에 초점을 맞춥니다.

Core Web Vitals 측정 방법

실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터(합성)는 디버깅에 도움이 되고, 필드 데이터(실제 사용자)는 실제 성능을 보여줍니다.

실험실 도구

• Chrome DevTools의 Lighthouse: 성능, 접근성, SEO에 대한 감사를 실행합니다. LCP, CLS, TBT(FID의 대리 지표)를 보고합니다.
• WebPageTest: 필름스트립과 워터폴 차트를 포함한 고급 테스트.
• PageSpeed Insights: 실험실 데이터와 필드 데이터(가능한 경우)를 결합합니다.

필드 도구

• Chrome User Experience Report (CrUX): 실제 사용자 지표의 공개 데이터 세트. PageSpeed Insights 또는 BigQuery를 통해 액세스할 수 있습니다.
• web-vitals JavaScript 라이브러리: 분석에서 실제 사용자 지표를 수집합니다.
• Search Console Core Web Vitals 보고서: 문제가 있는 URL 그룹을 보여줍니다.

PageSpeed Insights로 빠른 개요를 확인한 다음 Lighthouse로 상세 진단을 수행하세요.

Largest Contentful Paint (LCP) 개선

LCP는 종종 느린 서버 응답, 렌더링 차단 리소스, 최적화되지 않은 이미지로 인해 나빠집니다. 다음 단계를 따르세요:

1. 서버 응답 시간 최적화: 캐싱, CDN, 효율적인 백엔드 코드를 사용하세요. Time to First Byte(TTFB)를 0.8초 미만으로 목표하세요.
2. 렌더링 차단 리소스 제거: 중요한 CSS를 인라인으로 처리하고, 중요하지 않은 CSS와 JavaScript는 지연시키세요. 스크립트에는 async 또는 defer를 사용하세요.
3. 이미지 최적화: 이미지를 압축하고, 최신 형식(WebP, AVIF)을 사용하며, srcset으로 반응형 이미지를 구현하세요. LCP 이미지의 경우 <link rel="preload">로 미리 로드하세요.
4. CDN 사용: 엣지 위치에서 정적 자산을 제공하세요.
5. 자산 캐싱: 정적 리소스에 긴 캐시 수명을 설정하세요.

예: LCP 이미지를 미리 로드하고 레이아웃 이동을 피하기 위해 명시적 크기를 설정하세요.

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">

First Input Delay (FID) 개선

FID는 응답성을 측정합니다. 긴 JavaScript 작업이 메인 스레드를 차단하여 상호작용을 지연시킵니다. FID를 개선하려면:

• 긴 작업 분할: setTimeout 또는 requestIdleCallback을 사용하여 메인 스레드에 양보하세요.
• 메인 스레드 작업 최소화: JavaScript 실행 시간을 줄이고, 큰 번들을 피하며, 코드 분할을 사용하세요.
• 이벤트 핸들러 최적화: 비용이 큰 핸들러를 디바운스하거나 스로틀하세요.
• 웹 워커 사용: CPU 집약적인 작업에 사용하세요.
• 큰 타사 스크립트 피하기: 불필요한 스크립트를 감사하고 제거하세요.

Lighthouse와 같은 도구는 긴 작업을 표시합니다. Chrome DevTools의 성능 패널을 사용하여 식별하세요.

Cumulative Layout Shift (CLS) 개선

CLS는 시각적 안정성을 측정합니다. 레이아웃 이동은 요소가 예기치 않게 위치를 변경할 때 발생합니다. 일반적인 원인과 해결 방법:

• 크기가 지정되지 않은 이미지: 항상 width 및 height 속성을 설정하거나 CSS aspect-ratio를 사용하세요.
• 광고, 임베드, iframe: 자리 표시자로 공간을 확보하거나 고정 크기를 설정하세요.
• 동적 콘텐츠: 사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.
• 웹 폰트: font-display: swap을 사용하고 폰트를 미리 로드하여 보이지 않는 텍스트(FOIT)와 레이아웃 이동을 피하세요.
• 애니메이션: 애니메이션에는 레이아웃을 트리거하지 않는 CSS transform 및 opacity를 선호하세요.

DevTools의 Layout Instability API로 테스트하거나 web-vitals 라이브러리를 사용하여 필드에서 CLS를 기록하세요.

지속적인 모니터링을 위한 실용적인 워크플로

최적화는 일회성 작업이 아닙니다. 모니터링을 설정하세요:

1. web-vitals 라이브러리로 사이트를 계측하고 분석 플랫폼으로 지표를 전송하세요.
2. 지표가 임계값을 초과할 때 알림을 설정하세요.
3. CI/CD에서 정기적으로 Lighthouse를 실행하여 회귀를 포착하세요.
4. Search Console을 사용하여 필드 데이터 추세를 모니터링하세요.

순위에 중요한 것은 필드 데이터라는 점을 기억하세요. 실험실 데이터는 디버깅에 도움이 되지만 항상 실제 사용자로 검증하세요.

FAQ

Core Web Vitals의 현재 임계값은 무엇인가요?

2023년 기준 임계값은 다음과 같습니다: 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년에 INP로 대체될 예정입니다.

Core Web Vitals을 얼마나 자주 측정해야 하나요?

분석을 통해 필드 데이터를 지속적으로 모니터링하고, 모든 배포 시 또는 최소 주간으로 실험실 테스트(예: Lighthouse)를 실행하세요. 주요 변경 사항이 있으면 새로운 감사를 트리거해야 합니다.

개발자 없이 Core Web Vitals을 개선할 수 있나요?

이미지 압축이나 캐싱 활성화와 같은 일부 수정은 플러그인이나 호스팅 설정을 통해 수행할 수 있습니다. 그러나 더 깊은 최적화(예: 코드 분할, 크리티컬 CSS)는 일반적으로 개발 작업이 필요합니다.

더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질 손실 없이 파일 크기를 줄이려면 무료 이미지 압축기를 사용해 보세요.