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)
More episodes of the podcast Siegfried, deploy!
Rapid WordPress dev setups with wp-now
07/11/2023
Why Passkeys are the future
24/10/2023
What's New in Flynt v2.0
14/09/2023
HTMX is awesome and here's why
07/09/2023
Debugging Open Graph Images on Social Media
17/08/2023
ZARZA We are Zarza, the prestigious firm behind major projects in information technology.