Progressive Rendering: Improve Performance on Slower Networks

on YouTube ↗23m

" summary

Progressive rendering claims to cut perceived load on slow networks by streaming server HTML in chunks, stitching snippets into the DOM with small inline scripts and hydrating later with React’s concurrent mode and progressive hydration. Demo uses a 1 MB bundle that yields ~6s FCP on mobile and ~25s on very slow networks for client rendering, while streaming delivers secondary content before the bundle finishes, showing the technique works in practice and improves FCP/FMP.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 7:09SSR - Placeholders
3. 8:22HTML Streaming
4. 9:35Progressive Rendering
5. 10:34Progressive Hydration

" related talks

• 25mProgressive Rendering – how to make your app render soonerDenis Rechkunov · JSConf Iceland 2016
• 26mProgressive HTML Rendering 101Damodaran S · XtremeJS 2023
• 31mStreaming React for Faster UIsTejas Kumar · React Boston 2018
• 33mRendering on the Web: Performance Implications of Application ArchitectureJason Miller, Houssein Djirdeh · Google I/O 2019
• 30mHow Streaming Can Supercharge ReactSasha Aickin · ReactEurope 2017
• 25mProgressive Image RenderingJosé M. Pérez · Render Conference 2017
• 25mProgressive image renderingJosé M. Pérez · CSSConf Australia 2016
• 27mOptimizing the Critical Rendering Path in ReactAlex Moldovan · React Day Berlin 2018