Core Web Vitals는 웹 페이지의 로딩 경험, 상호작용 응답성, 시각적 안정성을 평가하는 지표입니다. 2024년 3월 12일부터 FID 대신 INP가 포함되어, 이 글의 날짜 기준으로 LCP, INP, CLS를 사용합니다.
주요 지표
| 지표 | 측정하는 경험 | 좋음 기준 |
|---|---|---|
| LCP | 가장 큰 주요 콘텐츠가 표시되는 시점 | 2.5초 이하 |
| INP | 사용자 상호작용에 대한 다음 화면 반응까지의 지연 | 200ms 이하 |
| CLS | 예상하지 못한 레이아웃 이동의 누적 점수 | 0.1 이하 |
평가는 실제 방문 데이터의 75번째 백분위수를 기준으로 하며, 모바일과 데스크톱을 구분해 확인합니다. 한 번 실행한 측정값만으로 모든 사용자의 경험을 대표할 수는 없습니다.
LCP 개선
주요 이미지나 텍스트가 늦게 나타나는 원인을 찾습니다. 서버 응답이 느린지, 이미지 요청이 늦게 발견되는지, 파일이 큰지, 렌더링이 막히는지 나누어 살펴봅니다.
- 이미지의 크기와 포맷을 최적화합니다.
- 첫 화면의 핵심 이미지에는 무조건 지연 로딩을 적용하지 않습니다.
- 캐시와 CDN, 서버 응답 시간을 점검합니다.
- 렌더링을 막는 불필요한 CSS·JavaScript를 줄입니다.
INP 개선
INP는 클릭, 탭, 키보드 입력 같은 상호작용부터 다음 화면이 표시되기까지의 응답성을 평가합니다. 첫 입력의 대기 시간만 측정하던 FID보다 상호작용 처리와 표시 지연을 넓게 다룹니다.
긴 JavaScript 작업을 나누고, 이벤트 처리에서 불필요한 계산과 DOM 작업을 줄입니다. 큰 계산을 메인 스레드 밖에서 수행할 수 있는지도 검토합니다. async 함수로 바꾸는 것만으로 CPU 작업이 다른 스레드로 이동하지는 않습니다.
CLS 개선
이미지와 동영상에 크기나 종횡비를 지정하고, 광고나 비동기 콘텐츠가 들어올 공간을 미리 확보합니다. 사용자가 읽는 내용 위에 갑자기 요소를 끼워 넣는 동작도 피합니다.
웹 폰트 적용으로 글자 크기와 줄바꿈이 크게 바뀌는지 확인합니다. CLS는 단순히 모든 움직임의 합이 아니라, 예기치 않은 레이아웃 이동을 정해진 규칙으로 계산하는 점수입니다.
측정 도구를 구분하기
PageSpeed Insights의 실제 사용자 데이터와 Lighthouse의 실험실 진단은 용도가 다릅니다. 실제 데이터로 문제 페이지를 찾고, DevTools로 원인을 재현한 뒤 수정 전후를 비교합니다.
일반적인 Lighthouse 탐색 보고서에서는 실제 INP를 직접 측정하지 않습니다. TBT 같은 진단 지표와 상호작용 기록을 활용하되, 실제 사용자의 INP로 개선 효과를 다시 확인해야 합니다.
참고