Table of Contents

URL: https://www.progressiverobot.com/jekyll-compress-html/

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

compress illustration for: 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]<^>