Core Web Vitals: 웹 성능 측정 및 개선
빠른 웹사이트를 구축했는데도 사용자들이 여전히 느린 로딩이나 버벅거리는 상호작용을 불평할 수 있습니다. 검색 엔진도 Core Web Vitals이 좋지 않아 순위를 낮출 수 있습니다. 이 지표들—Largest Contentful Paint(LCP), First Input Delay(FID), Cumulative Layout Shift(CLS)—은 사용자 경험과 SEO에 직접적인 영향을 미칩니다. 이 가이드에서는 실용적인 단계로 이를 측정하고 개선하는 방법을 보여드립니다.
Core Web Vitals이란?
Core Web Vitals은 Google이 정의한 지표 집합으로 사용자 경험의 핵심 측면인 로딩, 상호작용, 시각적 안정성을 정량화합니다. 다음과 같습니다:
- Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 페이지 시작 후 2.5초 이내에 발생해야 합니다.
- First Input Delay (FID): 상호작용성을 측정합니다. 100밀리초 미만이어야 합니다.
- Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 0.1 미만이어야 합니다.
이 지표들은 Google의 Page Experience 신호의 일부이며 검색 순위에 영향을 줄 수 있습니다.
Core Web Vitals 측정 방법
Core Web Vitals은 랩(합성 테스트) 또는 필드(실제 사용자 모니터링)에서 측정할 수 있습니다. 둘 다 나름의 용도가 있습니다.
랩 도구
- Lighthouse: Chrome DevTools에 내장되어 성능을 감사하고 LCP, CLS, 총 차단 시간(TBT, FID의 대리 지표)에 대한 점수를 제공합니다.
- PageSpeed Insights: Chrome User Experience Report(CrUX)의 랩 및 필드 데이터를 결합합니다.
- WebPageTest: 사용자 지정 위치와 기기로 고급 테스트를 제공합니다.
필드 도구
- Chrome User Experience Report (CrUX): 수백만 사이트에 대한 집계된 실제 사용자 데이터를 제공합니다.
- web-vitals 라이브러리: 실제 사용자로부터 지표를 캡처하여 분석으로 전송하는 JavaScript 라이브러리입니다.
- Search Console: CrUX 데이터를 기반으로 사이트의 Core Web Vitals 상태를 보여줍니다.
디버깅에는 랩 도구로 시작하고, 실제 환경 성능을 보장하기 위해 필드 데이터로 검증하세요.
Largest Contentful Paint (LCP) 개선
LCP는 가장 큰 콘텐츠 요소(종종 히어로 이미지나 제목)가 표시되는 시점을 측정합니다. LCP를 개선하려면:
- 이미지 최적화: 이미지를 압축하고 WebP 또는 AVIF 같은 최신 형식을 사용하며
srcset으로 반응형 이미지를 제공하세요. - 중요 리소스 미리 로드: 주요 이미지, 글꼴, 스타일시트에
<link rel="preload">를 사용하세요. - 서버 응답 시간 단축: CDN을 사용하고 캐싱을 활성화하며 백엔드 성능을 최적화하세요.
- 렌더링 차단 리소스 제거: 중요 CSS를 인라인화하고 비중요 JavaScript를 지연시키며 큰 CSS 파일을 피하세요.
- 콘텐츠 전송 네트워크(CDN) 사용: 사용자와 더 가까운 위치에서 자산을 제공하세요.
이미지 최적화를 위해 품질 손실 없이 파일 크기를 줄이는 Image Compressor를 사용해 보세요.
First Input Delay (FID) 개선
FID는 사용자가 페이지와 처음 상호작용한 시점부터 브라우저가 응답할 수 있을 때까지의 시간을 측정합니다. FID를 개선하려면:
- JavaScript 실행 최소화: 긴 작업을 분할하고 코드 분할을 사용하며 비중요 스크립트를 지연시키세요.
- 서드파티 스크립트 최적화: 비동기로 로드하거나 중요 콘텐츠 이후로 지연시키세요.
- 웹 워커 사용: 무거운 계산을 워커 스레드로 오프로드하세요.
- 메인 스레드 작업 줄이기: 큰 동기 스크립트와 과도한 DOM 크기를 피하세요.
Lighthouse의 TBT 지표 같은 도구가 긴 작업을 식별하는 데 도움이 됩니다.
Cumulative Layout Shift (CLS) 개선
CLS는 페이지 로드 중 예기치 않은 레이아웃 이동을 측정합니다. CLS를 개선하려면:
- 이미지와 비디오에 항상 width와 height 속성 포함: 공간을 확보하여 이동을 방지합니다.
- 광고와 임베드에 공간 확보: CSS
aspect-ratio또는 고정 크기를 사용하세요. - 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 상호작용에 대한 응답은 예외입니다.
- 애니메이션에 CSS 변환 사용: 레이아웃을 유발하는 속성 대신 사용하세요.
- 글꼴 미리 로드:
font-display: swap을 사용하고 미리 로드하여 보이지 않는 텍스트 이동을 피하세요.
Core Web Vitals 임계값 비교
| 지표 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|
| LCP | ≤ 2.5초 | 2.5초 – 4.0초 | > 4.0초 |
| FID | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
실용적인 최적화 워크플로
Core Web Vitals을 개선하려면 이 단계별 접근 방식을 따르세요:
- 측정: Lighthouse를 실행하고 Search Console에서 필드 데이터를 확인하세요.
- 문제 식별: 가장 점수가 나쁜 지표에 집중하세요.
- 수정 적용: LCP, FID 또는 CLS에 위 팁을 사용하세요.
- 다시 테스트: 감사를 다시 실행하여 개선을 확인하세요.
- 모니터링: web-vitals 라이브러리를 사용하여 시간 경과에 따른 실제 사용자 지표를 추적하세요.
성능은 지속적인 과정임을 기억하세요. 기능을 추가할 때 정기적으로 사이트를 감사하세요.
FAQ
Core Web Vitals이란 무엇인가요?
Core Web Vitals은 로딩, 상호작용성, 시각적 안정성을 측정하는 세 가지 지표—LCP, FID, CLS—입니다. Google이 순위 신호로 사용합니다.
Core Web Vitals을 얼마나 자주 확인해야 하나요?
주요 변경 후와 최소 월 1회 확인하세요. 랩과 필드 데이터를 모두 사용하여 회귀를 잡으세요.
개발자 없이 Core Web Vitals을 개선할 수 있나요?
이미지 압축과 이미지에 크기 추가 같은 일부 수정은 콘텐츠 편집자가 할 수 있습니다. 다른 것들은 개발자 도움이 필요할 수 있습니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 무료 Image Compressor를 사용하여 파일 크기를 줄이고 사이트 속도를 높이세요.