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

사용자는 빠르고 부드러운 경험을 기대합니다. Google의 Core Web Vitals(CWV)는 이러한 경험을 수치화합니다: Largest Contentful Paint(LCP), First Input Delay(FID), Cumulative Layout Shift(CLS)입니다. 낮은 점수는 SEO와 전환율에 악영향을 줍니다. 이 가이드에서는 각 지표를 측정하고 개선하는 실행 가능한 방법을 알려드립니다.

Core Web Vitals란?

Core Web Vitals는 Google이 순위 신호로 사용하는 세 가지 사용자 중심 지표입니다:

• LCP: 가장 큰 콘텐츠 요소(이미지, 텍스트 블록)가 표시되는 데 걸리는 시간. 좋음: ≤2.5초.
• FID: 첫 사용자 상호작용(클릭, 탭)부터 브라우저 응답까지의 시간. 좋음: ≤100ms.
• CLS: 시각적 안정성—페이지 레이아웃이 예기치 않게 얼마나 이동하는지. 좋음: ≤0.1.

이 지표들은 실험실 환경이 아닌 실제 사용자 경험을 반영합니다. 이를 개선하면 사이트가 더 빠르고 안정적으로 느껴집니다.

Core Web Vitals 측정 방법

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

실험실 도구

• Lighthouse (Chrome DevTools 내): 성능, 접근성, SEO 감사를 실행합니다. LCP, CLS, TBT(FID의 대리 지표)를 보고합니다.
• WebPageTest: 필름스트립과 워터폴 차트를 통한 고급 테스트.
• Chrome DevTools 성능 패널: 런타임 성능을 기록하고 분석합니다.

필드 도구

• Chrome 사용자 경험 보고서(CrUX): 수백만 사이트의 실제 사용자 지표 공개 데이터셋.
• Google Search Console: Core Web Vitals 보고서에서 주의가 필요한 URL 그룹을 보여줍니다.
• web-vitals JavaScript 라이브러리: 실제 사용자 지표를 수집하여 분석 도구로 전송합니다.

필드 데이터를 사용하여 문제 페이지를 식별한 다음, 실험실 도구로 진단하고 수정하세요.

Largest Contentful Paint(LCP) 개선

LCP는 종종 히어로 이미지나 주요 제목입니다. 속도를 높이려면:

1. 이미지 최적화: 압축하고, 최신 형식(WebP, AVIF)을 사용하며, 반응형 크기로 제공하세요. 이미지 압축기와 같은 도구가 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다.
2. 중요 리소스 사전 로드: 히어로 이미지, 폰트, 핵심 CSS에 <link rel="preload">를 사용하세요.
3. 서버 응답 시간 단축: 캐싱, CDN을 사용하고 백엔드 쿼리를 최적화하세요.
4. 렌더링 차단 리소스 제거: 중요하지 않은 JS와 CSS를 지연시키고, 핵심 CSS를 인라인으로 처리하세요.
5. CDN 사용: 사용자와 가까운 위치에서 자산을 제공하세요.

예시: LCP 이미지 사전 로드:

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

First Input Delay(FID) 개선

FID는 응답성을 측정합니다. 긴 지연은 메인 스레드가 바쁘다는 뜻입니다. 개선하려면:

• 긴 작업 분할: setTimeout 또는 requestIdleCallback을 사용하여 메인 스레드에 양보하세요.
• JavaScript 최적화: 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연.
• 타사 영향 감소: 분석 및 광고를 비동기로 로드하거나 상호작용 후에 로드하세요.
• 웹 워커 사용: 무거운 계산에 사용하세요.

또한 2024년 3월에 FID를 대체하는 Interaction to Next Paint(INP)도 고려하세요. INP는 페이지 수명 주기 전반에 걸친 전반적인 응답성을 측정합니다. 동일한 최적화가 적용됩니다.

Cumulative Layout Shift(CLS) 개선

CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 광고, 폰트, 동적 콘텐츠. 해결 방법:

• 이미지와 비디오에 항상 width와 height 설정 또는 CSS aspect-ratio 사용.
• 광고 및 임베드 공간 확보: 고정 크기의 자리 표시자 요소를 사용하세요.
• 사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠 삽입 금지.
• font-display: swap 사용 및 폰트 사전 로드로 보이지 않는 텍스트(FOIT)와 레이아웃 이동 방지.
• transform으로 애니메이션 사용(레이아웃을 트리거하는 속성 대신).

예시: 반응형 이미지의 가로 세로 비율 설정:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

도구 및 워크플로

성능을 개발 워크플로에 통합하세요:

1. CI에서 Lighthouse를 실행하여 회귀를 포착하세요.
2. web-vitals 라이브러리를 사용하여 필드 데이터를 분석 도구로 전송하세요.
3. CrUX 및 Search Console에서 실제 사용자 트렌드를 모니터링하세요.
4. 영향도에 따라 수정 우선순위를 정하세요: 종종 LCP와 CLS가 가장 큰 이득을 제공합니다.

빠른 이미지 최적화를 위해 이미지 압축기를 사용하여 LCP에 중요한 이미지를 줄여보세요.

FAQ

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

LCP: 좋음 ≤2.5초, 개선 필요 ≤4초, 나쁨 >4초. FID: 좋음 ≤100ms, 개선 필요 ≤300ms, 나쁨 >300ms. CLS: 좋음 ≤0.1, 개선 필요 ≤0.25, 나쁨 >0.25.

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

RUM을 통해 필드 데이터를 지속적으로 모니터링하세요. 중요한 코드 변경 시마다, 그리고 최소 월 1회 실험실 감사를 실행하여 회귀를 포착하세요.

Core Web Vitals 개선이 정말 SEO에 영향을 주나요?

예, Google은 페이지 경험(CWV 포함)을 순위 신호로 사용합니다. 콘텐츠가 여전히 주요하지만, 좋은 CWV는 경쟁 우위를 제공하고 사용자 만족도를 높일 수 있습니다.