Core Web Vitals란 무엇인가요?
분야: 프론트엔드
Core Web Vitals는 구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표입니다. 이 지표들은 사용자 경험과 직결될 뿐 아니라, SEO에도 영향을 미치기 때문에, 프론트엔드 개발자라면 꼭 이해하고 최적화할 필요가 있습니다.
Core Web Vitals는 LCP, INP, CLS로 구성됩니다. 이 세 가지 지표에 대해 설명드리겠습니다.
첫째, LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠 요소가 로드되는 시간을 측정합니다. 사용자가 웹사이트를 방문했을 때 주요 콘텐츠가 얼마나 빨리 표시되는지를 나타냅니다. 일반적으로 2.5초 이내에 로드되면 우수하다고 판단합니다.
둘째, INP(Interaction to Next Paint)는 상호작용에 대한 페이지의 전반적인 응답성을 평가합니다. 사용자가 페이지를 방문하는 전체 기간 동안 발생하는 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하는 방식으로 측정됩니다. 최종 INP 값은 관찰된 가장 긴 상호작용을 기준으로 합니다. INP가 200밀리초 이하이면 우수하다고 판단합니다.
셋째, CLS(Cumulative Layout Shift)는 페이지가 예상치 못하게 시각적으로 이동하는 정도를 측정합니다. 예를 들어, 사용자가 읽던 문장이 갑자기 밀려나거나, 버튼 위치가 바뀌어 잘못 클릭되는 현상 등이 CLS의 사례에 해당합니다. CLS 값이 0.1 이하이면 우수하다고 판단합니다.
각 지표를 어떻게 개선할 수 있나요? 🤔
LCP가 느리다면, 이미지 및 폰트 최적화, 서버 응답 시간 단축을 통해 개선할 수 있습니다.
INP가 높다면, 불필요한 자바스크립트 실행을 줄이거나, 코드 분할을 통해 메인 스레드의 부담을 낮춤으로써 개선할 수 있습니다.
CLS를 줄이려면, 이미지 크기를 명시적으로 설정하거나, 웹 폰트 로드 전략을 조정하여 개선할 수 있습니다.