Nuxt, Storyblok & Netlify
summary
A real project uses Nuxt + Storyblok + Netlify and Lighthouse to cut load time: preloads for critical images and JS, preconnect for third parties, lazy facades for YouTube, code‑splitting, purge/Tailwind for unused CSS, and brotli served by Netlify. The site is built and measurable — Lighthouse shows CLS 0.0396 — image CDN returns WebP and on‑the‑fly resizing so responsive assets land correctly, and overall payloads shrink and navigation becomes noticeably faster.
AI-written summary · about
chapters (17)
- 0:00Web performance journey
- 1:25Key performance metrics
- 3:10Preloading critical resources
- 4:59Preconnecting to third-parties
- 6:24Lazy-loading with facades
- 8:49Eliminating render-blocking JS/CSS
- 10:14Minifying JS/CSS files
- 12:47Text compression for smaller payloads
- 13:51Removing duplicate modules
- 15:59Reducing JS execution time
- 19:07Avoiding layout shifts
- 21:38Optimizing images
- 27:42Replacing GIFs with video
- 28:48Preloading LCP images
- 31:16Text visible during font load
- 32:20Common performance pitfalls
- 35:32Summary
related talks
21mNuxt Performances
33mHow Nuxt 3 is allowing us to build faster applications?
38mThe magical combination for creating a modern website
25mHow we are optimizing Nuxt without removing features in VueStorefront
51mJAMstack: Silly name, serious stuff
26mBe Lazy, Be Smart, Be Nuxt.
42mBuilding quick apps in 2018
26mBuilding for the Edge