Skip to main content

Small Site Retheme, and some File Size info

Inspired by some Solarpunk Lemmy discussion especially Smolweb.org I had a look at the overhead of my Nikola site theme and was suprised by how heavy the JS and CSS was even though it was barely doing anything.

Thus, I’ve switched to the lighter base theme for both my personal site and Research Site. These still contain (post-compression) 9.5 KB of CSS and 4.1 KB of JS, which still seems quite excessive but it’s a big improvement for minimal effort on my part.

The Research page has the unmodified basic appearance whereas this site still has an extra custom CSS which modifies the colours and includes some custom fonts for headers (34 KB Michroma for H1 and 23 KB Electrolize for the rest) which I’ve been using for a year or so.

Without caching, the homepage on this site transfers 380KB of stuff to load:

  • HTML: 5.7 KB

  • CSS: 9.5 KB

  • JS: 4.1 KB

  • Fonts: 67 KB

  • Images (all thumbnails on posts): 320 KB

Two images (the OpenElectricity charts I posted late last year) are just over 100 KB; the other PNGs are 30-40KB, the JPEG photo is only 19KB.

Considering that the load is more than half chart thumbnails, which I consider important content - I’m probably not going to put much effort into further minimizing the site. I will be mindful of how much size even thumbnails will take up, and maybe put them “below the fold” in future posts unless I think it’s important to show them on indexes.

For comparison, some other sites and how much they take to load their index page (with compression and no cache):

  • ABC News: 1.64 MB (including images on most articles)

  • BBC News: 1.28 MB (ditto)

  • Google.com: 1.51 MB (shocking given the tiny amount of actual content on the page)

  • Wikipedia (en): 402 KB (relatively efficient for the amount of content; of course it’s mostly text)

  • Hackaday: 3.64 MB (huge images on articles)

  • Phoronix: 312 KB (tiny thumbnails on articles)