Know Your Clouds
low.html, a typical page, as an example. Minifying the JS saved almost 103K. (I typically output Sass with the
compressed option, so that was a wash.) A lot of the images were already optimised, but those went on a diet too. The lightbox library I used back then lazily loaded the full-size images – something I may or may not have appreciated at the time – but between all the images on the page, I got a total slim-down of about 28K.
It's not news that minifying JS and compressing images saves space, of course; but thanks to my new friend Grunt, I'm able to do it quickly, painlessly, and automatically.
- JS before minification: 227,988B
- JS after minification with
grunt-contrib-uglify: 122,837B (46% savings)
- Images before compression: 358,650B
- Images after compression with
grunt-contrib-imagemin: 330,303B (8% savings)
- Original page weight on initial load: 459K (onload: 3.08s)
- New page weight on initial load: 355K (onload: 1.45s) (23% file size savings, 53% faster load time)
- As it turns out, the by-now ancient lightbox library was slightly broken in Chrome, so I had to update it to the latest version. The new, fully-functional version weighs in at 345KB (onload: 1.52s).
- I ran into path length issues checking in the Grunt modules (which isn't always great practice anyway), so this will need an
npm installafter cloning before you can build.