웹 바이탈

Core Web Vitals (LCP/INP/CLS/FCP/TTFB) 임계값 및 개선 팁

LCP

Largest Contentful Paint

가장 큰 가시 콘텐츠 요소 (이미지·비디오·큰 텍스트 블록) 가 렌더링될 때까지의 시간.

임계값

Good: ≤ 2.5 seconds

Needs improvement: ≤ 4 seconds

Poor: > 4 seconds

개선 방법

히어로 이미지 최적화 (모던 포맷·적절한 크기·preload)
서버 응답 시간 단축 (CDN·edge caching)
render-blocking JS/CSS 제거
중요한 폰트 preload, above-the-fold 텍스트는 시스템 폰트 우선

INP

Interaction to Next Paint

interactivity

페이지 세션 중 관측된 가장 느린 수준의 인터랙션 지연 (2024년부터 FID 대체).

임계값

Good: ≤ 200 ms

Needs improvement: ≤ 500 ms

Poor: > 500 ms

개선 방법

긴 작업 (>50ms) 분할 — 메인 스레드에 yield
비핵심 JS 지연 로드 (입력 핸들러 > 렌더링 우선)
이벤트 핸들러에서 무거운 작업 회피
JS 애니메이션 대신 CSS transitions 사용

CLS

Cumulative Layout Shift

stability

페이지 수명 동안 발생한 모든 예기치 않은 레이아웃 이동의 합 (단위 없는 점수).

임계값

Good: ≤ 0.1 score

Needs improvement: ≤ 0.25 score

Poor: > 0.25 score

개선 방법

이미지·광고에 항상 명시적인 width/height 지정
임베드가 로드되기 전 공간 확보
기존 콘텐츠 위에 새 콘텐츠 삽입 회피 (배너·쿠키 프롬프트)
애니메이션은 layout 영향 속성 대신 transform: translate() 사용

FCP

First Contentful Paint

첫 텍스트 또는 이미지 (어떤 DOM 콘텐츠든) 가 렌더링될 때까지의 시간.

임계값

Good: ≤ 1.8 seconds

Needs improvement: ≤ 3 seconds

Poor: > 3 seconds

개선 방법

서버 응답 시간 단축
render-blocking 리소스 제거
critical CSS 인라인

TTFB

Time to First Byte

요청부터 응답 첫 바이트까지의 시간 (서버 + 네트워크).

임계값

Good: ≤ 800 ms

Needs improvement: ≤ 1800 ms

Poor: > 1800 ms

개선 방법

CDN + edge caching
백엔드 최적화 (DB 쿼리·N+1 등)
HTTP/2 또는 HTTP/3 사용
리다이렉트 체인 단축

사용 방법

각 Core Web Vital 카드를 읽으세요: LCP, INP, CLS, FCP, TTFB.
각 지표에 대해 색상 코드된 배지로 표시된 좋음 / 개선 필요 / 좋지 않음 임계값을 확인하세요.
각 지표 아래의 글머리 기호 개선 팁을 검토하여 실행 가능한 수정 사항을 파악하세요.

예제

LCP는 좋음 ≤ 2500ms, 개선 필요 ≤ 4000ms, 좋지 않음 > 4000ms를 표시합니다 — 개선 팁에는 영웅 이미지 최적화 및 렌더링 차단 리소스 제거가 포함됩니다.
CLS는 좋음 ≤ 0.1, 좋지 않음 > 0.25를 표시합니다 — 팁에는 광고와 지연 로드 이미지 공간을 예약하여 레이아웃 시프트를 방지하는 것이 포함됩니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.