add "optimizing my hugo website"

content/posts/2022.04.10.optimizing-my-hugo-website.md

@@ -0,0 +1,78 @@
+---
+title: Optimizing My Hugo Website
+date: 2022-04-10T22:54:35-04:00
+toc: false
+images:
+tags:
+  - dev
+---
+
+> This post is day 11 of me taking part in the
+> [#100DaysToOffload](https://100daystooffload.com/) challenge.
+
+I just migrated my website to Hugo. I used to have a very minimal custom setup
+which I enjoyed having, but it had a few shortcomings which I thought would be
+easier to address if I migrated over.
+
+I was pretty happy with the move, but I did find that my website got quite a bit
+heavier after the move. Smaller websites load faster and run smoothly on more
+limited hardware, so I decided to see if I could cut some things out and make my
+website smaller.
+
+## Trimming Down Fonts
+
+First, the theme I was using had included multiple weights of a font. It had
+variants from "thin" to "bold" to "bold italic". While these variants make the
+font look better when bold or italic, each variant adds about 100KB to the
+website. I did notice that my browser was smart enough to only load the variants
+needed, which was just 2 of them, but I don't think having users download 100KB
+just to display a few characters makes sense. Thankfully the browser is able to
+automatically compute what the bold characters should be formatted like even if
+the variant is not included in the website, so I started by tearing those out.
+
+Even loading a single variant, the fonts are still the largest bit of the
+website. That's when I came across [this post](https://stackoverflow.com/a/44440992) which describes how to reduce the
+size of a font file by removing character sets you don't use with FontForge. I
+then removed anything Cyrillic, Greek, or any other language that I was very
+unlikely to use. The file is now down to about 24KB, finally knocking it down
+from the "largest thing on the page" status! And the nice thing about how fonts
+work is that if I do ever end up typing something in one of those languages that
+I removed, the browser will fall back to another font the reader has on their
+system so nothing breaks.
+
+## Generating code highlighting during build
+
+A lot of Hugo themes seem to use javascript libraries to do code highlighting.
+The theme adds a javascript library like [PrismJS](https://prismjs.com/), which
+runs in the browser of whoever is looking at your website and adds the
+highlighting to any code blocks.
+
+This is a really weird approach to me, since you're building a static website.
+Why not do the code highlighting when you're building the site? That saves both
+downloaded data, makes the website easier to process for the browser, and also
+works if the person has javascript disabled! I think the reason why is that hugo
+doesn't have a built-in highlighter but relies on
+[Pygments](https://pygments.org/) being installed, so theme developers find it
+easier to just add more javascript instead of explaining people how to install
+pygments.
+
+Savings are amazing however. PrismJS is pretty lightweight at the core, but gets
+heavier and heavier if you want support for more programming languages. The
+version shipped with the theme I picked came at 167KB, at even gzipped it was
+slightly above 60KB, plus another 2.8KB for the required CSS. I was able to tear
+all of these out which saved me even more space!
+
+## Final tally
+
+Finally... 54.6KB, which is 34.2KB gzipped. The whole website is smaller than PrismJS!
+
+The largest thing is, yet again, the font. Even stripped down it takes quite a
+bit of space, which makes me consider fully removing it and just relying on
+system fonts. But I'll leave that for another day.
+
+## Sources?
+
+The customized theme is open source, you can find it here if you want to grab
+the optimized fonts, or just want to see what changes I made: [github.com/SeriousBug/hugo-theme-catafalque](https://github.com/SeriousBug/hugo-theme-catafalque)
+
+This website itself is also open source: [gitea.bgenc.net/kaan/bgenc.net](https://gitea.bgenc.net/kaan/bgenc.net)