테마
Core Web Vitals
구글이 정의한 웹 사용자 경험의 핵심 측정 지표 3가지(LCP, FID/INP, CLS)의 개념, 권장 기준값, 측정 방법, 그리고 검색 순위에 미치는 영향을 학습한다.
학습 목표
- 웹 바이탈(Web Vitals) 이니셔티브의 배경과 코어 웹 바이탈의 관계를 이해한다
- LCP, FID, INP, CLS 각 지표의 의미와 측정 대상을 정확히 설명할 수 있다
- 각 지표의 Good / Needs Improvement / Poor 기준값을 알 수 있다
- Core Web Vitals가 구글 검색 순위에 미치는 영향을 이해한다
- PageSpeed Insights를 활용하여 실제 사이트의 Core Web Vitals를 확인할 수 있다
1. 웹 바이탈과 코어 웹 바이탈
1.1 웹 바이탈(Web Vitals) 이니셔티브
웹 바이탈은 구글이 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 관한 통합 지침을 제공하기 위해 시작한 이니셔티브다. 구글은 수년간 다양한 성능 측정 도구를 제공해 왔지만, 도구와 지표의 종류가 너무 많아 "어떤 것이 진짜 중요한가?"를 판단하기 어려웠다.
1.2 코어 웹 바이탈의 정의
코어 웹 바이탈은 웹 바이탈의 하위 집합으로, 모든 웹페이지에 적용되는 가장 중요한 측정 항목 3가지로 구성된다. 이 항목은 시간이 지남에 따라 발전하며, 2024년 3월에 FID가 INP로 교체되었다.
현재 코어 웹 바이탈 구성:
| 지표 | 측정 대상 | 교체 이력 |
|---|---|---|
| LCP (Largest Contentful Paint) | 로딩 성능 | 최초 지표 (유지) |
| INP (Interaction to Next Paint) | 상호작용 반응성 | 2024.03에 FID 대체 |
| CLS (Cumulative Layout Shift) | 시각적 안정성 | 최초 지표 (유지) |
2. LCP (Largest Contentful Paint)
2.1 정의
LCP는 페이지 로딩 중 뷰포트 내에서 가장 큰 콘텐츠 요소가 화면에 렌더링되는 시점까지의 시간을 측정한다. 사용자가 "이 페이지의 핵심 내용이 보인다"고 인식하는 시점과 가장 가깝다.
2.2 LCP 대상 요소
<img>요소<video>요소의 포스터 이미지- CSS
background-image로 로드된 이미지 - 텍스트 노드를 포함하는 블록 레벨 요소 (큰 텍스트 블록)
<svg>내부의<image>요소
2.3 권장 기준값
| 등급 | 시간 | 의미 |
|---|---|---|
| Good | 2.5초 이하 | 우수한 로딩 성능 |
| Needs Improvement | 2.5초 ~ 4.0초 | 개선 필요 |
| Poor | 4.0초 초과 | 심각한 성능 문제 |
2.4 LCP 개선 방법
- 서버 응답 시간 단축 (TTFB 최적화)
- 렌더링 차단 리소스 제거 (불필요한 CSS/JS 지연 로딩)
- 핵심 이미지에
fetchpriority="high"적용 - 이미지에 width/height 명시하여 브라우저가 공간을 미리 확보
- CDN 활용으로 리소스 전송 속도 향상
3. FID (First Input Delay)와 INP (Interaction to Next Paint)
3.1 FID (First Input Delay) - 2024.03 이전
FID는 사용자가 페이지에서 최초로 클릭, 탭, 키보드 입력 등의 상호작용을 했을 때, 브라우저가 그 이벤트 핸들러 처리를 시작하기까지의 지연 시간을 측정한다.
| 등급 | 시간 | 의미 |
|---|---|---|
| Good | 100ms 이하 | 즉각적인 응답 |
| Needs Improvement | 100ms ~ 300ms | 지연 감지됨 |
| Poor | 300ms 초과 | 뚜렷한 지연 |
FID의 한계는 최초 입력만 측정한다는 점이다. 페이지 사용 중 발생하는 후속 상호작용의 지연은 포착하지 못한다.
3.2 INP (Interaction to Next Paint) - 2024.03 이후
INP는 FID의 한계를 극복하기 위해 도입된 지표로, 페이지 방문 전체 기간에 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰한다. 최종 INP 값은 관찰된 가장 긴 상호작용 지연(이상점 제외)이다.
| 등급 | 시간 | 의미 |
|---|---|---|
| Good | 200ms 이하 | 원활한 반응성 |
| Needs Improvement | 200ms ~ 500ms | 개선 필요 |
| Poor | 500ms 초과 | 사용성에 문제 |
3.3 FID vs INP 비교
| 비교 항목 | FID | INP |
|---|---|---|
| 측정 범위 | 최초 입력 1회 | 전체 세션의 모든 입력 |
| 측정 시점 | 입력 ~ 이벤트 핸들러 시작 | 입력 ~ 다음 화면 업데이트 |
| 대표값 | 최초 상호작용 지연 | 가장 긴 상호작용 지연 |
| Core Web Vitals | 2024.03까지 | 2024.03부터 |
3.4 INP 개선 방법
- 긴 작업(Long Tasks)을 분할하여 메인 스레드 차단 최소화
requestIdleCallback또는scheduler.yield()로 작업 양보- 불필요한 자바스크립트 실행 제거
- 이벤트 핸들러 내 무거운 연산을 Web Worker로 이전
4. CLS (Cumulative Layout Shift)
4.1 정의
CLS는 페이지 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동의 누적 점수를 측정한다. 사용자가 의도하지 않은 상태에서 요소가 갑자기 움직이는 경험은 사용성을 크게 해친다.
4.2 CLS 계산 방식
레이아웃 이동 점수 = 영향 비율(Impact Fraction) x 거리 비율(Distance Fraction)- 영향 비율: 이동 전후 불안정 요소가 차지하는 뷰포트 영역의 비율
- 거리 비율: 불안정 요소가 이동한 최대 거리를 뷰포트 크기로 나눈 비율
4.3 권장 기준값
| 등급 | 점수 | 의미 |
|---|---|---|
| Good | 0.1 이하 | 시각적으로 안정 |
| Needs Improvement | 0.1 ~ 0.25 | 개선 필요 |
| Poor | 0.25 초과 | 불안정한 레이아웃 |
4.4 CLS를 유발하는 주요 원인
- 크기가 지정되지 않은 이미지 / 비디오
- 동적으로 삽입되는 광고 또는 배너
- 웹폰트 로드 후 텍스트 크기 변경 (FOUT/FOIT)
- 동적으로 삽입되는 DOM 요소
- 마이크로프론트엔드에서 비동기 로딩된 컨테이너
4.5 CLS 개선 방법
- 이미지와 비디오에 width/height 또는 aspect-ratio 명시
- 광고 슬롯에 최소 크기 예약
font-display: swap사용 시 fallback 폰트와 크기 매칭- 기존 콘텐츠 위에 동적 콘텐츠를 삽입하지 않음
- CSS
contain속성으로 레이아웃 영향 범위 제한
5. 보조 지표
Core Web Vitals 외에도 성능 진단 시 함께 확인하면 유용한 보조 지표들이 있다.
5.1 FCP (First Contentful Paint)
사용자가 페이지로 이동한 시점부터 콘텐츠 일부(텍스트, 이미지, SVG 등)가 처음 화면에 렌더링된 시점까지의 시간이다. 1.8초 이하가 권장된다.
5.2 TTFB (Time to First Byte)
리소스 요청 시점부터 응답의 첫 번째 바이트가 도착하기까지의 시간이다. 서버 성능, 네트워크 지연, CDN 설정 등의 영향을 받는다. 0.8초 이하가 권장된다.
TTFB는 LCP와 FCP 같은 사용자 중심 지표보다 선행하는 지표이므로, TTFB가 느리면 후속 모든 지표에 연쇄적으로 영향을 미친다.
6. Google 검색 순위에 미치는 영향
구글은 2021년 6월부터 Page Experience 업데이트를 통해 Core Web Vitals를 공식 검색 순위 결정 요소로 반영하고 있다.
- Core Web Vitals 3가지 지표가 모두 "Good" 등급이면 Page Experience 신호에서 유리하다
- 단, 콘텐츠 관련성이 여전히 가장 중요한 순위 결정 요소이며, Core Web Vitals는 동일 관련성에서의 차별화 요소로 작용한다
- Google Search Console에서 사이트의 Core Web Vitals 상태를 모니터링할 수 있다
- Chrome User Experience Report(CrUX)에 수집된 실제 사용자 데이터를 기반으로 평가한다
핵심 정리
- 코어 웹 바이탈은 3가지 지표로 구성된다: LCP(로딩), INP(반응성), CLS(시각적 안정성)이 현재 표준이다
- 각 지표에 명확한 기준값이 있다: LCP 2.5초, INP 200ms, CLS 0.1 이하가 Good 등급의 기준이다
- FID는 INP로 대체되었다: 2024년 3월부터 INP가 코어 웹 바이탈의 반응성 지표로 공식 채택되었다
- 검색 순위에 직접 영향을 미친다: 구글은 Core Web Vitals를 Page Experience의 핵심 신호로 사용한다
- 보조 지표도 함께 확인해야 한다: FCP, TTFB 등은 Core Web Vitals의 원인을 진단하는 데 필수적이다
다음 단계
- 다음: Lighthouse 활용 - 자동화된 웹 성능 평가 도구인 Lighthouse의 사용법과 보고서 해석 방법을 학습한다