코어 웹바이탈 계측

WebVitals 계측은 웹 애플리케이션의 핵심 성능 지표인 Core Web Vitals를 자동으로 측정하고 모니터링하는 기능을 제공합니다. LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift) 등 Google에서 정의한 웹 성능 기준을 실시간으로 추적하여 사용자 경험을 개선할 수 있습니다.

WebVitals 계측은 다음과 같은 성능 지표를 추적합니다:

WebVitals Telemetry는 주로 다음과 같은 인스트루멘테이션 범위를 통해 캡처됩니다:

WebVitals 스팬은 웹 성능 지표를 캡처합니다:

각 WebVitals 스팬은 다음과 같은 속성을 포함합니다:

이 스키마는 IMQA 모니터링 시스템으로 Telemetry 데이터를 처리하고 저장하기 전에 웹 성능 지표를 위한 Telemetry 데이터를 검증하는 데 사용됩니다. 이는 모든 필수 필드가 올바르게 포함되어 있는지 확인합니다.

(boolean, 선택)

Web Vitals 계측을 활성화하거나 비활성화합니다. true로 설정하면 Core Web Vitals 지표가 자동으로 계측됩니다.

interface InstrumentationConfig {
  enabled?: boolean;
}

Web Vitals 데이터는 Span과 함께 Histogram Metric으로도 전송됩니다. Histogram Metric은 다음과 같은 속성을 포함합니다:

Histogram Metric은 다음과 같은 이점을 제공합니다:

유효한 WebVitals Telemetry 객체는 다음과 같은 내용을 포함합니다:

데이터는 다양한 Telemetry 수집 및 분석 도구와 호환되는 OpenTelemetry 프로토콜 형식을 따릅니다.

// Web Vitals 계측이 활성화되면 자동으로 수행됨
// 각 메트릭은 Span과 Histogram Metric으로 동시 전송

// FCP (First Contentful Paint) 측정 시
// - Span: web-vital.name='fcp', web-vital.value=1500, web-vital.rating='good'
// - Metric: histogram 'webvitals' with value=1500

// LCP (Largest Contentful Paint) 측정 시
// - Span: web-vital.name='lcp', web-vital.value=2500, web-vital.rating='needs-improvement'
// - Metric: histogram 'webvitals' with value=2500