TUTORIAL

Core Web Vitals 최적화

구글 핵심 성능 지표 개선 가이드. LCP, INP, CLS 최적화로 SEO 순위와 사용자 경험을 향상시킵니다.

럿지 AI 팀
2025-01-11
15분
Core Web Vitals

구글이 정의한 핵심 사용자 경험 지표로
SEO 순위에 직접적인 영향을 미칩니다.

LCP

Largest Contentful Paint

≤ 2.5s

INP

Interaction to Next Paint

≤ 200ms

CLS

Cumulative Layout Shift

≤ 0.1

LCP 최적화

원인

  • - 느린 서버 응답 시간
  • - 렌더링 차단 리소스
  • - 느린 리소스 로드
  • - 클라이언트 사이드 렌더링

해결책

  • - 이미지 최적화 (next/image)
  • - CDN 사용
  • - 중요 CSS 인라인
  • - SSR/SSG 적용

INP 최적화 (FID 대체)

2024년 3월부터 FID는 INP로 대체되었습니다. 모든 상호작용의 응답성을 측정합니다.

메인 스레드 차단 최소화

Web Worker, requestIdleCallback 활용

이벤트 핸들러 최적화

디바운싱, 스로틀링 적용

JavaScript 분할

코드 스플리팅으로 청크 분리

장기 작업 분할

scheduler.yield() 또는 setTimeout

CLS 최적화

레이아웃 시프트 원인

  • - 크기 없는 이미지/비디오
  • - 동적 콘텐츠 삽입
  • - 웹폰트 FOIT/FOUT
  • - 광고, 임베드 위젯

해결 방법

  • - width/height 또는 aspect-ratio
  • - 스켈레톤 UI 사용
  • - font-display: optional
  • - 콘텐츠 공간 미리 확보

성능 측정 도구

1
Lighthouse

Chrome DevTools 내장

2
PageSpeed Insights

실제 사용자 데이터

3
WebPageTest

상세 워터폴 분석

4
web-vitals 라이브러리

실시간 RUM 수집

최적화 후 기대 효과

+%

전환율

-%

이탈률

+%

SEO 순위

+%

페이지뷰

관련 태그

#Core Web Vitals
#Performance
#SEO
#LCP
#CLS