Earth Notes: On Website Technicals (2018/05)

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

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 left quoted an id and a bunch of #ref in-page links, 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 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!