Chrome 152에서 SPA 화면 전환의 LCP·INP를 바로 확인하는 방법

SPA 성능 측정과 Chrome DevTools

SPA에서 주소만 바뀌는 화면 전환도 느리다면, Chrome 152 이상에서는 DevTools > Performance > Live Metrics를 열고 실제 라우팅을 해 보세요. 이제 기본적으로 소프트 내비게이션별 LCP와 INP를 보여 주므로, 첫 페이지가 아니라 전환 뒤의 화면이 느린 문제를 더 빨리 재현할 수 있습니다.

무엇이 바뀌었나

Chrome DevTools 152(2026-08-25 공개)는 Performance 패널의 Live Metrics에 SPA 소프트 내비게이션의 Core Web Vitals를 추가했습니다. 이 기능은 web-vitals 6.0.0의 소프트 내비게이션 지원을 사용합니다. 여기서 소프트 내비게이션은 일반적으로 다음 세 조건이 함께 일어나는 클라이언트 전환입니다.

1. 사용자가 상호작용한다.
2. URL이 바뀐다.
3. 화면에 새 콘텐츠가 그려진다.

즉 history.pushState()만 호출했다고 무조건 측정되는 것은 아닙니다. 사용자 입력과 가시적인 페인트가 함께 있어야 한다는 점이 진단의 출발점입니다.

왜 개발자에게 중요한가

기존 페이지 단위 지표만 보면 SPA의 첫 진입은 빠른데 검색 결과·상세 화면·장바구니 전환이 느린 상황을 놓치기 쉽습니다. Live Metrics에서 해당 경로로 직접 이동해 LCP·INP가 흔들리는지 먼저 확인하고, 문제가 반복되면 Performance 녹화를 떠서 긴 작업, 렌더링, 레이아웃 변경을 추적하는 흐름이 효율적입니다.

가장 작은 재현 절차

다음은 프레임워크와 관계없이 쓸 수 있는 확인 절차입니다.

1. Chrome 152 이상에서 대상 SPA를 엽니다.
2. DevTools를 열고 Performance 패널의 Live Metrics 화면을 유지합니다.
3. 목록에서 상세 화면처럼 URL과 화면 내용이 바뀌는 링크를 실제로 클릭합니다.
4. 전환 뒤 표시되는 LCP·INP를 확인합니다. 특정 경로에서만 높다면 같은 경로를 반복해 재현한 뒤 Performance 녹화를 시작합니다.

실제 사용자 모니터링(RUM)에도 경로별 값을 보낼 계획이라면 web-vitals v6의 소프트 내비게이션 옵션을 명시적으로 켜고 URL을 현재 location.href로 다시 읽지 않는 편이 안전합니다. 콜백은 전환 뒤 늦게 실행될 수 있으므로 메트릭이 제공하는 navigationURL을 사용합니다.

import {onLCP, onINP} from 'web-vitals';

function sendMetric(metric) {
  navigator.sendBeacon('/vitals', JSON.stringify({
    name: metric.name,
    value: metric.value,
    url: metric.navigationURL,
    navigationId: metric.navigationId,
  }));
}

onLCP(sendMetric, {reportSoftNavs: true});
onINP(sendMetric, {reportSoftNavs: true});

위 예제는 공식 web-vitals API를 바탕으로 한 설명용 예시입니다. 수집 엔드포인트의 인증, 샘플링, 개인정보 정책은 서비스에 맞춰 별도로 설계해야 합니다.

호환성·마이그레이션 주의점

• 소프트 내비게이션 측정은 Chromium 계열 브라우저의 지원 여부에 따라 결과가 달라질 수 있습니다. 다른 브라우저까지 같은 정의로 비교하려면 전환 이벤트를 별도로 수집하거나 보고서를 분리하세요.
• reportSoftNavs: true를 켜면 첫 URL의 지표가 첫 소프트 내비게이션 시점에 확정됩니다. 기존 집계와 시계열이 달라질 수 있으므로 배포 전 대시보드의 페이지 식별자와 집계 키를 점검하세요.
• 소프트 내비게이션은 같은 URL을 여러 번 방문할 수도 있습니다. URL만 키로 쓰지 말고 navigationId도 함께 저장하세요.
• 모든 pushState()가 측정 대상은 아닙니다. 사용자 상호작용·URL 변경·페인트 조건을 충족하지 않는 라우팅은 누락되거나, 앱의 UX와 브라우저 판정이 다를 수 있습니다.
• 성능 데이터에는 URL 경로와 사용자 행동 맥락이 들어갈 수 있습니다. 쿼리 문자열·개인 식별자를 전송하지 않도록 서버 측 정규화와 접근 제어를 적용하세요.

적용 체크리스트

• Chrome 152 이상에서 대표 SPA 경로를 Live Metrics로 재현했다.
• 느린 전환은 Performance 녹화로 원인을 추가 확인했다.
• RUM에 navigationURL과 navigationId를 저장할지 결정했다.
• 기존 페이지뷰 지표와 소프트 내비게이션 지표를 같은 그래프에 섞지 않도록 구분했다.
• URL의 민감한 쿼리값을 전송하지 않도록 필터를 추가했다.

공식 출처

• Chrome 152 DevTools의 소프트 내비게이션 Live Metrics 변경 사항 — 2026-08-30 확인
• GoogleChrome/web-vitals v6.0.0 변경 로그 — 2026-08-30 확인
• Chrome의 소프트 내비게이션 측정 정의와 제한 — 2026-08-30 확인