GTmetrix pointed out that I had not fully minified my HTML. It offers the 'fully' minified version for download. I know that the manually-written content is not 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 http:
and https:
schemas. Since the two are equivalent, and there is no security implication, I have switched everything to http:
.
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.
(éminence grise on foggy day...) 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 ...
Therefore I am 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 border-radius
in my base CSS, and having the matching box-shadow
in the desktop-only 'full-fat' CSS.
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 could not see any gain with tools such as WebPageTest.
So I took out the dns-prefetch
, and usefully rearranged the head
a little in the process!