))
PageSpeed 100 with JavaScript Hydration and Islands
Manage episode 353634043 series 3419630
Content provided by Bleech. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Bleech or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
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)
47 episodes
Share
