Improve Your Web Performance with R… Hydration Strategies

on YouTube ↗17m

" summary

Explains how client-side hydration — the process of making server-rendered JavaScript pages interactive — causes significant performance bottlenecks and harms Core Web Vitals (FID/INP) and user experience. Describes strategies to orchestrate and prioritize component hydration (selective/deferred/critical-path hydration) to speed up interactivity, improve UX and SEO using existing JavaScript frameworks.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:48Performance issues
3. 3:15Cannibalization and FID
4. 5:02Optimizing hydration
5. 6:42Progressive enhancement
6. 8:50Islands architecture
7. 10:58Progressive hydration
8. 13:21Concrete examples
9. 14:45Other patterns and tools
10. 16:30Results and conclusion

" related talks

• 40mThe digital age of hydration: understanding types of hydration for web useNicolas Frizzarin · Voxxed Days Luxembourg 2023
• 33mRendering on the Web: Performance Implications of Application ArchitectureJason Miller, Houssein Djirdeh · Google I/O 2019
• 23mKeeping Static Site Rendering Cool with React HydrationMonica Powell · React Rally 2020
• 31mFaster content websites via SSR and progressive hydration of Web ComponentsThomas Allmer · React Finland 2022
• 35mHydration, Islands, Streaming, Resumability... Me, Oh My!Matheus Alburquerque · React Alicante 2023
• 30mHigh Performance in the Critical Rendering PathNicolás Bevacqua · JSConf Colombia 2015
• 29mHigh Performance in the Critical Rendering PathNicolás Bevacqua · NEJS Conf 2015
• 01h 03mSpeed up your Web ApplicationSebastian Springer · W-JAX 2018