Kurt McKee

lessons learned in production

Archive

CSS minification and cache busting

Posted 15 December 2019 in website

I've set up CSS minification and cache busting on the site.

Pelican's default theme uses a total of five stylesheets. main.css pulls in four others, which means that your browser has to load one completely before figuring out that others must be downloaded. The files are not minified, so there's some additional waste introduced there, too.

To fix this, I've incorporated the Pelican assets plugin, which allows me to combine and minify the stylesheets. Five requests for ~4KB of gzip'd data has been reduced to one request for ~3KB of gzip'd data. Also, the final filename includes a hash of the file. This is called cache busting, and it guarantees that I can make changes to the site that will get picked up by your browser. Nice!

There are some problems with the current setup, though. The primary issue is that the default CSS minifier, cssmin, is no longer maintained. Right now it's not a huge problem but I'll need to eventually migrate to maintained software. The other issue is that I had to manually modify the CSS files because cssmin doesn't automatically incorporate the @import'ed files. Again, not a big problem but I want smarter software.

I've also fixed a small number of broken links in my old content. It turns out that websites have been changing their URL's over the years! It's been 21 years since its publication and developers still don't know: Cool URI's Don't Change (written in 1998, still true in 2019).

There's still a lot of exciting work to do on the site!

☕ Like my work? I accept tips!