Optimizing for Super Sonic Speed in Vue.js & Gridsome
summary
Vue and Gridsome optimizations focus on concrete wins: images are roughly 60% of bytes so lazy loading and async components cut initial payload and HTTP requests, saving mobile bandwidth. Gridsome’s <g-image> automatically serves a G-image blurry placeholder then swaps in the high‑quality file on viewport. Recommended tools are lozad and vue-lazyload for IntersectionObserver lazy loading, Cloudinary with q_auto for responsive images, Lighthouse audits and the webpack-bundle-analyzer plus the network tab to find and shrink heavy JS and media.
AI-written summary · about
chapters (8)
- 0:00Start
- 3:20Some Benefits
- 10:13Asynchronous Loading
- 11:13Lazy Loading
- 17:57Lozad, Installation
- 19:12Vue-Lazyload, Installation
- 23:44Chrome Lighthouse
- 26:51WebPack Bundle Analyzer
related talks
26mImproving Page speed Performance with Vue 3
33mImages blast off at the speed of Jamstack!
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
08mCreating a Website With Gridsome
27mBuilding Blazing Fast Sites with Gridsome
30mVueConf US 2021 | Looking through the VueFinder Henri Helvetica
33mImpatience is a virtue
10mSub-second Vue