Measuring Streaming Impact: FCP, TTI, and LCP
Benchmark the real-world performance difference of streaming SSR vs blocking SSR using Lighthouse and WebPageTest.
FCP: First Contentful Paint
FCP measures the time from navigation start to when the first piece of content (text, image, or background) is painted to the screen. Streaming improves FCP by sending the HTML shell immediately — the browser can paint the layout, navigation, and any above-fold text as soon as the first chunks arrive.
How Streaming Improves FCP
With synchronous SSR (renderToString), the browser receives no HTML until the entire render is complete. With streaming, the browser receives the HTML shell within milliseconds of the request — the layout and static content appear almost immediately, dramatically reducing FCP.
All lessons in this course
- React 18 Streaming: How renderToPipeableStream Works
- Suspense Boundaries and Streaming Priority
- Progressive Hydration with Selective Hydration
- Measuring Streaming Impact: FCP, TTI, and LCP