Medición del impacto del streaming: FCP, TTI y LCP

FCP mide el tiempo transcurrido desde el inicio de la navegación hasta que el primer elemento de contenido (texto, imagen o fondo) se pinta en la pantalla. El streaming mejora FCP al enviar inmediatamente el shell HTML: el navegador puede pintar el diseño, la navegación y cualquier texto visible inicialmente en cuanto llegan los primeros fragmentos.

Con el SSR síncrono (renderToString), el navegador no recibe HTML hasta que termina todo el renderizado. Con el streaming, el navegador recibe el shell HTML unos milisegundos después de la solicitud; el diseño y el contenido estático aparecen casi de inmediato, lo que reduce drásticamente el FCP.

LCP mide cuándo se pinta el elemento visible más grande del viewport, normalmente una imagen hero o un encabezado grande. El streaming mejora el LCP si el elemento LCP forma parte del shell (no está dentro de un límite de Suspense), ya que el shell se transmite antes que cualquier sección que dependa de datos.

Una optimización clave consiste en diseñar la página de modo que el elemento LCP —la sección hero, el encabezado principal o la imagen destacada— esté fuera de cualquier límite de Suspense. Si el elemento LCP está dentro de un límite de Suspense a la espera de datos, el streaming no puede mejorar el LCP hasta que esos datos se resuelvan.

TTI mide cuándo la página responde de forma fiable a la entrada del usuario, sin Long Tasks que bloqueen el hilo principal. La combinación de streaming e hidratación selectiva reduce el TTI al distribuir el trabajo de hidratación a lo largo del tiempo, en lugar de ejecutar una única tarea de hidratación síncrona y grande después de descargar todo el JavaScript.

Time to First Byte (TTFB) está determinado por la latencia de red y el tiempo de procesamiento del servidor antes de enviar el primer byte. El streaming no cambia el TTFB; ahí es donde ayuda el edge rendering. Para que el streaming mejore el FCP, primero necesita un TTFB bajo; de lo contrario, solo estará transmitiendo desde un origen lento.

La vista de filmstrip de WebPageTest muestra una secuencia de capturas de pantalla tomadas cada 100 ms durante la carga de la página. En una página con streaming, la estructura aparece pronto y, después, las secciones se van completando progresivamente. En una página sin streaming, se muestra una pantalla en blanco seguida de una página completamente renderizada de repente: una diferencia visual clara.

Un benchmark significativo compara la misma página renderizada de dos formas: con el streaming de RSC de Next.js habilitado y con SSR síncrono tradicional. Utilice WebPageTest con una condición de red fija (por ejemplo, Fast 3G y una ralentización de CPU de 4x) y compare las métricas FCP, LCP y TTI en 3 ejecuciones de prueba para obtener confianza estadística.

La pestaña Network de Chrome DevTools tiene un menú desplegable "Throttling" con ajustes preestablecidos como Fast 3G y Slow 4G. Fast 3G (1.6 Mbps, 150ms RTT) exagera la diferencia entre el streaming y la ausencia de streaming porque amplifica el tiempo de descarga del documento HTML completo, lo que hace visibles las mejoras del streaming incremental.

Interaction to Next Paint (INP) mide el tiempo transcurrido desde cualquier interacción del usuario hasta la siguiente pintura. Sustituyó a FID como Core Web Vital en 2024. El streaming reduce el INP al priorizar la hidratación de los componentes interactivos con los que probablemente interactuará primero el usuario, reduciendo el tiempo de bloqueo antes de que esos componentes respondan.

La configuración de mayor impacto combina el renderizado en el edge (un TTFB bajo gracias a un PoP cercano) con el streaming (entrega progresiva de HTML) y la hidratación selectiva (procesamiento progresivo de JavaScript). En conjunto, estas tres técnicas minimizan todas las métricas de rendimiento principales durante todo el ciclo de carga.

El streaming mejora más directamente el FCP al entregar de inmediato la estructura HTML, y mejora el LCP cuando el elemento LCP se encuentra en esa estructura. El TTI mejora gracias a la hidratación selectiva, que distribuye el trabajo de JavaScript a lo largo del tiempo. El TTFB no cambia: para mejorarlo, utilice el renderizado en el edge. Utilice el filmstrip de WebPageTest y la limitación de red de Chrome DevTools para medir el impacto del streaming, y optimice el INP como métrica principal de interactividad en Core Web Vitals.