yceffort
◆ SERIES · 4 POSTS

Core Web Vitals 직접 수집하기

web-vitals로 잰 CWV를 OpenTelemetry로 trace와 metric에 나눠 모으면서, 값이 브라우저에서 Grafana 패널까지 가는 동안 오류 없이 사라진 지점을 재현 환경에서 다시 재고 기록한 시리즈

README

CWV를 직접 수집할 때 어려운 것은 측정보다 측정한 값이 대시보드까지 가는 길이었다. web-vitals가 계산한 값은 브라우저 안에서, 페이지를 떠나는 순간에, collector에서, 저장소에서 조회할 때 사라졌고, 그 어느 지점에서도 오류는 나지 않았다. 이 시리즈는 그 지점들을 하나씩 찾아 공개 재현 환경에서 다시 잰 기록이다.

같은 질문을 두 환경에서 풀었다. 하나는 앱 웹뷰에서 열리는 화면의 값을 여러 팀이 같이 쓰는 사내 관측 인프라로 보내는 경우로, 떠날 때 신호가 오지 않는 웹뷰와 설정을 바꿀 수 없는 collector가 제약이었다. 다른 하나는 같은 수집을 이 블로그에 올리고 수집 서버까지 직접 운영하는 경우로, 모든 설정을 바꿀 수 있는 대신 방문이 드물다는 점이 문제가 됐다.

측정 코드와 실험은 blog-experiments/cwv-otel-grafana에 있고, 각 편의 수치를 어느 버전에서 쟀는지는 글과 실험별 README에 적었다.

04 ITEMS

전체 글

in order
01

web-vitals는 언제 핵심 웹 지표를 보고하는가

#web-performance#debugging#browser
web-vitals 6.2.3의 지표별 보고 조건과 클릭 직후 페이지를 떠날 때 INP가 누락되는 원인을 확인했다.
수정
52분 · read
02

페이지를 떠나는 순간 핵심 웹 지표를 보내기

#web-performance#debugging#browser
페이지를 떠날 때 CLS와 INP가 누락되는 원인을 OTel JS의 전송 방식과 flush 순서에서 찾았다.
수정
32분 · read
03

앱 웹뷰의 핵심 웹 지표를 공용 관측 인프라로 보내기

#web-performance#devops#debugging
앱 웹뷰에서 측정한 핵심 웹 지표를 공용 관측 인프라로 보내면서 일부 값이 누락됐다. 웹뷰의 이탈 이벤트부터 tail sampling, 누적 변환, Tempo 조회까지 재현 환경에서 확인하고, 수집 코드를 바꿔 해결할 수 있는 범위를 살펴봤다.
수정
58분 · read
04

방문이 드문 블로그의 핵심 웹 지표를 직접 수집하기

#web-performance#devops#debugging
공용 관측 인프라를 기준으로 만든 핵심 웹 지표 수집을 개인 블로그로 옮겼다. 방문이 드물어 비어 있던 대시보드를 고치고, 일반 브라우저에 맞춰 수집 시점을 바꿨다. 10월 17일부터 22일까지의 변경 과정과 23일에 확인한 조회 누락, 닷새치 데이터로 판단할 수 있는 범위를 기록했다.
56분 · read