CSS minification and cache busting
Posted 15 December 2019 in websiteI'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!