Core Web Vitals: 웹 성능 측정 및 개선
최신 웹 앱을 구축했지만 사용자들이 느리다고 불평합니다. 검색 순위가 떨어지고 있는데 이유를 모르겠다면, 범인은 낮은 Core Web Vitals일 수 있습니다. 이 가이드에서는 Core Web Vitals이 무엇인지, 어떻게 측정하는지, 그리고 가장 중요한 개선 방법을 실행 가능한 단계와 함께 알아봅니다.
Core Web Vitals이란?
Core Web Vitals은 Google이 웹페이지의 사용자 경험을 평가하기 위해 사용하는 특정 지표 집합입니다. 로딩, 상호작용, 시각적 안정성에 초점을 맞춥니다:
- 최대 콘텐츠풀 페인트(LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(예: 히어로 이미지, 제목)가 표시되는 데 걸리는 시간입니다. 좋음: ≤ 2.5초.
- 최초 입력 지연(FID): 상호작용을 측정합니다. 사용자가 처음 상호작용(예: 버튼 클릭)한 시점부터 브라우저가 응답할 때까지의 시간입니다. 좋음: ≤ 100밀리초.
- 누적 레이아웃 이동(CLS): 시각적 안정성을 측정합니다. 로딩 중 예상치 못한 레이아웃 이동을 수치화합니다. 좋음: ≤ 0.1.
이 지표들은 Google의 페이지 경험 신호의 일부이며 검색 순위에 영향을 미칠 수 있습니다. 하지만 더 중요하게는 실제 사용자 만족도를 반영합니다.
Core Web Vitals 측정 방법
완전한 그림을 얻으려면 실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터(합성)는 문제 디버깅에 도움이 되고, 필드 데이터(실제 사용자 모니터링)는 실제 성능을 보여줍니다.
실험실 도구
- Lighthouse: Chrome DevTools에 내장되어 있습니다. 감사를 실행하여 점수와 개선 기회를 확인하세요.
- PageSpeed Insights: URL에 대한 실험실 및 필드 데이터를 결합합니다.
- WebPageTest: 사용자 지정 위치와 기기를 사용한 고급 테스트.
필드 도구
- Chrome 사용자 경험 보고서(CrUX): 실제 사용자 지표의 공개 데이터 세트입니다. PageSpeed Insights 또는 BigQuery를 통해 액세스하세요.
- web-vitals JavaScript 라이브러리: 사이트에 추가하여 실제 사용자 지표를 수집하고 분석 도구로 전송하세요.
- Search Console: Core Web Vitals 보고서는 CrUX 데이터를 기반으로 그룹 성능을 보여줍니다.
web-vitals 라이브러리를 사용하여 지표를 기록하는 방법은 다음과 같습니다:
import {getLCP, getFID, getCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);
LCP 개선
LCP는 종종 가장 어려운 지표입니다. 다음 영역에 집중하세요:
- 이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하며,
srcset으로 반응형 이미지를 제공하세요. 화면 밖 이미지는 지연 로드하세요. - 중요 리소스 사전 로드: 히어로 이미지, 폰트, 주요 CSS에
<link rel="preload">를 사용하세요. - 서버 응답 시간 단축: CDN을 사용하고, 캐싱을 활성화하며, 백엔드 코드를 최적화하세요.
- 렌더링 차단 리소스 제거: 중요 CSS를 인라인하고, 비중요 JS를 지연시키며, 큰 CSS 파일을 피하세요.
- CDN 사용: 사용자와 더 가까운 엣지 위치에서 자산을 제공하세요.
FID 개선
FID는 반응성에 관한 것입니다. 긴 작업이 메인 스레드를 차단하여 상호작용을 지연시킵니다.
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 메인 스레드에 양보하세요. - JavaScript 최적화: 코드 분할, 트리 셰이킹, 비중요 스크립트 지연을 적용하세요.
- 웹 워커 사용: 무거운 계산을 메인 스레드에서 분리하세요.
- 서드파티 영향 감소: 서드파티 스크립트를 감사하고 제한하세요.
CLS 개선
CLS는 로딩 중 요소가 이동하여 발생합니다. 다음과 같이 방지하세요:
- 이미지와 비디오에 항상 width 및 height 속성을 포함하세요. 이렇게 하면 공간이 확보됩니다.
- 광고 및 임베드에 공간을 확보하세요: CSS
aspect-ratio또는 고정 컨테이너를 사용하세요. - 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요: 사용자 상호작용에 대한 응답은 예외입니다.
- 애니메이션에 CSS 변환을 사용하세요: 레이아웃을 트리거하는 속성 대신 사용하세요.
- 폰트 사전 로드:
font-display: swap을 사용하여 보이지 않는 텍스트와 레이아웃 이동을 피하세요.
Core Web Vitals 지표 비교
| 지표 | 측정 대상 | 좋은 임계값 | 주요 최적화 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 이미지 최적화, 사전 로드, CDN |
| FID | 상호작용 | ≤ 100밀리초 | JS 감소, 긴 작업 분할 |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 설정, 공간 확보 |
Core Web Vitals 개선을 위한 실용적인 워크플로
다음 단계별 프로세스를 따르세요:
- 측정: PageSpeed Insights를 사용하여 실험실 및 필드 데이터의 기준을 얻으세요.
- 문제 식별: Lighthouse의 개선 기회와 진단을 확인하세요.
- 우선순위 지정: 가장 나쁜 점수의 지표부터 먼저 해결하세요.
- 수정 구현: 위에 나열된 최적화를 적용하세요.
- 테스트: Lighthouse를 다시 실행하고 배포 후 필드 데이터를 확인하세요.
- 모니터링: web-vitals 라이브러리로 실제 사용자 모니터링을 설정하고 시간 경과에 따라 추적하세요.
FAQ
Core Web Vitals의 현재 임계값은 무엇인가요?
LCP의 경우 좋음은 ≤ 2.5초, 개선 필요는 ≤ 4초, 나쁨은 > 4초입니다. FID의 경우 좋음은 ≤ 100밀리초, 개선 필요는 ≤ 300밀리초, 나쁨은 > 300밀리초입니다. CLS의 경우 좋음은 ≤ 0.1, 개선 필요는 ≤ 0.25, 나쁨은 > 0.25입니다.
Core Web Vitals을 얼마나 자주 측정해야 하나요?
필드 데이터를 지속적으로 모니터링하고 중요한 변경 후에는 실험실 테스트를 실행하세요. Google은 CrUX 데이터를 매월 업데이트하므로 Search Console을 정기적으로 확인하세요.
개발자 없이 Core Web Vitals을 개선할 수 있나요?
이미지 압축과 같은 일부 수정은 도구로 가능하지만, 많은 경우 코드 변경이 필요합니다. WordPress와 같은 CMS를 사용하는 경우 성능 최적화 플러그인 사용을 고려하세요.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 이미지 압축기를 사용하여 품질 손실 없이 파일 크기를 줄여보세요.