Reducing whitespace in the HTML generated by Jekyll
The output HTML of Jekyll-based sites may contain quite a lot a whitespace. This is especially noticeable with pages relying heavily on Liquid tags with conditional logic or looping.
For example, here is a section of the author-profile.html template from the theme Minimal Mistakes :
<ul class="author__urls social-icons">
{% if author.location %}
<li itemprop="homeLocation" itemscope itemtype="http://schema.org/Place">
<i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> <span itemprop="name">{{ author.location }}</span>
</li>
{% endif %}
{% if author.uri %}
<li>
<a href="{{ author.uri }}" itemprop="url">
<i class="fa fa-fw fa-chain" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].website_label | default: "Website" }}
</a>
</li>
{% endif %}
{% if author.email %}
<li>
<a href="mailto:{{ author.email }}">
<meta itemprop="email" content="{{ author.email }}" />
<i class="fa fa-fw fa-envelope-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].email_label | default: "Email" }}
</a>
</li>
{% endif %}
{% if author.keybase %}
<li>
<a href="https://keybase.io/{{ author.keybase }}" itemprop="sameAs">
<i class="fa fa-fw fa-key" aria-hidden="true"></i> Keybase
</a>
</li>
{% endif %}
{% if author.twitter %}
<li>
<a href="https://twitter.com/{{ author.twitter }}" itemprop="sameAs">
<i class="fa fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter
</a>
</li>
{% endif %}
Here is the HTML output :
<ul class="author__urls social-icons">
<li itemprop="homeLocation" itemscope itemtype="http://schema.org/Place">
<i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> <span itemprop="name">Ireland</span>
</li>
<li>
<a href="https://twitter.com/TheShellNut" itemprop="sameAs">
<i class="fa fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter
</a>
</li>
The reason why there is so much whitespace between the 2 list items is that Liquid tags (like {% if ... %}) always render a blank line, even when they evaluate to false.
And this is not the worst case : imagine if we were looping through the above section N times, then it would generate N times as much whitespace.
I’m not sure how this could possibly be useful and it makes the HTML output less readable. Plus, this might impact performance since the HTML file is bigger.
So, here is a simple trick to prevent Liquid tags from generating whitespace : replace this {% ... %} by this {%- ... -%} .
This is a fairly new Liquid feature (introduced in 4.0.0) and it is documented here : Whitespace control. This can safely be used with any Jekyll site hosted on GitHub Pages because the GitHub Pages gem enforces this version of Liquid as a dependency.
Using this Liquid tag syntax in the above template section outputs the following HTML :
<ul class="author__urls social-icons"><li itemprop="homeLocation" itemscope itemtype="http://schema.org/Place">
<i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> <span itemprop="name">Ireland</span>
</li><li>
<a href="https://twitter.com/TheShellNut" itemprop="sameAs">
<i class="fa fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter
</a>
</li>
Much better, right ?
Generalizing the hyphen tag syntax across the site
An easy way to apply this tip to all Liquid tags across all files, is to use the “Search and replace” feature of your editor of choice.
For example, in Visual Studio Code, I right-clicked on the _layouts folder in the site’s repo, chose “Find in Folder…” and did that :
And then, I did the same for the _includes folder, since this is where there is the most Liquid stuff in a typical Jekyll theme.
The performance impact won’t be noticeable in most cases, because the file size reduction is not huge. For example, the index.html of this site went from 22 KB to 17.4 KB. In the unlikely case where you do notice a performance boost, then you would be better off using proper minification.
But still, more readable and less wasteful HTML is nice to have.
Leave a Comment
Your email address will not be published. Required fields are marked *