Core web vitals 란?
구글이 2021년 부터 사용자 경험 (UX) 를 측정하기 위해 도입한 웹 성능 평가 지표 입니다. 페이지 속도, 안정성, 반응성 등 실제 사용자의 체감 경험 기반으로 평가합니다. 실제 구글의 검색 순위에도 반영하므로 중요합니다.
Core web vital 의 구성 3가지
LCP (Largest Contentful Paint, 최대 콘텐츠 표시 시간)
- 페이지에서 가장 큰 요소 (대표 이미지, 주요 텍스트 블록 등)가 화면에 보이는 시간
- 기준 : 2.5초 이내
- 개선 방법
- 이미지 용량 최적화 (WebP, AVIF)
- CDN 사용
- 서버 응답속도 개선 (캐시 플러그인, 호스팅 업그레이드)
- 불필요한 CSS/JS 줄이기
INP (Interaction to Next Paint)
- 페이지 사용 중 전반적인 반응성을 평가
- 기준 : 200ms 이내
- 개선 방법
- 무거운 자바스크립트 줄이기
- 불필요한 플러그인 제거
- Lazy loading 적용
- 메인 스레드 블로킹 최소화
2024년 3월 이전에는 FID (First Input Delay) 였음 : 사용자가 처음 클릭/탭했을 때 반응이 오는 시간
CLS (Cumulative Layout Shift, 누적 레이아웃 이동)
- 페이지 로딩 중 이미지/광고/폰트 때문에 화면 요소가 갑자기 밀리거나 흔들리는 정도
- 기준 : 0.1 이하
- 개선 방법
- 이미지, 광고, 동영상에 width/height 고정 값 지정
- 웹폰트 로딩 최적화 (FOIT/FOUT 방지)
- CSS 애니메이션 과도하게 사용하지 않기
Core web vital 을 확인할 수 있는 사이트 (무료, 광고 없음, 회원가입 없음)
PageSpeed Insights (구글 툴) : https://pagespeed.web.dev/
