Earth Notes: On Website Technicals (2018/05)
In readiness for GDPR I have taken several steps including:
- Turned off all AdSense ad personalisation in the main 'ad serving' controls, and also flipped the extra protection switch for EU visitors.
- Removed or disabled most advertising on my sites other than EOU, until some aspects of GDPR and ads become clearer, as risk reduction.
- Reduced lifetime of some server logs.
I may do more of the above as time permits.
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 by design difficult to collect or retain. The position will become clearer over time, I hope.
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 schema.org inconsistently via
https: schemas. Since the two are equivalent, and there is no security implication, I have switched everything to
2018/05/12: CSS box-shadow Performance
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.
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=//www.earth.org.uk> 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!