Web Vitals - 웹 성능 최적화 기본

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

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

로딩 시간 측정 항목

First Contentful Paint (FCP)

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

개선 방법

• 리소스 요청 수를 줄이고 응답 크기를 작게 유지
• 효율적인 캐시 정책으로 정적 에셋 제공
• CSS 용량 최적화
• 렌더링 차단 리소스 제거
• 과도한 DOM 크기 피하기

Largest Contentful Paint (LCP)

페이지가 처음 로드를 시작한 시점을 기준으로 뷰포트 내에 표시되는 가장 큰 이미지/동영상 또는 텍스트 블록의 렌더링 시간을 측정합니다.

이미지는 img 태그, svg 내의 image, video, url() 배경을 대상으로 하고 화면에 보이는 크기와 원본 그기 중에 더 작은 크기를 기준으로 합니다. 텍스트 요소의 경우 해당 텍스트 노드의 크기만 고려됩니다.

개선 방법

• 느린 서버 응답 시간을 최적화
• JavaScript와 CSS 같은 렌더링 차단 요청 최적화
• 웹 폰트, 이미지와 같은 리소스 로딩 시간 최적화
• 클라이언트 사이드 렌더링 최적화

Time to First Byte (TTFB)

브라우저가 페이지 콘텐츠의 첫 번째 바이트를 수신하는 데 걸리는 시간을 의미합니다. TTFB는 600ms 이상 걸리면 성능이 나쁘다는 것을 의미합니다.

개선 방법

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

상호작용 시간 측정 항목

Time to Interactive (TTI)

페이지가 로드 되기 시작한 시점부터 기본 하위 리소스가 로드 된 시점까지의 시간을 측정하며 사용자 입력이 가능한 시점을 측정합니다.

TTI를 측정하는 방법은 FCP가 시작되고, 5초 동안 메인 스레드를 차단하지 않는 시기를 찾고, 그 시기에서 과거로 검색하며 Long Task의 종료 시점을 찾아서 그 시점을 TTI 완료 시점으로 합니다.

개선 방법

• JavaScript 최소화
• 필요한 오리진에 사전 연결
• 요청 preload
• 주요 요청 깊이 최소화

First Input Delay (FID)

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

개선 방법

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

메인 쓰레드 실행 최소화 방법

• third-party 자바스크립트 최적화
• 입력 핸들러 디바운스
• 웹 워커 사용
• 스타일 계산의 범위와 복잡성 감소
• 크고 복잡한 레이아웃 및 레이아웃 스래싱 방지
• 컴포지터 전용 속성에 사용 및 레이어 수 관리
• 페이지 복잡성을 단순화하고 페인트 영역 줄이기

Total Blocking Time (TBT)

FCP와 TTI 사이의 총 시간을 측정합니다.

메인 스레드는 50ms 이상 실행되는 작업인 Long Task가 있을 때 차단된 것으로 간주하는데, FCP와 TTI 사이에 발생하는 각 Long Task의 차단 시간의 합계가 TBT입니다.

예를 들어 Long Task 250ms, 90ms가 있다면 각각 50ms를 제외한 240ms가 TBT입니다.

개선 방법

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

시각적 변화량 측정 항목

Cumulative Layout Shift (CLS)

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

개선 방법

• 항상 이미지 및 동영상 요소에 크기 속성을 포함
• 사용자 상호 작용에 대한 응답을 제외하고는 기존 컨텐츠 위에 컨텐츠를 삽입하지 않기
• 레이아웃 변경을 트리거 하는 속성의 애니메이션보다 transform 애니메이션으로 적용

Core Web Vitals

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

LCP 성능 기준

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

FID 성능 기준

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

CLS 성능 기준

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