I originally created this website using the django framework. I liked it a lot more than the wieldy wordpress and the more difficult drupal and you could do a lot more with it. But having more power also had its consequences. I only used a small subset of the available features and I didn’t used them often. Using django for a blog web application felt like overkill and it made it more complicated and heavy than it had to be. So when I learned more about Jekyll the decision to switch was quickly made.

Jekyll is far simpler and it is still more than powerful enough to do the things I wanted to do. Additionally it uses ruby which I really like a lot since I’m learning and using rails.

Optimizing the critical rendering path

When using Django I wrote my blog posts in pure HTML so I could directly use those HTML formatted posts with jekyll. The only thing I wanted to change was the code snippet highlighting for which I was using prism.js.

Using prism resulted in two significant delays in how fast the browser could render the web page on screen. First off, when the browser hits the script tag for prism.js the DOM construction is blocked until the script has finished executing resulting in a delay of the initial render. Second, because prism.js is included as an external script tag, the browser also has to wait until the script has been fetched (from cache or a remote server) which results in an additional delay of tens to thousands of milliseconds. This last delay could be partially avoided by using the async keyword in the script tag which will tell the browser to just keep constructing the DOM without waiting for the script to become available.

To resolve these issues I just switched to the jekyll built in syntax highlighting which doesn’t use any javascript. When jekyll generates my website it uses Rouge to statically highlight the marked code snippets.