Earth Notes: On Website Technicals (2022-08)

Updated 2023-09-22 19:34 GMT.
By Damon Hart-Davis.
Tech updates: FUELINST glitch, review pros and cons, a11y, fanlife, Save-Data, traffic nadir, JXL.
tools
Another quiet month anticipated, trying to avoid anything catching fire or melting! But there is time to improve accessibility and check expected behaviour...

2022-08-21: JXL Fun

I hand-crafted lo-fi and WebP and JXL versions of a right-sized (800px) version of the new tools header hero image:

tools

I did this primarily to make super-small WebP and JXL versions that the EOU build mechanism can directly use in a picture element for the hero.

31421 img/tools-800w-JA.jpg
24608 img/tools-800w-JA.jpg.webp
20021 img/tools-800w-JA.jpg.jxl
10791 img/tools-800w-JA.jpgL
 5104 img/tools-800w-JA.jpg.jxlL
 3844 img/tools-800w-JA.jpg.webpL

These were all created from an 800x200 PNG resized from the 3200w JPG with convert using convert, cwebp and cjxl.

That 3200w original and the automatically-derived resized / lo-fi / etc versions have the following sizes.

463781 img/tools-3200w-JA.jpg
 36345 img/a/h/tools-3200w-JA.l463781.800x200.jpg
 27564 img/a/h/tools-3200w-JA.l463781.800x200.jpg.webp
  9386 img/a/h/tools-3200w-JA.l463781.800x200.jpgL
  4522 img/a/h/tools-3200w-JA.l463781.800x200.jpg.webpL

For both cwebp and cjxl I used the options to target output size in bytes to try to get below the existing (WebP) sizes. I used -quality 15 with convert to make the .jpgL. (Every new site-technicals page load may now be lighter than otherwise.) I could not get the JXL below 5kB.

AVIF riposte

Note that AVIF can generate really small files that look acceptable (to me, anyhow). It is reputed to perform better than JPEG, WebP and JXL at very low bit rates.

Using Google-suggested parameters and then amping up to 13 gives:
% avifenc -s 0 --min 0 --max 63 -a end-usage=q -a cq-level=40 -a tune=ssim img/a/h/tools-3200w-JA.l463781.800x200.png -o img/tools-800w-JA.jpg.avif
...
 * Color AV1 total size: 11039 bytes
...
% avifenc -s 0 --min 0 --max 63 -a end-usage=q -a cq-level=63 -a tune=ssim img/a/h/tools-3200w-JA.l463781.800x200.png -o img/tools-800w-JA.jpg.avifL
...
 * Color AV1 total size: 1426 bytes
...
% ls -alS img/tools-800w-JA.jpg.avif*
11321 img/tools-800w-JA.jpg.avif
 1708 img/tools-800w-JA.jpg.avifL

2022-08-19: Traffic Nadir

It's too early to be sure, but the indications in GSC (Google Search Console) are that EOU's annual search traffic nadir was probably mid-July.

Screenshot 2022 06 to 08 GSC Performance web search clicks per day
GSC Performance (Web search clicks per day) chart for Jun/Jul/Aug for EOU. Part of the recovery at the end, ~3x daily clicks over mid-July, other than back-to-work, may be Google's "helpful content" update.

2022-08-17: More Breadcrumb A11y

I have upgraded the nav element containing breadcrumbs (marked as such already within with schema.org metadata) with attribute aria-label=breadcrumbs.

I have also changed the markup for the current page breadcrumb to be aria-current=location even though it takes four more bytes!

2022-08-16: Save-Data and Chrome 104 on Android 11

Though I can't find anything explicit and current about it on-line other than issues at chromium.org, when the Data Saver option is on (Settings > Network and Internet > Advanced > Data Saver) in Android (11) on my Fairphone 3 (FP3 Build/8901.4.A.0013.4), and my data connection is mobile rather than WiFi, Chrome (104.0.5112.69) seems to set the Save-Data header on HTTP (including HTTPS) requests.

There is no explicit 'data saver' / 'lite' proxying option within Chrome itself since M100 (2022-03-29).

Thus for this site, as designed, page requests get redirected to the 'lite' (m-dot) site, and fewer, lower-fi images are shown. Data saving at work!

Supporting (and requesting) Save-Data still seems to be very much a minority pursuit; at most a few percent of sites and requests allegedly.

When/if prefers-reduced-data CSS stops being experimental, the 'full' link in the top navigation may be able to be hidden when Save-Data is on and therefore the link would not be functional.

Enquiring Minds

In order to get some sort of feel for how often Save-Data is being used, on the main/www site I've added the following config:

RewriteCond %{HTTP:Save-Data} on [NC]
RewriteRule ^/favicon\.ico$ /favicon-sd.ico [L,R=302]

(Along with adding Save-Data to the Vary response.)

I should see requests for /favicon-sd.ico for the first hit on the www/main site with Save-Data on, and periodically when /favicon-sd.ico expires from cache (~62 days currently). And possibly from cache misses when switching data saver mode on and off, c/o of that Vary.

If I like this scheme then I can improve it, add it to the m-dot/lite site, etc.

2022-08-25: I've not seen any sign of anyone except me using Save-Data, other than possibly one English Vodafone visitor hit on the 19th! And even that may have been me on my FP3, Android 11, just popping out somewhere random on the Internet...

www.earth.org.uk:443 X.X.X.X - - [19/Aug/2022:21:23:58 +0000] "GET /favicon-sd.ico HTTP/2.0" 200 290 "https://www.earth.org.uk/eddi-diverter-export-margin-analysis.html" "Mozilla/5.0 (Linux; Android 11; FP3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36"

2022-08-08: No Fan Fan

One good feature of my new M1 MBA compared to the older Intel model, is that it runs cooler and has no fan. Soon evident when briefly switching back to the old one!

2022-08-07: Semantic aria-current

I sometimes highlight the current item in a set/list/table. Re-reading an old technicals entry and Using the aria-current attribute I see that for example I should be using the attribute aria-current to make the 'current' item, eg with value 'date' for the current/topical date. Then I should use CSS something like below in my base CSS to style it:

[aria-current]{font-weight:bold}

This can be applied to, for example, appropriate dates in the energy series, or to the selected item in breadcrumbs.

There does not seem to be a semantic HTML5 equivalent.

I am using attribute value page for 'this' breadcrumb, though location may be slightly better. The former is not wrong, and is shorter, so I'll stick with it for now.

Adding this attribute may improve accessibility (a11y) a little, I hope!

2022-08-05: Pros and Cons

Google adds structured data support for pros and cons on product markup, so I have added initial support. This is specifically Review.positiveNotes and Review.negativeNotes as ItemList. The first 'enhanced' page is On the LIME Energy Saving Plug: Review.

2022-08-02: Improbable Intensity

20220802 FUELINST glitch
Interesting FUELINST data glitch from Elexon implying entire GB reduced overnight to ~1GW of transmission demand, possibly imports from Ireland and/or some coal!
~1112 words.