크롬 DevTools, SPA '화면 전환' 분석 완성… CPU 사양을 코드로 바꿔 재현 테스트
SPA의 ‘화면 전환’ 속도를 DevTools에서 바로 분석하고, 기기 사양별 성능 테스트를 코드로 똑같이 재현할 수 있게 됐다.
Chrome DevTools가 SPA(페이지를 새로고침하지 않고 화면을 바꾸는 웹앱) 개발자를 위한 성능 기능을 두 가지 추가했다. 하나는 Performance 패널의 Insights에서 ’소프트 내비게이션’을 분석하는 기능이고, 다른 하나는 Chrome DevTools Protocol(CDP, 코드로 DevTools를 조작하는 규약)로 CPU 성능 티어를 지정하는 명령이다. 크롬 개발자 블로그의 DevTools 업데이트 글(Chrome 153·154 기준, 9월 22일 공개)에 실렸다.
소프트 내비게이션이 뭐길래
보통 링크를 누르면 브라우저가 서버에서 새 페이지를 받아 온다. SPA는 다르다. 자바스크립트가 주소창의 URL만 바꾸고 화면 일부만 갈아끼운다. 사용자에게는 페이지 이동처럼 보이지만 브라우저는 “새 페이지로 이동했다”고 알지 못한다.
이 때문에 로딩 속도 지표(LCP)는 처음 한 번만 측정되고, 그 뒤 화면 전환은 측정에서 빠졌다. 소프트 내비게이션 API는 이런 전환을 하나의 이동으로 인식해 성능을 따로 재도록 만든 기능이다.
- Chrome 152에서 DevTools의 Live Metrics와 트레이스 화면에 소프트 내비게이션 지원이 들어갔다.
- 이번에 Performance 패널의 Insights에 분석이 추가되면서, 크롬은 이를 “측정부터 분석까지 완결된 지원”이라고 설명했다.
CPU 성능 티어를 코드로 지정
- 새 CDP 명령은
Emulation.setCPUPerformanceOverride다. 보정된(calibrated) CPU 성능 티어를 설정해서 “하드웨어 등급별로 재현 가능한 성능 테스트”를 할 수 있게 한다는 설명이다. - 기존 방식(
Emulation.setCPUThrottlingRate)은 CPU를 “4배 느리게”처럼 고정 배수로 늦췄다. 새 방식은 내 PC의 실제 성능을 먼저 재서 ‘저사양 모바일’, ‘중간 사양 모바일’ 같은 기준을 만들고 그 티어에 맞추는 구조라고 알려졌다.
이 부분의 세부(티어 종류, 보정 방식)는 크롬 글에 자세히 설명되어 있지 않다. 보정 프리셋은 DevTools 문서의 스로틀링 설명을 기준으로 적었다.
원문에서 확인되지 않은 부분
- “Soft Navigation Timing API 통합 모니터링 제공”: DevTools의 분석 지원과 API의 정식 출시는 별개다. 크롬이 4월 20일 올린 글에서는 Chrome 147~149 구간의 마지막 오리진 트라이얼(일부 사이트가 새 기능을 미리 써 볼 수 있게 하는 시험 기간)을 열었고, 정식 출시는 올해 안으로 계획한다고만 밝혔다. 이후 정식 출시 여부는 확인하지 못했다. 일부 외부 글은 이미 출시됐다고 쓰지만 크롬 공식 자료로는 확인되지 않았다.
- “React, Next.js 등 프레임워크 대상”: 크롬 글에서 프레임워크를 언급한 부분은 찾지 못했다. 특정 프레임워크가 아니라 SPA식 화면 전환 전반이 대상으로 보인다.
- “명령어 세트”: 크롬 글에서 확인된 새 CDP 명령은
Emulation.setCPUPerformanceOverride하나다. - 날짜: 크롬 글의 공개일은 9월 22일이다(페이지 제목은 “October 2026”).
개발자에게 달라질 수 있는 것
아래는 공식 글을 바탕으로 한 추정과 조언이다.
- 지금 바로 써볼 수 있는 것: Chrome 153 이상 DevTools의 Performance 패널 Insights에서 SPA의 화면 전환별 병목을 볼 수 있다. 첫 로딩만 보던 측정에서 벗어나 “라우트를 옮길 때 느린 곳”을 찾는 용도로 좋다.
- 실사용자 데이터 수집은 아직 이르다: 소프트 내비게이션 API는 정식 출시 전 단계라서, 실제 방문자의 전환 성능을 수집하는 데 쓰려면 지원 범위를 따로 확인해야 한다.
- 자동화 테스트에서 같은 조건 만들기: CI(코드를 올릴 때마다 자동으로 돌아가는 검사)나 E2E 테스트(브라우저를 자동으로 조작해 확인하는 Puppeteer, Playwright 같은 도구)에서 CPU 티어를 고정하면 “이번 변경으로 느려졌나”를 같은 기준으로 비교하기 쉬워진다.
- 같은 기계에서 비교하자: 티어는 각 PC의 성능을 보정해서 만든다. 팀원마다, CI 머신마다 기준이 다를 수 있으니 비교는 같은 환경에서 하는 게 안전하다.
앞으로 볼 것
Soft Navigations API의 정식 출시 시점과 다른 브라우저의 지원, Emulation.setCPUPerformanceOverride의 공식 문서와 파라미터, 그리고 Next.js 같은 프레임워크가 소프트 내비게이션을 어떻게 연결하는지다.