Compress HTML in Jekyll

A Jekyll layout that compresses HTML. At a glance:

The layout is written in pure Liquid, no plugins are required.

Installation

  1. Get the latest release. Extract compress.html and copy it to your _layouts.
  2. Reference the compress layout in your highest-level layout. For example in _layouts/default.html:
---
layout: compress
---

<html>
{{ content }}
</html>

Now all your markup will be processed by the compress layout.

You can disable compression on a page-by-page basis with the compress_html frontmatter. For example:

---
compress_html: false
---

This page will not be compressed

Configuration

By default the layout replaces contiguous whitespace with a single whitespace character. Additional settings can be specified in the compress_html key inside the _config.yml file. The default configuration is:

compress_html:
  clippings: []
  comments: []
  endings: []
  ignore:
    envs: []
  blanklines: false
  profile: false
  startings: []

clippings

An array of elements to clip whitespace around them. The following elements may be safe to clip:

Example:

compress_html:
  clippings: [div, p, ul, td, h1, h2]

Use the shortcut all to clip all safe elements.

compress_html:
  clippings: all

comments

An array of exactly two comment tags to strip comments enclosed by them. The first string must be the start tag, the second must be the end tag. Example:

compress_html:
  comments: ["<!-- ", " -->"]

Whitespaces around the tags prevent conditional comments from being deleted.

Use the shortcut all to remove all comments.

endings

An array of elements with optional end tags. These end tags will be removed.

Example:

compress_html:
  endings: [p, li, td]

Use the shortcut all to remove all optional endings.

compress_html:
  endings: all

startings

An array of elements with optional start tags. These start tags will be removed.

Example:

compress_html:
  startings: [html, head, body]

profile

A boolean value to turn on the profile mode. If true, the layout creates a HTML table after the compressed content. The table contains the file size in bytes during the compressing steps.

compress_html:
  profile: true

The profile table provides attributes for styling and reading. The id ends with build’s timestamp to be unique enough.

<table
  id="compress_html_profile_YYYYMMDD"
  class="compress_html_profile"
>

This page itself is compressed in profile mode for educational purposes only. The table is below. Please don’t profile in public.

ignore.envs

An array of environments given by ENV["JEKYLL_ENV"] where the compress layout is ignored. This may be useful while developing a website.

Use the shortcut all to disable compression in all environments.

blanklines

A boolean value to turn on blanklines mode. This mode will only remove lines consisting of whitespace and leave other lines alone.

compress_html:
  blanklines: true

Full-blown sample

compress_html:
  clippings: all
  comments: ["<!-- ", " -->"]
  endings: all
  ignore:
    envs: [local]
  blanklines: false
  profile: true
  startings: [html, head, body]

Restrictions

Examples

This page itself is compressed by the layout. It’s hosted by GitHub in the gh-pages branch.

Look how others use the layout on GitHub too.

Development

Feel free to submit bugs, patches, and questions in the repository.

Take a look at project’s test/source and test/expected directories. They contain self-explanatory specifications. Run rake to test the layout.

Reviews


© 2014–2024 Anatol Broder. Released under the MIT License.

Step Bytes
raw 14079
endings 13831
startings 13819
comments 13797
collapse 13631
clippings 13529