Earth Notes: On Website Technicals (2018/05)
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 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 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!