Jekyll uses liquid to minify HTML! While minifying CSS and JS is already common practice, compressing HTML is not. Because Jekyll posts and pages are written in markdown, you may not be able to minify them entirely using a task runner. Learn how to use this way to minify Jekyll HTML.

While minifying CSS and JS is common practice, minifying HTML is not as prevalent. Perhaps because there isn’t much to minify in comparison to static files like CSS and JS. However, it does aid in the faster loading of your website, especially on 2G connections. PageSpeed also suggests HTML minification.

Minifying my Jekyll blog has provided me with significant benefits. What if I told you that minifying cuts file size by more than 20%? Perhaps because the un-minified version has a lot of blank spaces and new lines. And that’s an improvement I shouldn’t overlook.

How do I minify the HTML in Jekyll?

So far, I have never applied a command-line interface in my courses. Not because I dislike it, but I believe it is tough for novices to grasp. Similarly, you may minify HTML using Grunt or Gulp task runners, although these technologies may be unfamiliar to a newbie. And why do we need a task runner when we have an automated minified that does everything? In addition, I prefer solutions that do not require plugins.

Jekyll
Jekyll

Now, in order to reduce the size of the Jekyll blog,

Step 1: Download and compress the HTML.

Download the compress.html file from this link. It should be in the Installation section.

Step 2: Insert Compress into layouts.

Put this HTML file in the _layout folder.

Step 3: Include front matter in the default layout.

Open default.html in the _layouts folder and paste the front matter below at the top of the page. If you don’t have default.html, utilize a top-level layout that is shared by all pages.

---
layout: compress
---

<!DOCTYPE html>
<html>
.
.
.

</html>

Step 4: Save your modifications.

Changes should be saved and committed. The compress layout replaces contiguous whitespace with a single whitespace character by default. If you wish to add other settings, use this snippet in your _config.yml file.

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

Read the instructions for more information on these options.

All of your web pages that use the layout default, directly or indirectly, will now be minified. You can specify certain pages to minify by including the front matter mentioned above.

Jekyll
Jekyll

So I hope this lesson assisted you in optimizing your Jekyll blog. Please let me know if there is a better method to handle this in the comments area. For having latest Jekyll themes browse here!

Leave a Comment

No Comment