Chrome DevTools completa el análisis de soft navigations en SPA y añade un nivel de CPU forzado
Ya se puede analizar en DevTools la velocidad de los «cambios de página» de una SPA y reproducir con código pruebas de rendimiento para distintos niveles de hardware.
Chrome DevTools ha añadido dos funciones de rendimiento para desarrolladores de SPA (aplicaciones web que cambian la pantalla sin recargar toda la página). Una es el análisis de soft navigations en Insights, del panel Performance. La otra es un comando del Chrome DevTools Protocol (CDP, la interfaz para controlar DevTools desde código) que fija un nivel de rendimiento de CPU. Ambas aparecen en la entrada de novedades de DevTools de Chrome for Developers (sobre Chrome 153 y 154, publicada el 22 de septiembre).
Qué es una soft navigation
Normalmente, al hacer clic en un enlace el navegador pide una página nueva al servidor. Una SPA funciona de otra forma: JavaScript solo cambia la URL de la barra de direcciones y sustituye una parte de la pantalla. Para el usuario parece un cambio de página, pero el navegador no sabe que «se abrió una página nueva».
Por eso la métrica de carga (LCP) se medía una sola vez, en la primera carga, y los cambios de pantalla posteriores quedaban fuera de la medición. La API Soft Navigations pretende tratar esos cambios como navegaciones y medir su rendimiento por separado.
- En Chrome 152, la compatibilidad con soft navigations llegó a las Live Metrics y a las vistas de traza de DevTools.
- Ahora se ha añadido el análisis a Insights del panel Performance, lo que Chrome describe como «completar la compatibilidad de extremo a extremo», de la medición al análisis.
Fijar un nivel de rendimiento de CPU desde el código
- El nuevo comando CDP es
Emulation.setCPUPerformanceOverride. Fija un nivel de rendimiento de CPU calibrado, lo que, según Chrome, permite «pruebas de rendimiento reproducibles entre niveles de hardware». - El enfoque anterior (
Emulation.setCPUThrottlingRate) frenaba la CPU con un factor fijo, como «4 veces más lenta». Según se informa, el nuevo mide primero el rendimiento real de tu propio PC, crea referencias como «móvil de gama baja» y «móvil de gama media» y se ajusta a esos niveles.
Los detalles (qué niveles existen, cómo funciona la calibración) no se explican con extensión en la entrada de Chrome. Los ajustes de calibración se describen según la documentación de DevTools sobre la limitación de rendimiento (throttling).
Afirmaciones que no pudimos confirmar
- «Se ofrece monitorización integrada con la Soft Navigation Timing API»: la compatibilidad de análisis en DevTools y la publicación completa de la API son cosas distintas. En una entrada del 20 de abril, Chrome abrió un último origin trial (un periodo de prueba en el que sitios seleccionados pueden usar una función antes de tiempo) para Chrome 147 a 149 y solo dijo que prevé lanzar la API más adelante este año. No pudimos confirmar si se ha lanzado por completo desde entonces. Algunos artículos externos dicen que ya se ha publicado, pero no se pudo confirmar con el material del propio Chrome.
- «Está dirigido a frameworks como React y Next.js»: no encontramos ninguna mención de frameworks en la entrada de Chrome. El alcance parece ser los cambios de pantalla al estilo SPA en general, no frameworks concretos.
- «Un conjunto de comandos»: el único comando CDP nuevo confirmado en la entrada de Chrome es
Emulation.setCPUPerformanceOverride. - Fecha: la entrada de Chrome se publicó el 22 de septiembre (el título de la página dice «October 2026»).
Qué podría cambiar para los desarrolladores
Lo que sigue es nuestra estimación y consejo a partir de la entrada oficial.
- Lo que se puede probar ya. En Chrome 153 o posterior, Insights del panel Performance puede mostrar los cuellos de botella por cambio de pantalla de una SPA. Sirve para encontrar «qué es lento al moverse entre rutas» en lugar de mirar solo la primera carga.
- Recoger datos de usuarios reales aún es pronto. La API Soft Navigations no está completamente publicada; conviene comprobar por separado la compatibilidad de los navegadores antes de usarla para recoger el rendimiento de transición de visitantes reales.
- Mismas condiciones en pruebas automatizadas. En CI (comprobaciones que se ejecutan solas con cada envío de código) o en pruebas de extremo a extremo (con herramientas que manejan un navegador automáticamente, como Puppeteer y Playwright), fijar un nivel de CPU facilita comparar sobre la misma base si un cambio ha ralentizado la aplicación.
- Compara en la misma máquina. Los niveles se construyen calibrando el rendimiento de cada PC. La referencia puede variar entre compañeros y máquinas de CI, así que es más seguro comparar en el mismo entorno.
Qué vigilar
La fecha de publicación completa de la API Soft Navigations y su compatibilidad en otros navegadores, la documentación oficial y los parámetros de Emulation.setCPUPerformanceOverride, y cómo se conectan frameworks como Next.js con las soft navigations.
Fuentes
Fuente: developer.chrome.com