// Tutorial //

Compress Your HTML in Jekyll

Published on January 17, 2017
Default avatar

By Alligator.io

Compress Your HTML in Jekyll

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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]

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up now
About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!