Cutting Page Load Time in Half

I cut the average page load of this site in half. From just over 1 second on down to around 500 milliseconds by my manual testing in Chrome.

After I removed Google Analytics from the site it reminded me about the number of additional resources I was loading over http within each page. I started to then think about just how much a relative performance impact they can have. This then begs the question: did I them?. No. So I decided removed them.

These assets included:

  • Prismjs
    • I like prism for what it does but I don’t need fancy syntax highlighting.
  • An icon font loaded from a CDN
    • I moved to inline SVG’s instead.
  • A Google web font
    • I decided to move to using the system font for where I was using this.
  • Custom CSS
    • I made this inline. Generally you would only want to inline critical CSS. But since the styling for this site is so minimal, I opted to inline everything. The increase to the page size is negligible.

Now this site (on a page that does not contain images or other inline assets) loads entirely from only one request from the server.

The second thing I did to improve performance was compress the resulting pages that are compiled by Jekyll. This was fairly straight forward as I just used a plugin. I haven’t had any issues with this other than needing and manually insert   in a few places where I wanted space in the page.The resulting pages are only slightly smaller. But these small performance wins aggregate into making the page load faster.

The performance on this site wasn’t terrible to begin with. But walking through this was a great reminder that sometimes small things on a site can hugely impact performance. And who doesn’t like a faster website?