Compress Your HTML in Jekyll

Just like with CSS and JavaScript, HTML output can be compressed and minified by removing whitespace, new lines, comments and even removing certain optional closing tags, making for smaller file sizes. Look at the source of this page for example to see the result of such compression. With Jekyll, a plugin called jekyll-compress-html helps you do just that. The plugin uses pure Liquid syntax to accomplish the HTML compression, so it doesn’t depend on anything.

Installation

Get started with the plugin in two simple steps:

• Download and extract the plugin’s compress.html file and place it in the _layout folder of your Jekyll setup.
• In your topmost plugin, often default.html, add the following Front Matter:

---
layout: compress
---

Usage

Now that the plugin is installed and setup, you can configure its exact behavior in your _config.yml file. For example:

compress_html:
  clippings: all
  comments: [""]
  endings: [html, head, body, li, dt, dd, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th]
  profile: false
  blanklines: false
  ignore:
    envs: []

And here’s a quick breakdown of the configuration options:

• clippings: An array of elements around which whitespace will be removed. Use the all keyword to include all the elements that are safe to manipulate. pre will be ignored to preserve whitespace.
• comments: An array with the start and end tags for comments to be removed. Notice the extra spaces, so that comments that don’t have that whitespace will be kept.
• endings: An array of optional end tags, which will be removed. Use the keyword all to remove all of them. In the above example I’m specifying all the optional end tags except for p.
• profile: Turn this flag to true in development mode to see a table added at the end of your page that displays a breakdown for the elements on the page.
• blanklines: Turn this flag to true if you want to collapse only blank lines and keep line breaks intact non-blank lines.
• ignore.envs: An array of Jekyll environment names where the compress layout should be turned off. This can be usefull if you want to turn compression off in development mode.
• startings: An array of optional start tags, which will be removed. For example: startings: [html, head, body]