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
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
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
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!