Perfect 100/100 Lighthouse score with Hugo and plain CSS

My hugo blog setup I use Hugo to build static HTML. Caddy serves the files from my Hetzner server, with Cloudflare in front. I describe the hosting and deployment in The Tech behind this Site. The site uses plain CSS and fonts already on your device. Hugo minifies the CSS and JavaScript and changes their filenames when the contents change. I cache these files for a year. After an update, your browser requests the new filename. One script handles the menu, theme switch and image viewer. It loads with defer. My images are in Cloudflare R2. The Hugo image shortcode sets srcset and sizes so your browser can choose an image that fits the reading column and screen. I set each image’s width and height so the page leaves room before it loads. Most images load as you approach them on the page. I load MathJax only for equations and the audio script only for posts with a player. I use native buttons and dialogs, label the controls and keep keyboard focus visible. The layout fits narrow screens.…