Minifying HTML and CSS

Written by Evelyn House
Posted on September 30, 2016

Minification

This is the easiest method I use to keep my website’s footprint down. It takes all of the code on disk and removes comments and indentation while keeping proper formatting

find out \( -name "*.html" -or -name "*.css" \) \
    -exec htmlcompressor --compress-js --compress-css {} -o {} \;

Maximize Code Reuse

Frameworks makes this easy but don’t use one too bloated. Sure there are frameworks like bootstrap but skeleton does almost all of the same work at a fraction of the size. I personally use a subset of skeleton with my own written code for the theme of my blog.

Keeping Image Size Down

I’ve used jpegoptim for compression of images. It should be available in most repos and it’s easy to use. Important note to always --strip-all to remove image headers which might contain personal information.

jpegoptim --strip-all -m80 -o -p IMAGE.jpg

With a few tests I was able to get excellent compression rations with no visible differences. The -m flag can always be either raised or lowered to your own preferences.

[ehouse@myon]$ du -h image1.jpg
2.5M       image1.jpg
[ehouse@myon]$ jpegoptim --strip-all -m80 -o -p image1.jpg
image1.jpg 2560x1600 24bit N JFIF  [OK] 2637491 --> 649431 bytes (75.38%), optimized.
[ehouse@myon]$ du -h image1.jpg
636K       image1.jpg

Webserver Gzip

In my examples I use nginx but most modern webservers car capable of doing everything I did below.

Gzip on the Fly

This method will store plaintext files on disk and only compress files as they are sent over the wire. Nginx is smart about handling gzip compression for clients, all you do is enable it in the server config block. Clients unable to utilize gzip will not be sent gzip’ed files.

server {
    gzip on;
    gzip_types      text/plain application/xml;
    gzip_proxied    no-cache no-store private expired auth;
    gzip_min_length 1000;
    ...
}

Serving Gzip’ed Files

The will tell nginx to distribute the file.gz version only. If the client doesn’t support gzip compresses then nginx will decompress the file on the fly rather then compressing it. Since most clients these days support gzip this is a fair assumption to make. Unfortunately this feature isn’t included in most distributions of nginx so ensure it’s compiled in before reloading the config.

server {
    ...
    gunzip on
}

location / {
    gzip_static on;
}