Optimization
Problems
- My site was not available over HTTPS.
- My site was slow to load.
Investigation - HTTPS
This site is hosted on GitHub, so going through their documentation it looked like I should have been able to use a CDN and still have GitHub generate a cert for the site. However, it was not.
Solution - HTTPS
As an experiment I disabled the CDN, to see if GitHub would be able to generate the certificate - this worked pretty quickly and in the end was pretty simple. I was trying to do something fancy and ended up in a situation where the CDN wasn’t really doing everything it could, and neither was GitHub.
Unfortunately, not having the CDN meant that there was no caching to speed up the page loads. So I would notice how slow the page would load after posting updates. At first I thought it was just because the site would need to get re-cached in GitHub’s CDN (I’m pretty sure they use one, but I haven’t investigated) and after I visited it the first time the cache would start to get updated on the CDN servers and everything would be fine.
I was wrong.
Investigation - Slow Site
I noticed, after not making any changes, that the site was still slow.
So I found a couple tools that check page load speeds and I was informed that my ‘avatar’ and ‘hero’ images were too large and slowing down the page load.
So I went about resizing the avatar image, because it was actually a very large image - 1985 x 1383 - and tried to bring it down to the 110 x 77 that the image displays as. But I found that when I brought the image down that small, even without any compression - the image quality dropped off. So I could get that image to the exact right size, to make the tool happy, but I wasn’t happy with it anymore.
The hero image is the header image on the top of this page - it needs to resize dynamically with the screen size, which the tools understand, so they weren’t so much complaining about the file size. They complained about the file format. This one was pretty easy to fix.
Solution - Slow Site
In the end I decided that scaling the avatar image down to 300 x 209 was about as small as I could make the image, but still keep the display quality high - perhaps I was doing something wrong with the scaling process, but this seemed like the best solution to me.
Although the tools are still grumpy about the image being larger than it’s actual display size…
For the hero image, I just had the image converted to webp format.
I’m not sure if this is a quirk of the theme I’m using, but each of the static pages for this site have their own hero value, so to implement this solution across all pages would require me to update each of the page files. I might get around to that in a few days - but I think I will take a look at the Hugo documentation to see if there is a way I can make this change in the main config file…