Optimization Experiments with Blog

2 minute read

I’m planning on making the following changes to the blog:

  • Future posts will have a justified text alignment, as long as its possible.
  • All HTML on this site will be minified. This is a backend change and if the job is done properly, the audience shouldn’t notice any changes, except the one intended change that the blog should load faster and save a few kilobytes of bandwidth for the audience.

Part I - Justified Alignment

I’m planning to migrate some of the existing posts to this alignment as well, and I have just completed a test of several approaches to achieve this.

  1. The first approach was to use attribute list definitions, supported by kramdown parser (used in this blog). Going with this approach requires me to add a {: .text-justify} to every paragraph I’ve written. It’s a tedious process, but one that gives me absolute control.
  2. The second option was to use javascript to add text-justify class to the page body. No need to modify any existing posts, easily doable and the easiest approach of them all. Problem is, it can mess up any future efforts for tinkering with page layouts, or if I need to have different layout for a specific page, I won’t be able to turn this off.
  3. The final approach is to use a <div> with text-justify class and the attribute markdown=1 to enable markdown parsing within the tag. It adds the least number of bytes to the compiled html, no extra js requests, plus its simple to use and best of all, easy to turn off for a specific instance. The only downside I see, is that, I’ll need to modify all my existing posts to which I wish to apply this layout (almost all of them). Since there are very few posts for now, that’s not a problem, but someone with a large number of posts will definitely need to write a script to get things done.

I’ll probably go with the 3rd approach.
PS: This text alignment of this post was done using the 3rd approach. Seems to well work on both desktop and mobile devices too.

Part II - Minifying HTML

I also noticed that the site HTML has never been minified, which presents another optimization opportunity. There are a few jekyll plugins to provide this functionality, but they are quite tedious to setup. Finally, Phil Hawksworth’s netlify plugin came to my rescue: netlify-plugin-minify-html. So, a big shoutout to Phil and the Netlify team (technically it should be just Netlify, since he’s a part of the Netlify team, but it’s his work, so here goes) for figuring out these scenarios and making plugin integration painless.

I still need to work out the proper configuration for my use-case, so I’ll check back on that later.

UPDATE: All pages on this blog are now minified. I was lucky to pick up this exercise just in time for Phil to release an important fix which was blocking the correct minification of the blog pages. Readers are welcome to have a look at the issue I faced and our discussion here: https://github.com/philhawksworth/netlify-plugin-minify-html/issues/5

Updated:

Use the form below to send any feedback.