Earth Notes: On Website Technicals (2019-06)

Updated 2019-06-16 18:50 GMT.
Tech updates: Google search favicon, loading=lazy, dateCreated for a few, podcast lite...
Starting the month getting ready for lazy loading, and eking out a little more metadata...

2019-06-11: Podcast Lite

The transcript below was made by Google Docs' Tools -> Voice Typing (on Chrome) from a (playback of a) voice recording made in 'GarageBand' on the Mac, and then lightly edited. Listen mum, no paid tools!

Your browser doesn’t support HTML5 audio.
("clip1") Uploaded . Running time approx 27 seconds. Download MP3 clip 421kB (may not be available in data-saver/lite mode), download low-bandwidth MP3 clip 57kB, hi-fi FLAC clip 1689kB.
This is an experiment to see if it is possible to dictate a piece while also recordeding it and getting a transcription. Tthis may be useful because I've been asked for a pair of couple of voice pieces for a walk of the area that a local and member of the local person interested in nature such as bats and flowers and trees has asked for.

2019-06-12: I have created support for a simplified AUDIO tag, analogous to the IMG and SECTION tags, that is correct HTML5 (even if possibly non-optimal) as-is, but which can be recognised and re-written for AMP and optimised for lite. It has to force automatic injection of an extra AMP header for example.

2019-06-13: the uncompressed lossless (RIFF (little-endian) data, WAVE audio) 44.1kHz sample rate stereo audio clip as exported from GarageBand is 4708538 bytes. (This losslessly compresses with xz -e -9 to .wav.xz at 3430368 bytes.) It has also been captured losslessly as FLAC at 1729105 bytes, and FLAC mono at 1116627 bytes.

A 128kbps ("medium quality") MP3 exported from GarageBand is 431251 bytes and probably captures the full gamut of my laptop microphone in practice. A variable bit rate (~24kbps), mono, 8kHz sample rate MP3 is 58797 bytes and a bit muddy but 7x smaller than the main MP3 and 80x smaller than the uncompressed form. I intend to serve the 128kbps MP3 by default, and the final MP3 as the Save-Data option, though possibly also with the 'lite' page by default.

2019-06-15: I created my first (two-minute) mini-podcast about solar panels in my garden. I have decided to retain a lossless FLAC alongside the MP3s so that I can make edits or share the best-possible source as necessary. It is a little extravagant to do so at over 3MB/minute (note that the WAV version would be 3x the size), but hey!

2019-06-16: Interestingly, with a (quiet) ambient sound recording, FLAC can be smaller than reasonable MP3.

Your browser doesn’t support HTML5 audio.
("20190619T1305 16WW back garden ambient") Uploaded . Running time approx 51 seconds. Download MP3 clip 1190kB, hi-fi FLAC clip 1105kB.

For the Apache support I have added to mods-available/mime.conf the line AddType audio/mpeg .mp3L alongside .jpgL and .pngL, and similarly extended to .mp3 in sites-available/ for Save-Date.

2019-06-08: dateCreated

For those few (~6) pages created significantly ahead of their first publication, I am adding dateCreated markup to the page.

(Avoided for 'lite' pages to save weight, as only of marginal interest!)

2019-06-02: Lazy and Cheap

I asked why Chrome's still-experimental loading=lazy was apparently not using the width and height attributes of an image where present, rather than an expensive load of meta data from the first 2kB, and it seems that the team is already on it!

2019-06-04: downloading and testing "Version 77.0.3814.0 (Official Build) canary (64-bit)" shows it to be vastly improved, eg avoiding any 206s at all, and now quickly loading the things that need to be seen for this page of lots of graphs.

Indeed, on the test run that I did, 80% of downloads are avoided if no scrolling is done, and I see no reason to expect any extra costs, eg in bandwidth, even if the entire page is viewed. Hurrah!

2019-06-01: Google Search Favicon

Google has a new search feature (placing the site favicon next to a search result) and describes how to define a favicon to show in search results. Oddly, Google wants something a multiple of 48px (square), of which only exactly 48x48 would be compatible with normal favicon use, and will seemlingly downsize it to 16x16 for display but specifically does not want to be supplied with a 16x16 image. Uh?

I have added a copy of my 48px intensity button .png as a test. The same file is svn cpied to the lite and AMP site roots. (Currently a 'red' one, but I'll try to capture a green one.)

Google only requires a link rel=icon from the home page, it seems. I have left the current .ico image file in place. That may give some browsers a brain-ache as to which to use!

2019-06-02: this also requires the lite and AMP sites not to redirect the request for the new icon back to the main site in the Apache config. I may instead change this for the lite/AMP sites to rewrite to same underlying file as for www (ie no file copies) and maybe have that point to somewhere under img/ or out/.

2019-06-03: From How to optimise your favicon for Google's new organic results? (and looking at how another site of mine appears in Google mobile SERPs) it looks like Google will fall back to using the 16x16 favicon.ico. So I will for now kill off the special 48px .png and consider building a better multi-resolution .ico instead. (Links below.)