Earth Notes: On Website Technicals (2018/05)

Tech updates: CSS box-shadow performance for mobile, dns-prefetch fail, micro-optimisations...

2018/05/24: GDPR

In readiness for GDPR I have taken several steps including:

I may do more of the above as time permits.

Note that I have never kept explicit personal data nor directly used persistent cookies or similar on any of my sites since the first one in the '90s, as a matter of security and privacy policy.

It remains unclear if it is possible to serve ads such as AdSense on completely static sites such as EOU that strive not to retain privacy-affecting personal data. For them, any sort of explicit consent is therefore difficult to collect or retain. The position will become clearer over time, I hope.

2018/05/13: Micro-Optimisations

GTmetrix pointed out that I hadn't fully minified my HTML. It offers the 'fully' minified version for download. I know that the manually-written content isn't HTML5 minified because I try to keep it as XHTML. But all the headers and footers, and anything injected, should be fully HTML5 minified.

I then used DiffNow to look at the differences.

Slightly surprisingly I had just one itemtype attribute name as itemType. That will have reduced compression.

I had also an id and a bunch of #ref in-page links quoted, unnecessarily. Fixing the main page build script and re-running shows a reduction of ~10 bytes out of many kilobytes for the uncompressed HTML. Not huge, but will usually turn into effectively free bandwidth.

Kangax HTMLMinifier is already fixing all this for the 'lite' pages.

I was also referring to inconsistently via http: and https: schemas. Since the two are equivalent, and there is no security implication, I have switched everything to http:.

2018/05/12: CSS box-shadow Performance

I applied border-radius some time ago to most images to soften them a little, by rounding the corners.

A few days ago I also applied a gentle box-shadow to 'lift' images out of the flat design.

Imagine hero image here...
Combination of border-radius and box-shadow as applied to most (eg floated) desktop images as of today.

I think that it's a helpful effect, but I read that "box-shadows in combination with other styles like border-radius or when heavily used can cause a huge performance bottleneck, and can even render your app unusable on smartphones and tablets ..." So I'm not using box-shadow effects on the 'lite' page images. Omitting this saves a few bytes for lite pages too.

I achieve this by keeping the box-shadow in my base CSS, and having the matching box-shadow in the desktop-only 'full-fat' CSS.

2018/05/11: Mobile dns-prefetch for Mobile Performance

I toyed briefly with a <link rel=dns-prefetch href=//> header for 'lite' pages to attempt to speed up fetching of static assets from the 'www' URL for pages on the 'm' URL. Mobile can have horrible round-trip latency, sometimes more than 1 second. But most of my pages are small enough and mobile bandwidth high enough that there is maybe only a few (tens of) milliseconds potential saving. It costs maybe ~60 bytes in the head, and therefore on the CRP (Critical Rendering Path). And I simply couldn't see any gain with tools such as WebPageTest.

So I took out the dns-prefetch, but usefully rearranged the head a little in the process!