무료 도구
Core Web Vitals 설명
쉬운 말로 설명하는 Core Web Vitals: LCP, INP, CLS가 측정하는 것, 좋음과 나쁨의 기준, 느리거나 반응이 없거나 흔들리는 페이지의 일반적인 해결 방법.
로딩
LCP
Largest Contentful Paint
화면에서 가장 큰 요소 (보통 히어로 이미지나 헤드라인)가 렌더링될 때까지 걸리는 시간입니다.
좋음
≤ 2.5초 개선 필요
2.5초에서 4초 나쁨
> 4초
≤ 2.5초 개선 필요
2.5초에서 4초 나쁨
> 4초
반응성
INP
Interaction to Next Paint
방문 전체에서 탭, 클릭, 키 입력에 페이지가 눈에 띄게 반응하는 속도입니다.
좋음
≤ 200 ms 개선 필요
200에서 500 ms 나쁨
> 500 ms
≤ 200 ms 개선 필요
200에서 500 ms 나쁨
> 500 ms
시각적 안정성
CLS
Cumulative Layout Shift
페이지를 사용하는 동안 콘텐츠가 예기치 않게 얼마나 움직이는지입니다.
좋음
≤ 0.1 개선 필요
0.1에서 0.25 나쁨
> 0.25
≤ 0.1 개선 필요
0.1에서 0.25 나쁨
> 0.25
점수를 판단하는 방법
각 지표는 실제 페이지 로드의 75번째 백분위수로 판단합니다. 방문의 75% 이상이 좋은 경험을 하면 페이지가 통과합니다. 빠른 개발 환경의 랩 도구는 방문자가 보는 것보다 좋게 나오는 경우가 많으므로 실제 사용자를 측정하세요.
일반적인 해결 방법
- LCP: 히어로 이미지를 알맞은 크기의 최신 형식으로 제공하고, 미리 불러오고, 지연 로딩을 피하고, 캐싱으로 서버 응답 시간 (TTFB)을 줄이세요.
- INP: 긴 JavaScript 작업을 나누고, 서드파티 스크립트를 지연시키고, 입력 핸들러에서 무거운 작업을 피하세요.
- CLS: 이미지, 임베드, 광고에 고정 크기를 지정하고, 배너 공간을 확보하고, 대체 글꼴을 맞춘
font-display를 사용하세요.
함께 살펴볼 지표
FCP (First Contentful Paint)는 무언가 처음 나타나는 시점을, TTFB (Time to First Byte)는 서버가 얼마나 빨리 응답하는지를 보여 줍니다. 둘 다 느린 LCP의 원인을 설명하는 데 도움이 됩니다.
실제 방문자를 측정하세요
Privatus Analytics는 다섯 가지 지표를 모두 실제 방문에서 샘플링해 쿠키 없이 트래픽 옆에 측정합니다. 성능 모니터링 보기.