Compress Your HTML in Jekyll

Published on January 17, 2017


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.


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


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

  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
    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 our products

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel