Using µcompress to dramatically optimize static assets

Published on
static x 4
assets x 2

µcompress is a lovely utility by WebReflection that compresses common static files.

A micro, all-in-one, compressor for common Web files

Using it since commit ce0a9e on this very website, in my GitHub Actions workflow.

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):

As you can see, I managed to save ~10MB on my _site folder, built with devblog. That’s huge.

10MB

Pagespeed says thanks

Previously, I manually optimized images with convert and 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:

score-100
score

Optimized assets

This were the assets loaded for the homepage of cri.dev:

assets-before

And after using ucompress:

assets-after

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

Using 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.

Use it!

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 main.yml workflow file)
  • run UAT with cypress
  • sync S3 bucket
  • optionally clear cloudflare cache
  • send myself a telegram message once done

Go ahead, copy it.

Thank you @WebReflection for ucompress ✌️

Here, have a slice of pizza 🍕