PageSpeed Insights and Srcset

[Dimitri]

Hi -

I am trying to use the "srcset" parameter to serve different size of the same image, depending of the device screen size. I tried with the "<picture>" tag and the "<img srcset..." one. In both case, it does what I expect. However, when I test my page with Google's PageSpeed Insights, it seems to ignore the srcset attribute, and only takes the fallback version of the Image.

In my experimentation, I have 3 versions of the same image, at different resolution, one for smartphone, one for tablet / netbook ,and the last one for desktop. When I use Google Chrome or Firefox, on on a smartphone or on my desktop. It works, they select the right version of hte image. PageSpeed Insights, always take the desktop version, so, when it scores my pave for mobile, it gives a bad mark because of course the image weights too much, considering the size at which it's finally displayed on a mobile device.

So my questions:

1- did anyone succeed to use the srcset attribute with PageSpeed Insights ?

2- does anyone know if Google/Googlebot handles the srcset attribute, when it estimates if a page is mobile friendly or not?

[Made In Sheffield]

There is some discussion here [groups.google.com] on the Pagespeed Insights list regarding this from 2014/2015.

This comment from a Google rep was encouraging:

Paul Kinlan

I'll let the engineers reply directly as I have not worked on it in a while, but just to be clear the renderer used to assess mobileness is not Chrome, its a version of webkit, and as such does *not* have the picture element support yet and it does *not* support srcset yet either.

I created a demo here [developers.google.com...] if you see a kitten that is narrower than it is high, then it is using the src attribute.

I'll ping the team.

Thanks,
P

But it was two years ago, so not so encouraging! Perhaps this remains the problem.


------------------------------
Mods note: This is a delinked version of the posted link to the Google Groups discussion, which breaks in WebmasterWorld's redirect script, so anyone who clicked never got there...
https://groups.google.com/forum/#!topic/pagespeed-insights-discuss/-3w9jyBHNQY

You can paste this ^^^^^ version directly into your address bar.

I've replaced the 'groups discussion' link above with a Google-generated link that's an alternative to the Ajax link, which takes you to the correct page, but sometimes with posts collapsed. I hope it's not a problem. Paul Kinland, the Google rep cited, is fourth in the list of posters.

[edited by: Robert_Charlton at 1:01 am (utc) on Dec 1, 2016]

[Dimitri]

Thank you for your reply Made In Sheffield. I did see this discussion, but as you said it was "old" now. I've seen some others too, but they were several years old.

Also, what I do not understand is that, it seems that Webkit supports srcset since... 2013! [ [webkit.org...] ]

My concerns is that if Google is not supporting the srcset attributes, it can penalize a page (from a mobile version point of view), whereas the page may in fact, handles it "perfectly".

[Made In Sheffield]

Yes, it's a very valid concern that I share. Looking forward to hearing from others.

[not2easy]

Google is not using the old Pagespeed Insights but I am not sure when they changed. If you visit the old Pagespeed Insights at [developers.google.com...] it shows the link to the new tool. The new tool is not as user friendly since it makes you jump through several steps of "no robots" captcha and verify to check a page. The new test page [search.google.com] for the test is at

https://search.google.com/search-console/mobile-friendly

It appears that it is the same tool as is available in your GSC account when you use "Fetch as Google" and specify a mobile device.

[Dimitri]

Thank you not2easy, but I've seen this tool too, however, it's not giving a "score", it just says if the page is okay or not, that's all. Also, it doesn't handle the srcset attribute too. I made a page, with just an image, available in two resolutions, and it shows only the bigger resolution. (I did try different density too).

[robzilla]

It's highly unlikely that Pagespeed Insights is in any way involved in crawling. It's just a tool.

I think you can rest assured that Googlebot is keeping up with modern standards.

For a close approximation, use the "Fetch as Google" tool in the Search Console, select "Mobile" and choose "Fetch and Render".

[Dimitri]

Thank you robzilla, ... the Fetch as Google / Mobile also ignores the srcset attribute. If anyone else can try, to be sure it's not coming from my code (but my code works fine on iPhone / Android / Desktop)

[Made In Sheffield]

You could use the test provided by the Google rep on the Pagespeed Insights group thread mentioned above:
[jsbin.com...]

He said "if you see a kitten that is narrower than it is high then it is using the src attribute".

[Dimitri]

Hi Made In Sheffield,

when I test with this link, the preview shows the image : [placekitten.com...] which is in the "src" attribute. It not showing the "srcset" images. However, in this case, it might be normal, because their srcset is based on pixel density and not resolution.

[keyplyr]

Pagespeed is not only buggy, it misses things that it shows in its report. The new version gived less accountability and I agree with robzilla that it is not invloved with crawl data.

[Dimitri]

It's not a matter of buggy or not, the question is, does Google take in consideration the "srcset" attribute of the <img> or <picture> tags. Because, when I do the fetch as Googlebot/mobile that robzilla, and activate the "display" option. Then, the it shows the image listed in the "src" attribute, but it ignores the "srcset". So, should I assume that Google is not taking in consideration the srcset attribute, when it scores the mobile friendliness of a page?

[keyplyr]

It's not a matter of buggy or not, the question is, does Google take in consideration the "srcset" attribute of the <img> or <picture> tags.

And Pagespeed is not going to tell you that

[robzilla]

when it scores the mobile friendliness of a page?

I think you're mixing up two separate issues. "Mobile friendliness" refers to how usable a page is on a mobile device, i.e. if the font is legible, no pinching/zooming required, etc. This is not directly related to load time, which seems to be your main concern. Worst case scenario, Googlebot ignores your srcset and loads the image listed in the src attribute. As long as the image, regardless of its actual dimensions (or kilobytes), displays properly on a mobile device (and thus for Googlebot Mobile as well), what's there to worry about?

[Dimitri]

Okay, I didn't understand that mobile friendliness was only the usability of the page. Since Google keeps insisting on how the speed is important, on mobile device, I assumed their "mobile friendliness" was including the download speed of the page, and how adapted the content was (having a 1920 width image, for a screen which is 320 pixel is not very "adapted"). And for example, the PageSpeed was penalizing the scoring of a mobile page for this. so, it was a criteria in the scoring of Page Speed, I thought may be Google was also scoring this aspect.

I mean, I always thought the time for a page and its content to download, was a criteria for Google , and entering in consideration in the user's experience scoring.

But I understand better now, thank you, and sorry for the disturbing.

[robzilla]

Disturbing what? The peace? :-) You're welcome to ask any questions.

PageSpeed, like YSlow and others, is just a tool to give you a rough estimation of a page's performance. However, an A+ page can still be slower than a C- page, because it only scores the measures taken to ensure optimal performance on that page. It's not a real load time measurement, so it's unlikely to be used in ranking. For that, they're far more likely to use real user data, like the kind you can pull up in Google Analytics, which gives insight into connection time, server response time, DOMContentLoaded, etc. Testing from various browsers, devices and internet connections will get you a much better estimate of your site's real-world performance. And since all modern browsers except IE (if we can ever call that a modern browser) support srcset, I wouldn't worry about it!