diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 491e89c..2e6196c 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -275,6 +275,26 @@ If you really want to go overboard with PNG optimization, you can try a tool lik => https://github.com/fhanau/Efficient-Compression-Tool Efficient Compression Tool on GitHub +### Dark image variants + +A "" element allows selection of sources based on any CSS media query. When images have light backgrounds, I like to include dark variants too. + +``` + + +``` + +Requiring the "screen" media type prevents selection of dark variants when printing. Printer paper is almost always white, so dark images could waste ink. Ink waste is a sensitive issue among many students: school printers sometimes charge students who exceed a given ink quota. Ask me how I know! + +Light and dark variants of legacy formats (PNG, JPG, GIF), WebP, and AVIF can cause some of my "" imagesets to have up to six image variants. I could fully automate the process using my static site generator (Hugo) if I wanted to. Since I do want to inspect each image and compress to the minimum acceptable quality, I settled for partial automation using shell scripts and a Hugo shortcode: + +=> https://git.sr.ht/~seirdy/seirdy.one/tree/master/layouts/shortcodes/picture.html My shortcode for elements + ## Layout This is possibly the most subjective item I'm including, and the item with the most exceptions. Consider it more of a weak suggestion than hard advice. Use your own judgement. @@ -376,6 +396,46 @@ I address the issue by not using any SVG images on my hidden service: => http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/ My Tor hidden service (HTTP+HTML) +## Optimal loading + +Lightweight content isn't the only factor for optimizing load times. There are ways to optimize loading without a CDN. + +### Blocking content + +HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a "link" HTTP header. + +My website includes a "link" header to load an SVG that serves as my IndieWeb photo and favicon: + +``` +link: ; rel=preload; as=image +``` + +Reducing load time is especially useful for users with unreliable connections. For much of the world, connectivity comes in short bursts during which loading time is precious. Chances of a connection failure or packet loss increase with time. + +### Inline content + +In addition to HTML, CSS is also a blocking resource. You could pre-load your CSS using a "link" header. Alternatively: if your CSS is under a kilobyte, consider inlining it in the using a