Core Web Vitals

  1. LCP (Loading Speed)

    • Largest Contentful Paint
    • 웹 페이지에서 용량이 큰 콘텐츠가 보이기 까지 걸리는 시간을 의미
    • 개선 방법
      • 비교적 사이즈가 큰 이미지나 동영상의 용량을 줄이거나(CDN 활용, 이미지 압축)
      • 불필요한 코드 삭제
    • 구글은 LCP를 2.5초 이하로 단축시키는 것을 속도 개선의 하나의 목표로 한다.

  2. INP (Interaction to Next Paint)

    • 사용자가 페이지에서 상호작용한 모든 시간(클릭, 키 입력 등) 중 가장 긴 지연 시간을 측정하여 페이지의 전체적인 상호작용 응답성을 평가
    • 개선방법
      • JavaScript 실행 시간 최소화를 위해 초기 로드 시 당장 필요하지 않은 JavaScript 코드를 분할하고 Lazy Load한다
      • 긴 JavaScript 작업은 작은 단위로 쪼개어(Chunking) 실행
      • 키 입력이나 마우스 움직임과 같은 빈번한 이벤트 핸들러에 디바운스나 스로틀을 적용하여 불필요한 연산을 줄인다
      • 상태 변화로 인한 불필요한 리렌더링을 줄여 상호작용 후 화면이 업데이트되는 시간을 단축
    • 구글은 INP를 200밀리초 이하를 목표로 한다

  3. CLS (Visual Stability)

    • Cumulative Layout Shift
    • 웹 페이지의 시각적 안정성을 의미, 화면 배치가 얼마나 갑작스럽게 변하는지를 나타내는 지표
    • 예기치 않은 화면 이동의 빈도와 크기를 측정
    • 개선방법
      • 이미지나 광고 공간에 미리 고정 크기를 지정해두거나 콘텐츠가 순차적으로 로드되도록 조정하여 화면이 갑자기 변하지 않게 조정해야한다. (이미지나 광고가 비교적 늦게 로딩되면서 콘텐츠를 밀어내는 경우가 많기 때문에)
    • 구글은 CLS를 0.1 이하일 때 시각적 안정성이 양호한 것으로 판단한다.

구글은 2021년 부터 Core Web Vitals 지표를 검색 순위 결정에 반영하기 시작하였다. 즉, Core Web Vitals 점수가 좋으면 구글 검색 결과에서 유리한 순위를 받을 가능성이 높아진다는 것이다.

#Core Web Vitals