Last year, I talked about reducing the size of this blog.

This time has come again, by removing client side syntax highlighting.

1. Client Side Highlighting

Up until now, primsjs was used to enable the client to highlight code snippets via some JavaScript.

However, this brings a few disadvantages:

  • download prism-code.min.js (7 KiB);

  • download prism-autoloader.min.js (5 KiB);

  • download prism-solarized.css (2.5 KiB);

  • no syntax highlighting if JavaScript is disabled.

Also, it does not make any sense to ask every client to re-calculate the colours each time, for it is the same page for everyone.

This is just a waste of network bandwidth, and of compute cycles, and by consequence of energy.

2. Server Side Highlighting

Asciidoctor can pre-process code blocks, and then it’s only a matter of CSS styling.

I’ve decided to use rouge for that:

Hugo’s config.tom
[markup.asciidocExt.attributes]
  source-highlighter = 'rouge'
  rouge-css = 'class'

Finally, the theme to load is just a CSS file to add.

3. Results

Now, the html of each page is slightly bigger, and a new CSS file needs to be downloaded (1.5 KiB in this case).

To have an idea of the size difference, I’m looking at a previous post of mine about jq, because it uses many code blocks:

Table 1. HTML size
Before After Delta

20.4 KiB

36.9 KiB

16.5 KiB

It’s 16 KiB bigger, but there is 13 KiB less JavaScript and CSS to download, which leads to about the same size.

However, most post have a lower ratio of code blocks to text, making the transition lighter on average, less CPU intensive, but also totally working with JavaScript disabled.