Original post is here: eklausmeier.goip.de
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:
| CSS | Size in kB |
|---|---|
| base | 2.8 |
| components | 2.0 |
| typography | 77.0 |
| utilities | 2800.0 |
Downloading the various Tailwind CSS files goes like this:
1time curl "https://unpkg.com/tailwindcss@2.2.7/dist/base.min.css" -o base
2time curl "https://unpkg.com/tailwindcss@2.2.7/dist/components.min.css" -o components
3time curl "https://unpkg.com/@tailwindcss/typography@0.2.0/dist/typography.min.css" -o typography
4time 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:
| file | Size in B |
|---|---|
| prism.css | 2,335 |
| prism-line-numbers.css | 768 |
| prism-core.min.js | 7,316 |
| prism-autoloader.min.js | 5,310 |
| prism-line-numbers.min.js | 2,586 |
| Total | 18,315 |
This is totally in balance to overall HTML size, so I left it intact.