I recently discussed how to make UIs fast again. The web is a kind of UI, so I had to consider this very blog’s speed correctly.

On the web, the main factor impacting the speed is the amount of data transferred on the network. Indeed, most of the world’s web content is accessed through devices using high latency, low speed and high error rate.

Go have a look at The modern web on a slow connection (archive) to better understand what this actually means.

1. Why was my blog big?

First, let’s look at the main landing page: 14 requests totalling 664KiB.

That’s way too much for a simple page like mine.

Second, let’s take an example of the “Make UIs fast again” article: 15 requests totalling 1.22 MiB.

Just wow.

1.1. Main Page

The main page was downloading scripts it never used (but those are used on article pages). Those represent the bulk of the download size.

1.2. Article Page

Each article page is downloading some scripts to:

  • have an animated menu on mobile (jquery);

  • correctly format maths equations (mathjax.js);

  • highlight code snippets (highlighting.js).

But also some fonts for a few icons down the page.

It also contains an image that is rather large.

2. Reducing its size

2.1. Image size

Images have all been reduced with image_optim, and they all got a 30 to 50% size reduction.

2.2. Html size

I’m using a static site generator (Hugo), and the theme I chose looked nice, but has too much boiler plate.

I’ve trimmed it down a lot, and simplified its code.

I’ve simplified the css as well to work on mobile first, but also on desktops.

2.3. Javascript size

I got rid of jquery entirely, and of any script on the main page.

For maths equations, I should be able to stop using Mathjax, thanks to MathML. However, browser support is only good in Firefox and Safari (Also, Asciidoctor does not produce MathML so far).

I tried migrating to Mathjax 3, but it weight almost 500KiB. So I’m staying with version 2.7, which is quite a bit smaller: 270KiB.

For syntax highlighting, I went from highlight.js to prism.js (smaller and simpler): ≈20KiB.

Asciidoctor supports syntax highlighting at generation time, but nothing is nearly as good as prism.

That’s it: no third party JavaScript for analytics, nor any adds.

3. Results

With modest effort (css redesign, manual hugo theme, image_optim, reviewing all JavaScript dependencies), here are the results:

  • main page went from 14 request / 664 KiB to 6 request / 30 KiB (20KiB): 30x better;

  • usual article with an image and math equations went from 15 requests / 1.22 MiB to 13 requests / 350 KiB (120KiB transferred): 10x better;

  • an article without images or math equations is down to 40KiB.

Similarly, the carbon footprint went down: 0.01g of CO_2 (main page) / 0.06g (article page).