Over the past few days, Google has been pushing users to try running its Test My Site With Google service. In particular, it’s trying to help sites see how mobile friendly they are.
I dutifully entered the details of this site, and waited for the report.
I host this site quite cheaply, so wasn’t expecting any great shakes. But it’s running an up to date implementation of WordPress, and the theme I’m running is pretty responsive.
The report gives you three scores, marked out of one hundred – for mobile friendliness, mobile speed and desktop speed.
Mobile Friendliness came in at 98/100.
I’ll take that. The theme I’m using seems to work well on mobiles, with the only small issue being “tap targets” – the ease with which people can use their fingers to navigate the site. If the buttons are too small, then people may struggle to navigate with their fingers.
Then came the bad news.
Mobile Speed was just 14/100. And Desktop Speed came in at 0/100!
This is worrying because Google does base your ranking in part on your site’s speed. You would think that 0/100 for desktop means the site’s not loading at all, yet that’s simply not the case.
What is true is that some third-party hosted elements are slow loading – namely Flickr and Vimeo. But I “outsource” those for a reason. It keeps my costs down by hosting those elsewhere, and I can ensure that viewability is maintained by those companies’ development. Self-hosted videos or pictures can be a bit of a nightmare, and of course my hosting fees would ramp up.
However, Google was giving me big red marks against “Optimise Images” and “Eliminate render-blocking JavaScript and CSS in above-the-fold content.”
For the latter, I killed some JavaScript that WordPress loads for emoji. That’s redundant on this site as far as I’m concerned. But while that seems to remove the red mark against JavaScript, “Optimise Images” is still there. And I still score zero for desktop speed.
At this point I’m a little stuck.
Let me explain how I use images on this site. Here’s an example of a photo from Flickr embedded into this site:
I use Flickr’s own embed code, choosing the “Large” 1600 width image. The reason for that is that on desktop, I want the photo to look nice and big. While it’s not full-width, it’s pretty wide. And if you have a retina-style display, the photo should appear nice and big.
The embed code uses some Flickr JavaScript to ensure that the image is resized appropriately in a “responsive” manner. In other words, rather than being a fixed width, it will display smaller for smaller or mobile screens.
The problem remains, however, that in the background a 1600 px width image is loading. That’s slow and is impacting on Google’s assessment of my site.
I could embed a smaller width image. The one below is 800 px wide.
But this is going to look a bit rubbish on a smaller screen.
I can also adjust the embed code so that JavaScript isn’t loaded.
But while that helps with lessening the amount of JavaScript and is perhaps something I’ll do in the future, it still doesn’t help with reducing the size of the base image (1.2MB).
And if you’re viewing this on mobile, then all three images will probably look identical. But that’s the problem. You only need to see, perhaps a 600 px image.
I’d love to be able to load only large images when the display is big, but a smaller version if the display is more modest. And while there are plugins for WordPress that allow this (e.g. WP Retina 2X), they’re based on loading from your WordPress install, and not a third-party location like Flickr.
So I’m a bit stuck. My site, but it’s nature, will have large photos embedded, but I can’t find a way to make them look nice on large displays, but in particular, shrink the page-loads for those viewing on smaller screens.
[Update] Thanks to Em in the comments below, I’m trying to usesrcset to see if that helps. See my next post here.