Core Web Vitals: 웹 성능 향상을 위한 측정 및 개선
빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평하나요? 아니면 훌륭한 콘텐츠에도 불구하고 SEO 순위가 정체되어 있나요? 범인은 Core Web Vitals—Google의 사용자 경험 지표일 수 있습니다. 이 가이드에서는 Core Web Vitals이 무엇인지, 어떻게 측정하는지, 그리고 각 지표를 개선하는 실용적인 단계를 배웁니다.
Core Web Vitals이란?
Core Web Vitals은 Google이 사용자 경험을 정량화하기 위해 사용하는 세 가지 특정 지표입니다:
- Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 페이지가 로드를 시작한 후 2.5초 이내에 발생해야 합니다.
- Interaction to Next Paint (INP): 반응성을 측정합니다. 페이지 방문의 75%에서 200밀리초 미만이어야 합니다.
- Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 0.1 미만이어야 합니다.
이 지표들은 Google의 페이지 경험 신호의 일부이며 검색 순위에 영향을 미칠 수 있습니다. 더 중요하게는 실제 사용자 경험을 반영합니다—느린 사이트는 방문자를 좌절시키고 떠나게 만듭니다.
Core Web Vitals 측정 방법
측정하지 않으면 개선할 수 없습니다. 두 가지 주요 유형의 도구가 있습니다: 랩 도구(합성 테스트)와 필드 도구(실제 사용자 모니터링).
랩 도구
- Lighthouse: Chrome DevTools에 내장되어 있습니다(Audits 탭). 점수와 구체적인 개선 기회를 제공합니다.
- PageSpeed Insights: 랩 및 필드 데이터를 결합한 웹 도구입니다.
- WebPageTest: 사용자 지정 위치와 기기를 사용한 고급 테스트입니다.
필드 도구
- Chrome User Experience Report (CrUX): Chrome 사용자의 실제 데이터로, PageSpeed Insights 또는 BigQuery를 통해 사용할 수 있습니다.
- web-vitals 라이브러리: 자체 분석에서 지표를 측정하는 JavaScript 라이브러리입니다.
- Search Console: Core Web Vitals 보고서는 CrUX 데이터를 기반으로 그룹 성능을 보여줍니다.
PageSpeed Insights로 빠른 개요를 확인한 다음, web-vitals 라이브러리를 사용하여 시간 경과에 따른 실제 사용자 지표를 추적하세요.
LCP (Largest Contentful Paint) 개선
LCP는 일반적으로 접힌 부분 위의 가장 큰 이미지 또는 텍스트 블록입니다. 개선하려면:
- 이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하고,
srcset으로 반응형 이미지를 제공하세요. - 중요 리소스 미리 로드: 히어로 이미지와 글꼴에
<link rel="preload">를 사용하세요. - 렌더링 차단 리소스 제거: 중요 CSS를 인라인하고, 비중요 CSS와 JavaScript를 지연시키세요.
- CDN 사용: 사용자에게 더 가까운 위치에서 자산을 제공하세요.
- 캐싱 활성화: 정적 자산에 긴 캐시 시간을 설정하세요.
이미지의 경우, TryQuickToolBox의 Image Compressor와 같은 도구가 눈에 띄는 품질 손실 없이 파일 크기를 줄이는 데 도움이 될 수 있습니다.
INP (Interaction to Next Paint) 개선
INP는 사용자 상호작용(클릭, 탭, 키 누름)부터 다음 시각적 업데이트까지의 시간을 측정합니다. 개선하려면:
- JavaScript 실행 시간 줄이기: 긴 작업을 분할하고,
requestIdleCallback또는setTimeout을 사용하여 메인 스레드에 양보하세요. - 큰 DOM 크기 피하기: DOM을 1,500개 노드 미만, 깊이 32레벨 미만으로 유지하세요.
- 이벤트 핸들러 최적화: 스크롤 및 크기 조정과 같은 빈번한 이벤트를 디바운스하거나 스로틀하세요.
- 웹 워커 사용: 무거운 계산을 메인 스레드에서 이동하세요.
- 타사 스크립트 최소화: 종종 메인 스레드를 차단합니다.
Chrome DevTools Performance 패널을 사용하여 긴 작업을 식별하고 최적화하세요.
CLS (Cumulative Layout Shift) 개선
CLS는 예상치 못한 레이아웃 이동을 측정합니다. 줄이려면:
- 이미지와 비디오에 항상 width 및 height 속성 포함: 이렇게 하면 공간이 확보됩니다.
- 광고 및 임베드에 공간 확보: CSS
aspect-ratio또는 고정 크기를 사용하세요. - 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 상호작용에 대한 응답은 예외입니다.
- font-display: swap 사용: 보이지 않는 텍스트를 방지하지만 약간의 이동이 발생할 수 있습니다. 중요한 텍스트에는
font-display: optional을 고려하세요. - 동적 콘텐츠에 주의: 접힌 부분 아래에 로드하거나 전환을 부드럽게 애니메이션하세요.
Core Web Vitals 지표 비교
| 지표 | 측정 대상 | 양호 임계값 | 낮은 점수의 주요 원인 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 느린 서버, 렌더링 차단 리소스, 큰 이미지 |
| INP | 반응성 | ≤ 200ms | 긴 작업, 무거운 JavaScript, 큰 DOM |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 없는 이미지, 동적 콘텐츠, 웹 글꼴 |
지속적인 모니터링을 위한 도구 및 기술
Core Web Vitals 개선은 일회성 작업이 아닙니다. 지속적인 모니터링을 설정하세요:
web-vitals라이브러리를 사용하여 분석 플랫폼에 지표를 전송하세요.- 지표가 임계값을 초과할 때 알림을 설정하세요.
- CI/CD에서 정기적으로 Lighthouse를 실행하여 회귀를 포착하세요.
- Search Console에서 CrUX 데이터를 모니터링하여 실제 사용자 추세를 확인하세요.
빠른 확인을 위해 각 중요한 변경 후 Chrome DevTools Lighthouse 탭 또는 PageSpeed Insights를 사용하세요.
자주 묻는 질문
Core Web Vitals이란 무엇이며 왜 중요한가요?
Core Web Vitals은 로딩, 상호작용성 및 시각적 안정성을 측정하는 세 가지 지표(LCP, INP, CLS)입니다. 실제 사용자 경험을 반영하고 Google이 순위 신호로 사용하기 때문에 중요합니다.
Core Web Vitals을 얼마나 자주 측정해야 하나요?
모든 주요 코드 변경 후에 측정하고, 시간 경과에 따른 실제 사용자 지표를 추적하기 위해 지속적인 필드 모니터링을 설정하세요. Lighthouse와 같은 랩 도구는 빠른 확인에 좋지만, 필드 데이터는 실제 사용자 경험을 보여줍니다.
개발자 없이 Core Web Vitals을 개선할 수 있나요?
이미지 압축과 같은 일부 개선은 도구로 할 수 있지만, 대부분은 코드 변경(예: width/height 속성 추가, JavaScript 최적화)이 필요합니다. 일반적으로 개발자나 웹 성능에 익숙한 사람이 필요합니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질을 희생하지 않고 파일 크기를 줄이려면 무료 Image Compressor를 사용해 보세요.