Core Web Vitals는 웹 페이지의 사용자 경험을 측정하기 위한 핵심 성능 지표입니다. LCP는 Largest Contentful Paint로, 주요 콘텐츠가 얼마나 빨리 화면에 보이는지 봅니다. INP는 Interaction to Next Paint로, 사용자의 입력에 페이지가 얼마나 빠르게 반응하는지 봅니다.
CLS는 Cumulative Layout Shift로, 로딩 중 레이아웃이 얼마나 흔들리는지 측정합니다. 이 지표들은 단순히 JS bundle 크기만 보는 것이 아니라 실제 사용자가 “빨리 보이는지, 잘 반응하는지, 화면이 안정적인지”를 보는 데 가깝습니다.
꼬리질문
조금 더 깊게 물어본다면
답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.
LCP를 개선하려면 무엇을 볼 수 있나요?
주요 콘텐츠가 무엇인지 먼저 확인해야 합니다. hero image, 큰 text block, server response time, CSS/JS blocking, image preload와 size 최적화가 후보가 됩니다.
무작정 bundle만 줄이기보다 실제 LCP element를 확인하는 것이 좋습니다.
INP는 예전 FID와 어떻게 다른가요?
FID는 첫 입력 지연에 초점을 뒀고, INP는 페이지 생명주기 동안 발생한 상호작용의 응답성을 더 넓게 봅니다. 사용자 경험을 더 잘 반영하려는 지표입니다.
무거운 event handler와 긴 main thread task가 주요 원인이 될 수 있습니다.
CLS는 왜 사용자 경험에 안 좋은가요?
사용자가 읽거나 클릭하려는 순간 화면이 밀리면 불편하고 오작동을 유발할 수 있습니다. 특히 버튼 위치가 바뀌면 잘못 클릭할 수 있습니다.
이미지 width/height 지정이나 skeleton 영역 확보가 도움이 됩니다.
lab data와 field data는 어떻게 다른가요?
lab data는 통제된 환경에서 측정한 데이터이고, field data는 실제 사용자 환경에서 수집한 데이터입니다. lab은 디버깅에 좋고, field는 실제 경험을 반영합니다.
둘을 함께 봐야 원인 분석과 실제 효과 확인이 가능합니다.
부가 설명
이미지가 늦게 로드되어 hero 영역이 늦게 보이면 LCP가 나빠질 수 있습니다. 클릭 handler가 무거운 계산으로 main thread를 오래 막으면 INP가 나빠질 수 있습니다. 이미지 크기를 지정하지 않아 로딩 후 내용이 밀리면 CLS가 나빠질 수 있습니다.
성능 개선은 지표별 원인을 다르게 봐야 합니다. LCP는 server response, render blocking resource, image 최적화가 중요할 수 있습니다. INP는 긴 task 줄이기, event handler 최적화, hydration 비용 분산과 연결될 수 있습니다. CLS는 media dimension 지정, font loading, 광고 영역 reserve가 중요할 수 있습니다.
한 줄 정리
Core Web Vitals는 사용자가 느끼는 로딩, 반응성, 화면 안정성을 LCP, INP, CLS로 보는 성능 지표입니다.