Sep 05, 2019

Minifying static HTML and CSS with sed

This site runs on Pelican, a static site generator. That means the site is already very small, but why stop there? If something's worth doing it's worth overdoing. Using sed has the advantage of not having to install anything, because it's already available on all sane operating systems.

Minifying CSS

The codesnippet below is what I use in my post-receive-hook before copying everyting to the target-folder.

find output/ -type f -name '*css' -exec sed -i -r
:a;N;$!ba;s/\n//g;s/([:,]) /\1/g;s/ ([{}])/\1/g;s/ > />/g;s/\t//g;s/ {2,}/ /g;' {} \; -print

Just put in your deploy-script/commit-hook/whatever, and you'll shave bytes of your page.

 $ wc -c static/css/screen.css
 5772 static/css/screen.css
 $ curl -s https://hax0r.se/theme/css/screen.css|wc -c
 4852

Almost a thousand bytes! *gasp*

Minifying HTML

This can probably be improved, but it doesn't mess up my codeblocks like all the other methods I tried.

find output -type f -name '*html' -exec sed -i -e \
':a;N;$!ba;s/>\s*</></g' {} \;

As with the previous line, put it on your git-hook. Savings are even more massive with HTML, it seems, 1437 bytes.

 $ curl -s https://hax0r.se/index.html|wc -c
 7398
 $ curl -s https://hax0r.se/index.html|wc -c
 5961

Minifying a site as small as mine is probably a bit unnecessary, but writing regular expressions is fun.