Earth Notes: On Website Technicals (2022-08)
Updated 2023-09-22 19:34 GMT.By Damon Hart-Davis.
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:
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.
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
