Core Web Vitals

구글이 사용자 경험을 측정하기 위해 제안한 웹 성능 지표입니다. Largest Contentful Paint(LCP), Cumulative Layout Shift(CLS), Interaction to Next Paint (INP)로 구성되며 구글 검색 순위에 영향을 미칩니다.

Largest Contentful Paint(LCP)

• 정의: 페이지 로드 중 가장 큰 콘텐츠 요소가 사용자 화면에 표시되는 데 걸리는 시간입니다.
• 측정 대상: 이미지, 동영상, 배경 이미지, 텍스트 블록 등
• 목표 값: LCP는 2.5s 이하가 이상적입니다.
• 중요성: 사용자에게 웹 사이트가 빠르게 로드된다는 긍정적인 인상을 줍니다.
• 개선 방법
  • API 응답 시간 개선
  • 리소스 로드 시간 개선
  • 클라이언트 사이드 렌더링 최적화
  • 이미지 최적화

Cumulative Layout Shift (CLS)

• 정의: 페이지 로드 중 예기치 않은 레이아웃 변경의 누적 정도를 측정합니다.
• 측정 대상: 이미지, 글꼴, 광고, 비디오 등으로 인한 레이아웃 변경.
• 목표 값: CLS 점수는 0.1 이하가 이상적입니다.
• 중요성: 페이지 요소들이 갑자기 이동하면 사용자가 의도하지 않은 클릭을 할 수 있습니다.
• 개선 방법: Impact Fraction(영향 비율) × Distance Fraction(거리 비율)
  • A 요소가 페이지의 50%를 차지하고 화면 높이 대비 25% 이동했다고 가정
    • 0.5 * 0.25 = 0.125
• 개선 방법
  • 동적 콘텐츠를 위한 공간 확보 및 Skeleton loading

Interaction to Next Paint (INP)

• 정의: 사용자가 페이지에서 상호작용을 시작한 후, 브라우저가 그 상호작용을 처리하고 화면에 반영될 때까지의 시간을 측정하는 지표입니다.
• 측정 대상: 클릭, 스크롤, 키 입력 등 모든 종류의 사용자 상호작용에 대한 반응 시간. (FID와 다르게, 화면에 그 변화가 나타나는 시간까지 포함)
• 목표 값: INP는 200ms 이하가 이상적입니다.
• 중요성: INP는 웹 애플리케이션의 반응성을 높이는 중요한 지표로, 사용자 경험을 크게 향상시킬 수 있습니다. 이 값이 낮을수록 페이지가 더 빠르게 반응한다고 느껴집니다.
• 개선 방법
  • 메인 스레드 block 최소화
  • DOM 크기 최소화
  • content-visibility를 사용하여 화면 밖 요소를 지연 렌더링

추가 지표