I haven’t been blogging as long as you, Kev, but almost 10 years ago, right at the beginning of secondary school, I had my first experience with websites. 2 or 3 years later I started blogging. In 2017 I have written about my blogging history until then (in German in the third person). I think it will be time soon to write about my blogging history again.
💬 Micro: 2020-05
This section is for short notes, thoughts or IndieWeb interactions.
Yesterday evening I hinted that I will give my blog a new design in the next days. I woke up relatively early today and thought that I could just finish it quickly now.
My goals were on the one hand to simplify the design significantly, but on the other hand to save as much HTML and CSS as possible.
Now the page should load even faster than it did before. Almost every page on this blog (except the ones with images) uses less than 10 KB for transfer. All generated files of the blog now only need about 30 MB instead of 60 MB.
Did I succeed?
Yesterday I wrote about a new “blog feature” showing below a post places on this blog where the post was mentioned. Unfortunately this has a high complexity and is not very fast. Today I tried (and managed) to improve the algorithm so that the complexity is just O(n). However, the code does not work as I expected it to, because Hugo does not provide a way to use global variables.
I wonder when the point comes where it is too much effort for me to find workarounds and I just build my own page generator according to my own needs… Most of my blog setup I have already developed myself.
To give readers a bit more context, I’ve extended my Hugo theme so that it will be displayed below each post if it is mentioned or linked in another post on my blog. This increases the build time from about 7 to about 17 seconds (on my machine it takes 2 seconds, but it is also much faster than the VPS), but I don’t know how I can make it more performant. After all, for each article it is necessary to iterate through all the other articles and see if the content contains a relative link to the post.
Update: I disabled this again, because I don’t like this much increased build time.
My blog is now faster
Yesterday and today I worked very hard on making my blog faster. In the Google Search Console I saw that my blog suddenly gets half as many clicks since a few days and that my pages are only “moderately” fast. I don’t really care about the number of clicks, but I do want the site to be fast. PageSpeed Insights also showed me that the time until the “First Contentful Paint” seems to be longer than a second for many users (and it has to be under a second for it to be considered fast).
I have taken the following measures:
- Optimized HTML and CSS
- Embedded CSS in HTML to reduce the critical path and the number of requests
- Reduced the CNAME chain
- Enabled the BunnyCDN Origin Shield (this probably has the greatest effect - especially for requests from the other side of the world)
With Fast or Slow my blog now reaches 100% in every category. Hopefully Google will soon notice that the site is now much faster.
I’m not really a TikTok user, but I have discovered a few accounts that are worth following. Since I don’t want to install TikTok under any circumstances and I don’t want to visit the website manually, I built myself a TikTok JSON Feed generator. This tool consists of only a few lines of JavaScript and uses the library tiktok-scraper. Now I can follow TikTok-ers and see new posts in Miniflux. I hope that TikTok will not block my server.
I just upgraded my webserver from Caddy 1 to Caddy 2. It was not so easy to adapt my partly more complex configuration, but in the end I succeeded. I especially like the simplicity of adding plugins to the new version. There is also finally an official Docker Image. Also it is now finally possible to use regular expressions for redirects and rewrites. The new handler syntax is great.
🖼️ View
Inspired by the posts of Kev Quirk and Jake Bauer, I did a Lighthouse test of my website. I wanted to see how good my blog is SEO wise. Some shortcomings were pointed out to me, for example I forgot to add rel="noopener"
to external links with target="_blank"
and in the mobile view some “tap targets” were too close together, so you could have clicked on the wrong one. I have addressed the problems and improved a few things in my theme. I don’t care that much about SEO, but somehow it’s nicer when Lighthouse confirms that you follow all the best practices, it’s the ambition. There are still a few things I could improve on, but I think then there is never an end.
To do a Lighthouse test, you can either use the “Audits” tab in Chromium-based browsers, or this bookmarklet in Firefox:
javascript:void(document.location='https://googlechrome.github.io/lighthouse/viewer/?psiurl='+escape(document.location)+'&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo')