Core Web Vitals란?

구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표
이 지표들은 사용자 경험과 직결될 뿐 아니라, SEO에도 영향을 미치기 때문에, 프론트엔드 개발자면 꼭 이해하고 최적화할 필요가 있음(ㅗㅜㅑ 몰랐음)

LCP,INP,CLS로 구성됨

1. LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠 요소가 로드되는 시간을 측정함. 사용자가 웹사이트를 방문했을 때 주요 콘텐츠가 얼마나 빨리 표시되는지를 나타냄. 일반적으로 2.5초에 로드되면 우수하다 판단

2. INP(Interaction to Next Paint)는 상호작용에 대한 페이지의 전반적인 응답성을 평가. 사용자가 페이지를 방문하는 전체 기간 동안 발생하는 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하는 방식으로 측정.
   최종 INP값은 관찰된 가장 긴 상호작용을 기준으로 함. INP가 200밀리초 이하면 우수하다 판단

3. CLS(Cumulative Layout Shift)는 페이지가 예상치 못하게 시각적으로 이동하는 정도를 측정. ex- 사용자가 읽던 문장이 갑자기 밀려나거나, 버튼 위치가 바뀌어 잘못 클릭되는 현상 등이 CLS의 사례에 해당함.
   CLS 값이 0.1이하면 우수하다 판단

각 지표 개선하는 법

LCP가 느리면, 이미지 및 폰트 최적화, 서버 응답 시간 단축을 통해 개선

INP가 높다면, 불필요한 자바스크립트 실행을 줄이거나, 코드 분할을 통해 메인 스레드의 부담을 낮춤으로써 개선

CLS를 줄이려면, 이미지 크기를 명시적으로 설정하거나, 웹 폰트 로드 전략을 조정하여 개선