Web Vitals - ChoDragon9/posts GitHub Wiki

https://web.dev/vitals/

Web Vitals은 좋은 UX를 제공하기 위해 Google에서 제안하는 성능 품질 지침이다. Google에서 제공한 도구와 측정 항목은 숙련도에 따라서 UX 품질을 파악하기 힘들다는 사실을 발견했다. 그래서 Web Vitals은 환경을 단순화해서 품질 개선에 도움이 되는 것에 초점을 맞췄다.

로딩 시간, 상호작용 시간, 시각적 변화량 항목에 대한 좋음/나쁨을 판단할 수 있는 숫자 범위를 가이드한다. 성능 측정 항목 중 주요 지표는 Core Web Vitals로 구분한다.

로딩 시간 측정 항목

Time to First Byte (TTFB)

• 브라우저가 페이지 콘텐츠의 첫 번째 바이트를 수신하는 데 걸리는 시간을 의미한다.
• 600ms 이상 걸리면 나쁨을 의미한다.

개선 방법

• 서버의 응용 프로그램 최적화
• 데이터베이스를 쿼리하는 방법 최적화
• 더 많은 메모리 또는 CPU를 가지도록 서버 하드웨어 업그레이드

First Contentful Paint (FCP)

• 페이지 로드가 시작된 후 페이지 콘텐츠의 일부가 화면에 렌더링 될 때까지의 시간을 측정한다.
• 콘텐츠는 텍스트, 이미지(배경 이미지 포함), svg 요소 또는 흰색이 아닌 canvas 요소를 의미한다.

개선 방법

• 로드
  • 요청 수를 줄이고 전송 크기를 작게 유지
  • 필요한 오리진에 사전 연결
  • 서버 응답 시간(TTFB) 감소
  • 여러 페이지 리다이렉션 방지
  • 요청 프리로드
  • 큰 페이로드 방지
  • 효율적인 캐시 정책으로 정적 에셋 제공
  • CSS 용량 최적화
  • 사용하지 않는 CSS 제거
  • 중요한 요청 깊이 최소화
  • 웹 폰트 로드 중에 텍스트가 계속 보이는지 확인
  • 렌더링 차단 리소스 제거
• 과도한 DOM 크기 피하기
  • 네트워크 효율성이 떨어짐
  • 런타임에 렌더링 속도 저하
  • 사용자 기기의 메모리 성능 영향

Largest Contentful Paint (LCP)

• 페이지가 처음 로드를 시작한 시점을 기준으로 뷰포트 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 측정한다.
• img, image내의 svg, video, url() 배경, 텍스트를 고려한다.
• 이미지는 보이는 크기와 고유 크기 중 더 작은 크기를 고려한다.
• 텍스트 요소의 경우 해당 텍스트 노드의 크기만 고려된다.

개선 방법

• 느린 서버 응답 시간을 최적화
• JavaScript와 CSS 같은 렌더링 차단 요청 최적화
  • CSS 최적화
  • JavaScript 최적화
• 리소스 로딩 시간 최적화
  • 웹 폰트 최적화
  • 이미지 최적화
  • PRPL 패턴
    • Push(Preload), Render, Pre-cache, Lazy load
• 클라이언트 사이드 렌더링 최적화
  • CRP 최적화

상호작용 시간 측정 항목

Total Blocking Time (TBT)

• FCP와 TTI 사이의 총 시간을 측정한다.
• 메인 스레드는 50ms 이상 실행되는 작업인 Long Task가 있을 때 차단 된 것으로 간주한다.
• FCP와 TTI 사이에 발생하는 각 Long Task의 차단 시간의 합계가 TBT다.
• 예를 들어 Long Task 250ms, 90ms가 있다면 각각 50ms를 제외한 240ms가 TBT다.

개선 방법

• third-party 코드 영향 감소
• JavaScript 실행 감소
• 메인 쓰레드 실행 최소화
• 적은 요청 수와 작은 응답 사이즈

Time to Interactive (TTI)

• 페이지가 로드 되기 시작한 시점부터 기본 하위 리소스가 로드 된 시점까지의 시간을 측정하며 사용자 입력이 가능한 시점을 측정한다.
• FCP가 시작되고, 5초 동안 메인 스레드를 차단하지 않는 시기를 찾는다. 그 시기에서 과거로 검색하며 Long Task의 종료 시점을 찾는 다. 그 시점이 TTI 완료 시점이다.

개선 방법

• JavaScript 최소화
• 필요한 오리진에 사전 연결
• 요청 preload
• 주요 요청 깊이 최소화
• TBT와 같음
  • third-party 코드 영향 감소
  • JavaScript 실행 감소
  • 메인 쓰레드 실행 최소화
  • 적은 요청 수와 작은 응답 사이즈

First Input Delay (FID)

• 사용자가 페이지에 처음 인터렉션 한 시간부터 이벤트 핸들러 처리를 시작할 수 있는 시간까지의 시간을 측정한다.

개선 방법

• TBT와 같음
  • third-party 코드 영향 감소
  • JavaScript 실행 감소
  • 메인 쓰레드 실행 최소화
  • 적은 요청 수와 작은 응답 사이즈

메인 쓰레드 실행 최소화

스크립트 평가

• third-party JavaScript 최적화
• 입력 핸들러 디바운스
• 웹 워커 사용

스타일 및 레이아웃

• 스타일 계산의 범위와 복잡성 감소
• 크고 복잡한 레이아웃 및 레이아웃 스래싱 방지

렌더링

• 컴포지터 전용 속성에 사용 및 레이어 수 관리
• 페이지 복잡성을 단순화하고 페인트 영역을 줄인다.

시각적 변화량 측정 항목

Cumulative Layout Shift (CLS)

• 페이지에서 발생하는 모든 예기치 않는 레이아웃 이동에 대한 모든 개별 레이아웃 이동 점수의 합계를 측정한다.
• CLS = 이동 거리 비율 x 이동한 영역 비율

개선 방법

• 항상 이미지 및 동영상 요소에 크기 속성을 포함
• CSS 가로, 세로 비율 상자와 같은 항목으로 필요한 공간을 잡는다.
• 사용자 상호 작용에 대한 응답을 제외하고는 기존 컨텐츠 위에 컨텐츠를 삽입하지 않는다. 이렇게하면 레이아웃 이동이 예상된다.
• 레이아웃 변경을 트리거하는 속성의 애니메이션보다 transform 애니메이션으로 적용한다.

Core Web Vitals

성능 측정 항목 중 주요 지표인 LCP, FID, CLS를 의미한다.

LCP의 좋음/나쁨 판단 구간

• 좋음: 2500ms 미만
• 나쁨: 4000ms 초과

FID의 좋음/나쁨 판단 구간

• 좋음: 100ms 미만
• 나쁨: 300ms 초과

CLS의 좋음/나쁨 판단 구간

• 좋음: 0.1 미만
• 나쁨: 0.25 초과