성능 측정 지표 Core Web Vitals (LCP, INP, CLS) 알아보기

1. LCP (Largest Contentful Paint)

👉 페이지에서 가장 큰 콘텐츠(예: 이미지, 텍스트 블록)가 화면에 렌더링되는 데 걸리는 시간

항목설명

의미	유저가 페이지 로딩이 끝났다고 느끼는 시점
대상 요소	큰 이미지, <h1>, <p> 등의 텍스트 블록
기준 (좋음)	2.5초 이하면 우수
개선 방법	이미지 최적화, 서버 응답 속도 개선, 폰트 로딩 최적화

💡 예시:
사용자가 사이트에 들어왔을 때, 화면 대부분을 차지하는 배너 이미지가 2.3초만에 나타나면 → LCP = 2.3s

2. INP (Interaction to Next Paint)

**👉 사용자가 버튼을 누르거나 입력을 했을 때, 화면에 반응이 렌더링되기까지 걸린 시간

항목설명

의미	반응성(Responsiveness) 측정
대상	클릭, 키보드 입력 등 모든 사용자 인터랙션
기준 (좋음)	200ms 이하면 빠름
개선 방법	JS 최적화, 이벤트 핸들러 경량화, 비동기 처리

💡 예시:
버튼 클릭 후 40ms 만에 새 UI가 뜨면 → INP = 40ms → 매우 빠름

3. CLS (Cumulative Layout Shift)

👉 페이지의 콘텐츠가 예고 없이 움직인 정도, 즉 ‘레이아웃 흔들림’을 측정

항목설명

의미	페이지 콘텐츠가 밀리거나 흔들리는 정도
원인	지연된 이미지 로딩, 광고 영역 삽입 등
기준 (좋음)	0.1 이하면 좋음
개선 방법	이미지 크기 고정, 폰트 로딩 최적화, 광고 자리 예약

💡 예시:
글 읽다가 갑자기 이미지가 로딩되며 아래 텍스트가 내려가면 → CLS ↑ (점수 나빠짐)

         지표        뜻                기준 (좋음)                      대표 문제

🟢 LCP	첫 인상 속도	2.5초 이하	느린 이미지, 서버 응답 지연
🟠 INP	반응성	200ms 이하	JS 블로킹, 무거운 이벤트 핸들러
🔵 CLS	안정성	0.1 이하	레이아웃 이동, 이미지 크기 미지정