Google이 2021년 6월부터 Core Web Vitals를 페이지 경험 랭킹 신호로 추가했다. LCP, FID, CLS 세 지표의 목표 수치와 각 지표를 개선하기 위한 실전 최적화 전략을 상세히 다룬다.
핵심 포인트- LCP(Largest Contentful Paint): 뷰포트 내 최대 요소 표시 시간, 목표 2.5초 이하
- FID(First Input Delay): 사용자 클릭 → 이벤트 핸들러 실행 지연, 목표 100ms 이하
- CLS(Cumulative Layout Shift): 예기치 않은 레이아웃 이동 누적, 목표 0.1 미만
- 이미지 최적화 5가지(width/height 명시, lazy loading, WebP/AVIF, srcset, blur-up)와 폰트 최적화 5가지(variable font, Preconnect, 자체 호스팅, font-display: optional, 폴백 설정)가 핵심 전략
- Google Lighthouse와 Vercel Analytics Real Experience Score로 실제 사용자 기준 측정
상세 정리- LCP 기술 정의: 뷰포트 내 가장 큰 요소(텍스트 블록, 비디오, 이미지)가 표시되는 시간을 측정한다. 인지된 로딩 속도를 나타내며 목표는 2.5초 이하다.
- FID 기술 정의: 사용자 입력(클릭/탭) → 브라우저가 이벤트 핸들러를 실행하기까지의 지연이다. 메인 스레드가 다른 작업 중일 때 발생하며 목표는 100ms 이하다.
- CLS 기술 정의: DOM 초기 렌더링 이후 요소가 이동할 때 계산한다. 예기치 않은 레이아웃 변화로 사용자 오류와 혼란을 야기하며 목표는 0.1 미만이다.
- Pre-rendering 전략: 서버에서 미리 HTML을 생성해 초기 요청에 마크업을 포함시킨다. Google이 JavaScript를 크롤링할 수 있지만 SSR/SSG 사용을 권장한다.
- 이미지 최적화 5가지: img 요소에 height/width 속성 추가(CLS 방지), 뷰포트 진입 시 lazy loading, WebP/AVIF 현대 포맷 사용, srcset으로 적절한 크기 제공, blur-up 플레이스홀더.
- 폰트 최적화 5가지: 변수 폰트(단일 파일로 모든 스타일 포함), 폰트 파일로 Preconnect, Google Fonts 대신 자체 호스팅, font-display: optional(CLS 방지), 폴백 폰트 설정.
- 측정 도구: Google Lighthouse가 성능/접근성/SEO/PWA 5개 영역을 감시한다. Vercel Analytics는 실제 사용자 기반 Real Experience Score로 Core Web Vitals 전반 상태를 측정한다.
- 랭킹 영향: Core Web Vitals는 기존 로딩 속도, 안전 브라우징, HTTPS, 모바일 친화성에 추가되는 랭킹 신호로, 경쟁사 대비 사이트 순위에 직접 영향을 미친다.
왜 읽나Core Web Vitals 지표의 기술적 정의, 목표 수치, 실전 최적화 전략을 한 번에 파악하고 싶은 프런트엔드/SEO 담당자에게 유용하다.
Vercel Blog·
LINE Engineering·