Welcome to WebmasterWorld Guest from 18.206.48.142

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

PageSpeed Insights and Srcset

     
4:02 pm on Nov 30, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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?
5:45 pm on Nov 30, 2016 (gmt 0)

Junior Member from GB 

10+ Year Member Top Contributors Of The Month

joined:Oct 16, 2002
posts: 182
votes: 3


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]

5:55 pm on Nov 30, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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".
6:02 pm on Nov 30, 2016 (gmt 0)

Junior Member from GB 

10+ Year Member Top Contributors Of The Month

joined:Oct 16, 2002
posts: 182
votes: 3


Yes, it's a very valid concern that I share. Looking forward to hearing from others.
7:21 pm on Nov 30, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4456
votes: 330


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.

8:41 pm on Nov 30, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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).
9:50 pm on Nov 30, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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".
10:07 pm on Nov 30, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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)
11:08 pm on Nov 30, 2016 (gmt 0)

Junior Member from GB 

10+ Year Member Top Contributors Of The Month

joined:Oct 16, 2002
posts: 182
votes: 3


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".
11:45 am on Dec 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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.
11:55 am on Dec 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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.
12:18 pm on Dec 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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?
12:41 pm on Dec 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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
2:27 pm on Dec 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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?
3:18 pm on Dec 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


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.
6:03 pm on Dec 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members