PageSpeed 100 with JavaScript Hydration and Islands
JavaScript can add significant weight to a website and is hard to optimize. JavaScript hydration concepts can significantly optimize JavaScript loading, parsing, and execution. We talk about the various techniques and how we implemented a custom islands architecture into Flynt, our WordPress Starter Theme for developers.
Highlights
00:00 Intro
00:38 What is JavaScript Hydration?
02:58 Strategies of Hydration
04:41 What is so interesting about it?
06:56 Making JavaScript execution effective
11:32 Full hydration
12:57 Biggest improvement with islands
18:18 Load JS on current viewport
22:25 Three approaches + 1
23:38 Inspiration from libraries
25:43 Cut down JS as much as possible
30:22 You need a wrapper
31:32 Amazing results
Links
Flynt: https://flyntwp.com/
webpack: https://webpack.js.org/
astro: https://astro.build/
is-land: https://is-land.11ty.dev/
qsa-observer: https://github.com/WebReflection/qsa-observer
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)