PageSpeed 100 with JavaScript Hydration and Islands

26/01/2023 33 min
PageSpeed 100 with JavaScript Hydration and Islands

Listen "PageSpeed 100 with JavaScript Hydration and Islands"

Episode Synopsis

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.Highlights00:00 Intro00:38 What is JavaScript Hydration?02:58 Strategies of Hydration04:41 What is so interesting about it?06:56 Making JavaScript execution effective11:32 Full hydration12:57 Biggest improvement with islands18:18 Load JS on current viewport22:25 Three approaches + 123:38 Inspiration from libraries25:43 Cut down JS as much as possible30:22 You need a wrapper31:32 Amazing results LinksFlynt: 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-observerMore from BleechBlog Posts (WordPress Development)Flynt (WordPress Starter Theme)VRTs (Visual Tests for WordPress)Siegfried, deploy! (YouTube Channel)