Misurare l’impatto dello streaming: FCP, TTI e LCP

FCP misura il tempo trascorso dall'inizio della navigazione fino al momento in cui il primo contenuto (testo, immagine o sfondo) viene visualizzato sullo schermo. Lo streaming migliora FCP inviando immediatamente la shell HTML: il browser può visualizzare il layout, la navigazione e qualsiasi testo above-the-fold non appena arrivano i primi blocchi.

Con l'SSR sincrono (renderToString), il browser non riceve alcun HTML finché l'intero rendering non è completato. Con lo streaming, il browser riceve la shell HTML entro pochi millisecondi dalla richiesta: il layout e il contenuto statico compaiono quasi immediatamente, riducendo drasticamente FCP.

LCP misura il momento in cui viene visualizzato l'elemento visibile più grande nella viewport, in genere un'immagine hero o un'intestazione di grandi dimensioni. Lo streaming migliora LCP se l'elemento LCP fa parte della shell (e non si trova all'interno di un confine Suspense), poiché la shell viene trasmessa prima delle sezioni che dipendono dai dati.

Un'ottimizzazione fondamentale consiste nel progettare la pagina in modo che l'elemento LCP, ovvero la sezione hero, l'intestazione principale o l'immagine in evidenza, si trovi al di fuori di qualsiasi confine Suspense. Se l'elemento LCP si trova all'interno di un confine Suspense in attesa dei dati, lo streaming non può migliorare LCP finché tali dati non vengono risolti.

TTI misura il momento in cui la pagina risponde in modo affidabile all'input dell'utente, senza Long Tasks che blocchino il thread principale. Lo streaming combinato con l'idratazione selettiva riduce TTI distribuendo il lavoro di idratazione nel tempo invece di eseguire una singola grande attività di idratazione sincrona dopo il download di tutto il JavaScript.

Il Time to First Byte (TTFB) è determinato dalla latenza di rete e dal tempo di elaborazione del server prima dell'invio del primo byte. Lo streaming non modifica TTFB: è qui che il rendering edge può essere d'aiuto. Perché lo streaming migliori FCP, è necessario prima avere un TTFB basso; altrimenti si sta semplicemente trasmettendo in streaming da un origin lento.

La vista filmstrip di WebPageTest mostra una sequenza di screenshot acquisiti ogni 100 ms durante il caricamento della pagina. Una pagina con streaming mostra il layout che compare rapidamente, seguito dal riempimento progressivo delle sezioni. Una pagina senza streaming mostra uno schermo vuoto seguito da una pagina completamente renderizzata all’improvviso: una differenza visiva evidente.

Un benchmark significativo confronta la stessa pagina renderizzata in due modi: con lo streaming RSC di Next.js abilitato e con il tradizionale SSR sincrono. Utilizzi WebPageTest con condizioni di rete fisse, ad esempio Fast 3G e un rallentamento della CPU di 4x, quindi confronti le metriche FCP, LCP e TTI su 3 esecuzioni del test per ottenere una confidenza statistica.

La scheda Network di Chrome DevTools contiene un menu a discesa "Throttling" con preset come Fast 3G e Slow 4G. Fast 3G (1.6 Mbps, 150ms RTT) accentua la differenza tra streaming e assenza di streaming, perché amplifica il tempo necessario per scaricare l’intero documento HTML, rendendo visibili i vantaggi dello streaming incrementale.

Interaction to Next Paint (INP) misura il tempo che intercorre tra un’interazione dell’utente e il paint successivo. Nel 2024 ha sostituito FID come Core Web Vital. Lo streaming riduce l’INP dando priorità all’hydration dei componenti interattivi con cui è più probabile che l’utente interagisca per primi, riducendo il tempo di blocco prima che tali componenti diventino reattivi.

La configurazione con il maggiore impatto combina l’edge rendering (TTFB ridotto grazie a un PoP vicino), lo streaming (distribuzione progressiva dell’HTML) e l’hydration selettiva (elaborazione progressiva del JavaScript). Insieme, queste tre tecniche riducono al minimo tutte le principali metriche delle prestazioni durante l’intero ciclo di caricamento.

Quale metrica delle prestazioni migliora più direttamente lo streaming di React per i contenuti above the fold?

Lo streaming migliora più direttamente l’FCP distribuendo immediatamente lo shell HTML e migliora l’LCP quando l’elemento LCP si trova nello shell. Il TTI migliora grazie all’hydration selettiva, che distribuisce il lavoro JavaScript nel tempo. Il TTFB non cambia: per intervenire su questo valore utilizzi l’edge rendering. Utilizzi la vista filmstrip di WebPageTest e il throttling di Chrome DevTools per misurare l’impatto dello streaming e ottimizzi l’INP come metrica principale dell’interattività nei Core Web Vitals.