Lab 데이터 한계를 극복한 실사용자 기반 Web Vitals 측정 시스템 구축

Context

Lighthouse 등 Lab Test 기반 측정 방식의 제어된 환경으로 인한 실제 사용자 경험 반영 한계 발생. 네트워크 지연, 디바이스 성능 차이, 지리적 변수 등 Production 환경의 가변적 병목 지점 파악을 위한 Field Data 수집 필요성 대두.

Technical Solution

• web-vitals/attribution 라이브러리를 통한 LCP, CLS, INP 등 핵심 Web Vitals 실시간 추출 구조 설계
• Page Navigation 시 데이터 유실 방지를 위해 navigator.sendBeacon을 활용한 비동기 전송 메커니즘 채택
• User-Agent 분석 및 Network Information API를 통한 디바이스 타입과 연결 상태의 메타데이터 결합 수집
• Cloudflare Edge 환경의 request.cf 객체를 활용한 사용자 국가 정보의 자동 식별 및 저장
• D1 Database의 APPROX_PERCENTILE 함수를 이용한 p50, p75, p95 등 백분위수 기반의 성능 분석 쿼리 최적화