Streaming-Auswirkungen messen: FCP, TTI und LCP

FCP misst die Zeit vom Beginn der Navigation bis zu dem Zeitpunkt, an dem das erste Inhaltselement — Text, Bild oder Hintergrund — auf dem Bildschirm dargestellt wird. Streaming verbessert FCP, indem die HTML-Shell sofort gesendet wird. Der Browser kann das Layout, die Navigation und alle Texte im sichtbaren Bereich darstellen, sobald die ersten Blöcke eintreffen.

Bei synchronem SSR mit renderToString erhält der Browser kein HTML, bevor das gesamte Rendern abgeschlossen ist. Beim Streaming erhält der Browser die HTML-Shell innerhalb weniger Millisekunden nach der Anfrage. Das Layout und die statischen Inhalte erscheinen nahezu sofort, wodurch sich FCP erheblich verkürzt.

LCP misst den Zeitpunkt, an dem das größte sichtbare Element im Viewport dargestellt wird — typischerweise ein Hero-Bild oder eine große Überschrift. Streaming verbessert LCP, wenn sich das LCP-Element in der Shell und nicht innerhalb einer Suspense-Boundary befindet, da die Shell vor allen datenabhängigen Abschnitten gestreamt wird.

Eine wichtige Optimierung besteht darin, die Seite so zu entwerfen, dass sich das LCP-Element — der Hero-Abschnitt, die Hauptüberschrift oder das hervorgehobene Bild — außerhalb jeder Suspense-Boundary befindet. Wenn das LCP-Element innerhalb einer Suspense-Boundary auf Daten wartet, kann Streaming LCP erst verbessern, sobald diese Daten aufgelöst sind.

TTI misst den Zeitpunkt, ab dem die Seite zuverlässig auf Benutzereingaben reagiert — ohne Long Tasks, die den Hauptthread blockieren. Streaming in Kombination mit selektiver Hydration verkürzt TTI, indem die Hydration-Arbeit über einen längeren Zeitraum verteilt wird, statt nach dem Download des gesamten JavaScripts eine einzige große synchrone Hydration-Aufgabe auszuführen.

Die Time to First Byte (TTFB) wird durch Netzwerklatenz und die Verarbeitungszeit des Servers bestimmt, bevor das erste Byte gesendet wird. Streaming ändert TTFB nicht — hierbei hilft Edge-Rendering. Damit Streaming FCP verbessert, benötigen Sie zunächst eine niedrige TTFB. Andernfalls streamen Sie lediglich von einem langsamen Ursprungserver.

Die Filmstreifenansicht von WebPageTest zeigt eine Folge von Screenshots, die während des Ladens der Seite alle 100 ms aufgenommen werden. Bei einer Streaming-Seite wird das Layout früh sichtbar und anschließend schrittweise mit Inhalten gefüllt. Bei einer Seite ohne Streaming bleibt der Bildschirm zunächst leer, bevor plötzlich die vollständig gerenderte Seite erscheint – ein deutlicher visueller Unterschied.

Ein aussagekräftiger Benchmark vergleicht dieselbe Seite, die auf zwei Arten gerendert wird: mit aktiviertem Next.js-RSC-Streaming und mit traditionellem synchronem SSR. Verwenden Sie WebPageTest mit festen Netzwerkbedingungen (z. B. Fast 3G und einer CPU-Verlangsamung um den Faktor 4) und vergleichen Sie die Metriken FCP, LCP und TTI über drei Testläufe hinweg, um statistisch belastbare Ergebnisse zu erhalten.

Der Tab „Network“ in den Chrome DevTools verfügt über ein Dropdown-Menü „Throttling“ mit Voreinstellungen wie Fast 3G und Slow 4G. Fast 3G (1.6 Mbps, 150ms RTT) verstärkt den Unterschied zwischen Streaming und Nicht-Streaming, da die Downloadzeit für das vollständige HTML-Dokument stärker ins Gewicht fällt und die Vorteile der schrittweisen Übertragung sichtbar werden.

Interaction to Next Paint (INP) misst die Zeit von einer beliebigen Benutzerinteraktion bis zur nächsten Darstellung. INP hat FID im Jahr 2024 als Core Web Vital abgelöst. Streaming reduziert INP, indem die Hydration der interaktiven Komponenten priorisiert wird, mit denen Benutzer voraussichtlich zuerst interagieren. Dadurch verkürzt sich die blockierende Zeit, bevor diese Komponenten reagieren können.

Die wirkungsvollste Konfiguration kombiniert Edge-Rendering (niedrige TTFB durch einen nahegelegenen PoP) mit Streaming (progressive HTML-Übertragung) und selektiver Hydration (progressive JavaScript-Verarbeitung). Zusammen minimieren diese drei Techniken alle wichtigen Performance-Metriken über den gesamten Ladezyklus hinweg.

Welche Performance-Metrik verbessert React-Streaming für Inhalte im sichtbaren Bereich am unmittelbarsten?

Streaming verbessert FCP am unmittelbarsten, indem es das HTML-Grundgerüst sofort überträgt, und verbessert LCP, wenn sich das LCP-Element in diesem Grundgerüst befindet. TTI verbessert sich durch selektive Hydration, die die JavaScript-Verarbeitung über einen längeren Zeitraum verteilt. TTFB bleibt unverändert – setzen Sie dafür Edge-Rendering ein. Verwenden Sie den Filmstreifen von WebPageTest und die Netzwerkdrosselung der Chrome DevTools, um die Auswirkungen von Streaming zu messen, und optimieren Sie INP als primäre Interaktivitätsmetrik der Core Web Vitals.