Optimizing for Super Sonic Speed in Vue.js & Gridsome
summary
Vue and Gridsome projects speed up by lazy-loading media, splitting code, and using PWAs and service workers; images are cited as ~60% of bytes so swapping a tiny blurry placeholder for the full image via g-image (set width/height/quality) cuts load time. Use IntersectionObserver-backed libraries like lozad or vue-lazyload, optimize delivery with Cloudinary auto-quality, audit with Chrome Lighthouse, and inspect bundles with webpack-bundle-analyzer to find oversized assets.
AI-written summary · about
chapters (18)
- 0:00Start
- 2:09What Is Vue Js
- 4:17Easy To Maintain
- 9:24Performance in Vgs
- 9:36Stop Over Engineering
- 10:50Page Delivery
- 11:38Lazy Loading
- 13:22What Happens When Media Files Are Being Lazy Loaded
- 14:15Passive Event Listener
- 16:04Why Should We Lazy Load
- 17:05Mobile Data and Bandwidth Saving
- 17:44Tools
- 20:38Working with Progressive Web Apps
- 21:29Progressive Web Apps in Vue Js
- 23:47Crop Image from the Same Url
- 24:10Chrome Lighthouse
- 27:08Webcam Analyzer
- 29:33Network Monitoring
related talks
33mImages blast off at the speed of Jamstack!
26mImproving Page speed Performance with Vue 3
10mSub-second Vue
22mModern Web Apps Performance Tricks with PWA and Vue
24mSuperpowers of browser's Web API
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
33mImpatience is a virtue
27mBuilding Blazing Fast Sites with Gridsome