Superpowers of browser's Web API

on YouTube ↗24m

" summary

Demo shows component-based lazy loading that splits bundles so initial load yields a 100 Lighthouse score while the third component downloads on scroll, a custom Intersection Observer hook ~30 lines replaces a 6 KB npm library, progressive image loading swaps a blurred LQIP for full-res on the image onload, useSWR prefetch/mutate caches hover-fetched API data, service workers plus content-addressable hashes control caching, and SSR / zero-kilobyte JavaScript frameworks (Astro Qwik) reduce shipped JS.

AI-written summary · about

" chapters (15)

1. 0:00Welcome
2. 0:59Critical thinking in web performance
3. 2:05Loading web performance
4. 3:53JavaScript bottleneck
5. 6:43Component lazy loading
6. 9:54Fewer libraries for performance
7. 11:20Web API custom hooks
8. 12:44Progressive image loading
9. 14:50Data fetching with caching
10. 17:42HTTP caching headers
11. 19:08Storage and service workers
12. 20:36Server-side rendering and progressive hydration
13. 21:40Edge computing
14. 22:02Zero KB JavaScript
15. 23:04Best performance hack

" related talks

• 24mSuperpowers of browser's Web APINikola Mitrovic · JSWorld Conference 2024
• 38mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · NDC Porto 2023
• 37mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · XtremeJS 2023
• 31mFaster content websites via SSR and progressive hydration of Web ComponentsThomas Allmer · React Finland 2022
• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 41mHow we make Web Apps lightning fast at Microsoft!Sean Thomas Larkin · Uphill Conf 2019
• 41mHigh-Performance Web UI with Web ComponentsCory Rylan · Reliable Web Summit 2021
• 46mSpeed Matters: Client Side Performance Improvement Tips & TricksSrinivasan, Ashay · Agile India 2022