Minify Html in your static website (Hugo or Jekyll)

Comparing normal and Minified HTML
Comparing normal and Minified HTML (License: CC BY 4.0)
  • Published: August 15, 2018

Overview

This is a simple script to Minify HTML pages after they have been generated locally with a static website generator like Hugo or Jekyll.

Hugo version 0.47 introduced the --minify command that makes it possible to build the code simply running hugo --minify

Reasons

Minifying HTML pages:

  • increase downloading times as it reduces web-page sizes
  • accelerate parsing times

Probably you have already found this at Google’s PageSpeed Insights recommendation to Minify HTML after testing your website:

Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up download and parse times.

PageSpeed Tools results

Minifier

We will use the best minifier at the moment: tdewolff/minify in its command line version: https://github.com/tdewolff/minify/tree/master/cmd/minify

To install it run the following command:

go get -u github.com/tdewolff/minify

then you will have the minify command in your $GOPATH/bin.

Minify all HTML

To minify all the HTML pages in a directory and its sub-directories, official docs recommends the usage of $ minify -r -o out/ --match=\.html src to minimize all the files inside the src directory. But in my experience, it also removes non HTML files, so I recommend to traverse all the directories looking for HTML files with the find command.

First we look for HTML files in src: find ./src -name "*.html".

Then we execute the minifier for each file with the -exec parameter and replace the file with its minified version: find ./src -name "*.html" -exec minify -o {} {} \;

Finally we add the desired parameters, anyone from:

  • --css-decimals int: “Number of decimals to preserve in numbers, -1 is all (default -1)”
  • --html-keep-conditional-comments: “Preserve all IE conditional comments”
  • --html-keep-default-attrvals: “Preserve default attribute values”
  • --html-keep-document-tags: “Preserve html, head and body tags”
  • --html-keep-end-tags: “Preserve all end tags”
  • --html-keep-whitespace: “Preserve whitespace characters but still collapse multiple into one”
  • --xml-keep-whitespace: “Preserve whitespace characters but still collapse multiple into one”

For example let’s add --html-keep-document-tags --html-keep-end-tags, our final command would look like:

find ./src -name "*.html" -exec minify --html-keep-document-tags --html-keep-end-tags  -o {} {} \;

Minify Hugo’s generated HTML files

To minify Hugo webpages:

  1. Generate the website

$ hugo

  1. Minify all files ending in .html inside the public folder replacing the generated ones:

$ find ./public -name "*.html" -exec minify --html-keep-document-tags --html-keep-end-tags  -o {} {} \;

Minify Jekyll’s generated HTML files

To minify Jekyll webpages:

  1. Generate the website

$ jekyll build

  1. Minify all files ending in .html inside the __site folder replacing the generated ones:

$ find ./_site -name "*.html" -exec minify --html-keep-document-tags --html-keep-end-tags  -o {} {} \;

Conclusions

This is a command line approach to minify any website’s HTML files no matter what generator you are using.

Now all HTML files like this content:

<!doctype html>
<html lang="en" itemscope itemtype='http://schema.org/CollectionPage'>
    <head>
	<meta name="generator" content="Hugo 0.46" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<meta property="description"

Would have their white spaces stripped looking like:

<!doctype html><html lang=en itemscope itemtype=http://schema.org/CollectionPage><head><meta name=generator content="Hugo 0.46"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta property=description

References

Uruguay
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.
comments powered by Disqus
Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 ·