Getting 0.5 seconds load time on your blog

In my previous post back in 2016 I got page load time down from 5s to 1.5, and here my objective is to get around 0.5s.

jarboleda.me performance graphic

jarboleda.me performance graphic

For that purpose, I´ll be using the following technologies:

Stats before tuning up

performance after tuning up On top of previous optimizations, I decided to go for a static website, after all, most of my content is static. The only exception is the sidebar, but we’ll get to that later

Actions taken

  • Optimizing images is important to save bandwidth. To do this, I crafted a script to resize all the images used in the blog to minimize their size and maximize their quality.
  • Cloudflare’s Brotli compression for HTLM. JS and CSS are minized with the framework I’m using, so I just need HTML from Cloudflare.
  • Cloudflare’s cache to optimize response time.
  • Defer parsing of JS allows the browser to load the visible content faster. This was easy, I only use a couple of JS and I moved them into the footer.
  • Load dynamic content asynchronously once the page is loaded. I achieves that using JS on my sidebar, including a preloader for cool-looking purposes

Stats after tuning up

Well, you can see them on the top image of this post, load time can go down even to 0.4s in the best cases. Also, the complexity of the website is much lower with a static content management system like Hugo.

Resources