Earth Notes: On Website Technicals (2020-02)
Updated 2024-10-13.loading=lazy a fun one!2020-02-29: Srcset
I think that a few browsers (especially mobile) ignore the img srcset attribute, and unconditionally load the src URL. If so, then those browsers are often going to be old and small and on bad/small data plans. Hitting them with more image data than they can use is a waste.
As an experiment for lite pages only, I am making the src point to a smaller version of the image where available. I am leaving everything else intact including the width and height.
In some cases an older mobile browser may then load the smaller image better suited to it. Though an older desktop browser may have to stretch it to fill the dimensions given.
On a modern browser everything should behave as now.
I really do not know how much difference if any that this will make.
2020-02-26: Lazy, Finally
Chrome (plus other Chromium browsers such as Opera) support loading=lazy, Firefox has it protected behind a flag on the nightly build it seems, and it is apparently on the way for Safari too.
Importantly, the Nu Html Checker will shortly officially allow the attribute, so I will be able to use it at last.
For all body images deep below the fold (well below where I allow ads) <IMG ...>s will be inserted with loading=lazy. (This should align reasonably well with the Chrome heuristics for example.) The typically one or two above that will still be decoding=async as now to prioritise showing text content.
2020-02-29: I am slowly taking loading=lazy live this evening, using a pre-release vnu.jar validator library for now. (The release version should be available next week some time.)
The reduced initial page weight is immediately visible in WebPageTest/Chrome in a long key page with (many) images throughout it.
2020-03-01: I am strengthening this a bit already, to reduce the depth below the fold where it kicks in. I am also forcing lazy anyway after 4 body images, and for non-static and moderately heavyweight images, for desktop. Additionally I am forcing lazy for all body images for lite pages.
2020-03-03: I am now applying decoding=async to most hero images to try to reduce jank and First Contentful/Meaningful Paint time.
2020-02-17: Video Captions
Prompted by @MrFirthy's book Practical Web Inclusion & Accessibility
, I am adding WebVTT captions to my video podcast OpenTRV Movie Mashup 1.
An annoyance when trying to edit the captions is that they won't show/play when viewing the page as a file locally, and the long (nominally infinite) cache time via the site front-end prevents even forced reloading. At least in current Firefox, Chrome and Safari.
The solution that I have so far is to freshly open the podcast page in private/stealth mode after each edit.
2020-02-16: Automatic Dark Mode
I am trying out Add dark mode to your site with this short CSS trick
for full-fast/desktop pages, which is one automatic declarative responsiveness to user preferences. No JavaScript needs to run to have a page do the right thing at sunset/sunrise with macOS NightShift active, for example.
I disabled the blockquote quotes graphic to keep the desktop CSS small enough overall. As it happens this feature was not playing well with dark mode anyway.
2020-02-15: Review Problems
Google has recently started complaining about 'Review' markup, eg in GSC.
In order to try to stamp out some shady self-promotion SEO, it seems, Google now only recognises schema.org/Review in a narrower range of contexts than allowed by schema.org itself.
In particular for EOU that seems only to allow Review for an Event or Product, but since I am not selling anything I cannot complete those properly from GSC's point of view, eg because I have no 'offers' to include in mark-up.
(Though bizarrely Google now seems happy with all my older hReview markup, even where there are multiple instances on a single page.)
This is annoying, and I am sure that I am not alone in this difficulty.
My markup is meant to be helpful to search engines and others, rather than especially promotional, but seeing errors and warnings in my GSC reports makes me unhappy. Can GSC not understand that it is not all about the money for at least some of us?