BlogEtcCore Web Vitals

Core Web Vitals

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

Largest Contentful Paint(LCP)

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

First Input Delay (FID)

  • 정의: 사용자가 페이지에서 첫 번째로 상호작용을 시도한 순간부터 브라우저가 그 요청에 반응하는 데 걸리는 시간입니다.
  • 측정 대상: 클릭, 탭, 키 입력 등 사용자가 직접 행하는 상호작용. (FCP ~ TTI 사이에서 발생)
  • 목표 값: FID는 100ms 이하가 이상적입니다.
  • 중요성: FID가 낮을수록 페이지가 빠르고 반응성이 좋다는 인상을 줍니다.
  • 개선 방법
    • Code Splitting
    • 불필요한 렌더링 방지
    • 로드되는 JavaScript 최소화
    • Web Workers 활용
    • TBT (Main thread block)를 줄이면 FID도 함께 개선
지표용도
First Input Delay (FID)첫 번째 사용자 입력 지연 시간 측정으로 초기 상호작용 응답성 확인
Total Blocking Time (TBT)페이지 로딩 중 차단된 시간의 총합으로 페이지 차단성 확인
First Contentful Paint (FCP)화면에 첫 번째 콘텐츠가 렌더링되는 시점
Time to Interactive (TTI)페이지가 완전히 상호작용 가능해지는 시점

Cumulative Layout Shift (CLS)

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