PageSpeed 100 with JavaScript Hydration and Islands Artwork

Siegfried, deploy!

Helping you develop fast websites that scale. We're Steffen & Dominik, developers, friends and agency owners since 2011. Join us for hands-on tools and tactics to build and maintain large scale WordPress websites.

All Episodes

Siegfried, deploy!

PageSpeed 100 with JavaScript Hydration and Islands

January 26, 2023 • Bleech

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