Using µcompress to dramatically optimize static assets
A micro, all-in-one, compressor for common Web files
10MB overall save
Here some stats about the dramatic change it had on the static assets:
~/D/p/c/_site (master ↩) du -sh . 44M . ~/D/p/c/_site (master ↩) ucompress --source ./ --dest ./ ~/D/p/c/_site (master ↩) du -sh . 34M .
It compresses the following assets (taken from the README):
- css files via csso
- gif files via gifsicle
- html files via html-minifier
- jpg or jpeg files via jpegtran-bin
- js files via uglify-es
- png files via pngquant-bin
- svg files via svgo
- xml files via html-minifier
As you can see, I managed to save ~10MB on my
_site folder, built with devblog. That's huge.
Pagespeed says thanks
Previously, I manually optimized images with
mogrify (from the
imagemagick family). Through Cloudflare, the assets where compressed and optimized.
That was it.
And I already had a pretty decent score on pagespeed insights:
This were the assets loaded for the homepage of cri.dev:
And after using
I have around 400+ compiled assets (using
devblog) and ~150 images for this blog.
~/D/p/c/_site (master ↩) find . -type f | wc -l 417 ~/D/p/c/_site (master ↩) find . -type f | grep images | wc -l 147
ucompress saves me a bit of time when synching the assets from the
_site folder to my S3 bucket and the overhead of running it on the CI is negligible.
There are no excuses to optimize your static files now.
npx ucompress --help # or install globally npm i -g ucompress
I am using it this way on my GitHub Actions workflow:
- first i build the blog with devblog
- optimize the assets with
npx ucompress --source ./_site --dest ./_site(see the
- run UAT with cypress
- sync S3 bucket
- optionally clear cloudflare cache
- send myself a telegram message once done
Share on Twitter