정의
"성능 개선을 했는데 정말 빨라진 게 맞나?"를 판단하려는데, 같은 페이지를 새로고침할 때마다 숫자가 널뛰어서 개선인지 우연인지 구분이 안 될 때 이 개념을 쓴다. 한 번의 측정 대신 여러 번 재보고 중앙값으로 비교하는 방법이다.
Lab 성능 측정 분산(실험실 측정, 즉 실제 사용자 데이터가 아니라 내 기기에서 직접 재보는 측정에서 값이 매번 튀는 정도)은 동일 페이지·동일 코드에서도 개발 서버 reload trace(새로고침 성능 기록)마다 LCP·TTFB·CLS가 크게 달라지는 현상이다. 여기서 LCP(Largest Contentful Paint, 화면에서 가장 큰 요소가 그려질 때까지 걸린 시간)·TTFB(Time To First Byte, 서버 응답 첫 바이트가 도착할 때까지 걸린 시간)·CLS(Cumulative Layout Shift, 화면이 갑자기 얼마나 밀렸는지 누적 점수)는 대표적인 웹 성능 지표다. 비교 프로토콜은 환경 메타데이터를 고정하고, 단일 run 대신 N회 reload median(여러 번 새로고침한 값들의 중앙값 — 평균과 달리 튀는 값에 덜 흔들림)으로 before/after를 판단하는 절차다.
왜 필요한가
next dev류 환경은 on-demand compile(요청이 올 때 그 페이지를 그때그때 컴파일), HMR(Hot Module Replacement, 코드 저장 시 새로고침 없이 바뀐 부분만 갈아끼우는 개발 기능), source map, unoptimized bundle로 TTFB와 LCP가 run마다 튄다. 한 번의 trace로 "회귀"(성능이 나빠짐) 또는 "개선"을 단정하면 환경 noise와 실제 변경을 혼동한다. 반대로 실제 회귀를 outlier(다른 값들과 동떨어진 튀는 측정값) 한 번으로 놓칠 수도 있다. 릴리스 전에는 production build에서 동일 프로토콜로 재확인하는 것이 좋다.
동작 원리
LCP는 대략 TTFB + load delay + load duration + render delay로 분해된다. dev에서 TTFB가 300ms↔1000ms로 변하면 LCP 전체가 비례 이동한다. CLS도 단일 run에서 늦은 shift 한 번이 점수를 크게 올릴 수 있다.
기록할 메타데이터: URL, 인증 상태, 데이터 시나리오, dev vs start, git commit, throttle, 측정 도구.
집계: 동일 Chrome 세션에서 reload trace 3회 → median(LCP), median(CLS), median(TTFB). median의 2× 이상 run은 outlier로 별도 기록하되 headline에 쓰지 않는다.
환경 간 비교: dev median과 production median의 절대값 비교는 무의미 — 각 환경 내 before/after delta만 본다.
실무 적용
Lighthouse Performance 0–100과 trace LCP ms는 다른 계측이다. A11y/SEO 카테고리 점수로 LCP를 대체하지 않는다(lighthouse-measurement-accuracy).
트레이드오프
| 선택 | 이득 | 비용 |
|---|---|---|
| dev 3× median | 빠른 iteration | abs ms는 prod와 다름 |
| prod only | 높은 신뢰도 | 측정·auth setup 느림 |
| single run | 가장 빠름 | 오판 위험 큼 |
사용하면 안 되는 경우
- 이미 RUM(Real User Monitoring, 실제 사용자 브라우저에서 수집한 현장 성능 데이터)으로 충분한 표본이 있고 lab은 회귀 스모크만 필요한 경우(프로토콜은 단순화 가능).
- throttle·네트워크 프로파일을 바꿔가며 단일 run만 비교하는 경우.
흔한 실수
- dev 단일 run으로 PR 성능 결론 내리기.
- Lighthouse 카테고리 100점 = LCP 최적이라고 해석.
- cold 첫 run만 측정해 baseline으로 저장.
- dev median 수치를 production SLA에 직접 매핑.
관련 개념
- lighthouse-measurement-accuracy — 점수 vs ms 혼동 방지
- largest-contentful-paint — LCP 구성·개선
- critical-rendering-path — TTFB·render 파이프라인