26th August 2021, 1 min read

Bandwidth Diet for This Blog

Original post is here eklausmeier.goip.de/blog/2021/08-26-bandwidth-diet-for-this-blog.

As mentioned in Speed-Tests With Pingdom.com the ratio of CSS to HTML (=content) was roughly 50:1. In my case CSS was taking 248 KB, while HTML is only 4.4 KB. Previously this blog continued to use Tailwind CSS, as started by the example for Saaze. But Tailwind CSS does not make too much sense for a blog using Markdown, as Markdown by design, limits the possibilities regarding style. Of course, you can intersperse Markdown with HTML, but this is usually done rather sparingly.

Now this CSS monster for this blog has been crushed up to mere 3.2 KB.

The old Tailwind 2 CSS sizes in kilo Bytes were:

Downloading the various Tailwind CSS files goes like this:

time curl "https://unpkg.com/tailwindcss@2.2.7/dist/base.min.css" -o base
time curl "https://unpkg.com/tailwindcss@2.2.7/dist/components.min.css" -o components
time curl "https://unpkg.com/@tailwindcss/typography@0.2.0/dist/typography.min.css" -o typography
time curl "https://unpkg.com/tailwindcss@2.2.7/dist/utilities.min.css" -o util

Further checking with Pingdom I noticed that all the statistic generation via StatCounter, and Google Tag Manager was using way more bandwidth than I was willing to spend. The same goes for AdSense. So I kicked them all out. This diet made my blog pages increase to performance grade 86 in Pingdom.

Checking file-size of prism.js version 1.24.0 syntax highlighting library:

This is totally in balance to overall HTML size, so I left it intact.