Core Web Vitals: 웹 성능 향상을 위한 측정 및 개선
빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평하나요? 아니면 Google 업데이트 이후 SEO 순위가 떨어졌나요? 원인은 Core Web Vitals일 수 있습니다. 이는 실제 사용자 경험을 수치화하는 지표 집합입니다. 이를 무시하면 사용성과 검색 가시성 모두에 악영향을 줄 수 있습니다. 이 가이드는 오늘 바로 적용할 수 있는 실용적인 단계를 통해 각 지표를 측정하고 개선하는 방법을 안내합니다.
Core Web Vitals란 무엇인가요?
Core Web Vitals는 Google이 페이지 경험을 평가하는 데 사용하는 세 가지 특정 지표입니다:
- Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(이미지, 비디오 또는 텍스트 블록)가 표시되는 데 걸리는 시간을 추적합니다. 좋은 LCP는 2.5초 이하입니다.
- Interaction to Next Paint (INP): 상호 작용성을 측정합니다. 모든 상호 작용(클릭, 탭, 키 누름)의 지연 시간을 기록하고 높은 백분위수를 보고합니다. 좋은 INP는 200밀리초 이하입니다.
- Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 로딩 중 예상치 못한 레이아웃 이동을 수치화합니다. 좋은 CLS는 0.1 이하입니다.
이 지표들은 Google의 페이지 경험 신호의 일부이지만, 사용자가 사이트를 인식하는 방식에도 직접적인 영향을 미칩니다. 느린 LCP는 사용자를 짜증나게 하고, 높은 INP는 페이지가 반응하지 않는 것처럼 느껴지게 하며, CLS는 잘못된 클릭을 유발합니다.
Core Web Vitals 측정 방법
완전한 그림을 얻으려면 실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자로부터 수집됩니다.
실험실 도구
- Lighthouse: Chrome DevTools에 내장되어 있으며 성능을 감사하고 LCP, CLS, TBT(INP의 대리 지표)에 대한 점수를 제공합니다. 모바일 조건을 모방하기 위해 스로틀링을 적용하고 시크릿 모드에서 실행하세요.
- WebPageTest: 여러 위치와 장치에서 고급 테스트를 제공하며, 필름스트립 뷰와 워터폴 차트를 포함합니다.
- PageSpeed Insights: 실험실 데이터와 필드 데이터(CrUX에서)를 하나의 보고서로 결합합니다.
필드 도구
- Chrome User Experience Report (CrUX): 수백만 사이트의 실제 사용자 지표에 대한 공개 데이터 세트입니다. PageSpeed Insights 또는 CrUX API를 통해 액세스할 수 있습니다.
- Google Search Console: 사이트의 Core Web Vitals 상태를 URL별로 그룹화하여 보여줍니다.
- web-vitals JavaScript 라이브러리: 사이트에 추가하여 실제 사용자 지표를 수집하고 분석 도구로 전송합니다.
디버깅에는 실험실 도구를 사용하고 수정 사항을 검증하려면 필드 데이터를 사용하세요. 흔한 실수는 실제 사용자 경험을 무시하고 실험실 점수만 최적화하는 것입니다.
LCP 개선
LCP는 종종 수정해야 할 가장 영향력 있는 지표입니다. 최적화 방법은 다음과 같습니다:
- 이미지 최적화: 품질 손실 없이 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하며,
srcset으로 반응형 이미지를 제공하세요. Image Compressor와 같은 도구가 파일 크기를 줄이는 데 도움이 될 수 있습니다. - 중요 리소스 사전 로드: 히어로 이미지, 글꼴, 주요 CSS/JS 파일에
<link rel="preload">를 사용하세요. - 렌더링 차단 리소스 제거: 중요 CSS를 인라인하고, 비중요 JavaScript를 지연시키며, 큰 CSS 파일을 피하세요.
- CDN 사용: 사용자와 가까운 엣지 위치에서 자산을 제공하여 지연 시간을 줄이세요.
- 자산 캐시: 파일 이름을 통한 캐시 무효화와 함께 정적 리소스에 긴 캐시 수명을 설정하세요.
- 서버 응답 시간 최적화: 빠른 호스팅을 사용하고, 압축(Brotli 또는 Gzip)을 활성화하며, 데이터베이스 쿼리를 최적화하세요.
자세한 예로, 히어로 이미지를 고려해 보세요. 2MB JPEG를 제공하는 대신 200KB 이하로 압축하고 WebP로 변환한 후 사전 로드하세요. 이것만으로도 LCP를 몇 초 단축할 수 있습니다.
INP 개선
INP는 반응성을 측정합니다. 높은 INP는 종종 메인 스레드를 차단하는 긴 JavaScript 작업에서 비롯됩니다.
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 메인 스레드에 양보하세요. - 이벤트 핸들러 최적화: 스크롤이나 크기 조정과 같은 빈번한 이벤트를 디바운스하거나 스로틀하세요. 핸들러에서 무거운 계산을 피하세요.
- JavaScript 실행 감소: 코드 분할, 트리 셰이킹, 비중요 JS 지연 로딩을 사용하세요.
- 웹 워커 사용: 비용이 많이 드는 작업을 워커 스레드로 오프로드하세요.
- 타사 스크립트 최소화: 불필요한 분석, 광고 또는 소셜 위젯을 감사하고 제거하세요.
Chrome DevTools Performance 패널에서 페이지와 상호 작용하여 INP를 테스트하세요. 긴 작업(빨간색 삼각형)을 찾아 최적화하세요.
CLS 개선
CLS는 시각적 안정성에 관한 것입니다. 예상치 못한 이동은 사용자를 짜증나게 하고 잘못된 클릭을 유발합니다.
- 이미지와 비디오의 크기 설정: 항상
width및height속성을 포함하거나 CSS aspect-ratio를 사용하세요. - 광고 및 임베드 공간 확보: 고정 크기의 자리 표시자를 사용하세요.
- 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 트리거 상호 작용은 예외입니다.
- font-display: swap 사용: 하지만 글꼴 교체가 이동을 유발할 수 있음을 인지하세요. 글꼴 사전 로드 또는
size-adjust사용을 고려하세요. - 애니메이션에 CSS 변환 적용: 레이아웃을 트리거하는 속성 대신 사용하세요.
Chrome DevTools의 Layout Shift Regions 기능을 사용하여 이동을 시각화하세요.
도구 및 워크플로
Core Web Vitals 모니터링을 개발 워크플로에 통합하세요:
- CI에서 Lighthouse를 실행하여 회귀를 포착하세요.
- web-vitals 라이브러리를 사용하여 필드 데이터를 수집하고 알림을 설정하세요.
- Search Console에서 정기적으로 문제를 확인하세요.
- 영향과 노력에 따라 수정 우선순위를 정하세요.
Core Web Vitals는 성능의 일부일 뿐임을 기억하세요. 항상 전체 사용자 경험을 고려하세요.
FAQ
Core Web Vitals의 현재 임계값은 무엇인가요?
좋음 임계값: LCP ≤ 2.5초, INP ≤ 200ms, CLS ≤ 0.1. 개선 필요: LCP ≤ 4초, INP ≤ 500ms, CLS ≤ 0.25. 나쁨: 해당 값 초과.
Core Web Vitals를 얼마나 자주 측정해야 하나요?
필드 데이터를 지속적으로 모니터링하고 중요한 변경 후에는 실험실 테스트를 실행하세요. 최소한 월별 및 배포 후에 확인하세요.
개발자 없이 Core Web Vitals를 개선할 수 있나요?
이미지 압축 및 캐싱과 같은 일부 수정은 플러그인이나 CDN 설정을 통해 수행할 수 있습니다. 그러나 더 깊은 최적화는 종종 코드 변경이 필요합니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질 손실 없이 파일 크기를 줄이려면 무료 Image Compressor를 사용해 보세요.