30

Displaying retina & non-retina to corresponding devices like this:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

Works. But Google Pagespeed Insight is telling that it cannot render this until the CSS is loaded, and we get a penalty for it. Only in mobile-view, however - which is the only case where Pagespeed Insights is rendering Retina-images anyway.

Our complete CSS-file is in the footer, as we have the above-the-fold, critical CSS inline in the head.

This code, however, works without any complaints from Pagespeed Insights

<picture>
  <img src="non-retina.jpg">
</picture>

What are we missing? Is there some dependency that the browser has to read the style-rules before knowing which source/srcset-image to take?

Testcase:

Here's a test page for it: http://pagespeed-srcset-nopicturefill.slople.com/ ... and here's its results: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile

Mitesh Vanaliya
  • 2,491
  • 24
  • 39
Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • are you using a polyfill to support the picture tag in older browser? – kaosmos Sep 09 '16 at 12:26
  • No. The same happens when just doing – Raphael Jeger Sep 09 '16 at 12:28
  • according to https://scottjehl.github.io/picturefill/#support seems like some browser, which doesn't fully support the picture/srcset spec, have some issue with http requests. I don't know if this issue affects the pagespeed results too, though – kaosmos Sep 09 '16 at 12:33
  • also, I use the picture/srcset on a number of production-ready ecommerce and I don't see any complain about it by pagespeed: https://developers.google.com/speed/pagespeed/insights/?url=www.gioiapura.it (pagespeed complains about other issues). I use the picturefill polyfill I mentioned above, now I'm on a smartphone and I can't do any test to check if it matters or not – kaosmos Sep 09 '16 at 12:41
  • look again, pagespeed is complaining about render-blocking css/js on your page. We do not have that on our page (100/100 score) if we remove the srcset. – Raphael Jeger Sep 09 '16 at 12:43
  • Thank you for pointing it out, I'll take a deeper look at it as soon as I can. Your question raise an interesting point, since the blocking scripts that pagespeed list aren't directly involved in the picture rendering I never realized that it could have an impact on performance. – kaosmos Sep 09 '16 at 12:51
  • 2
    I get 100/100 mobile score with the same markup as in your example and a CSS file loaded in the footer: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmadeyourday.net%2Fpagespeed-test-1 Can you provide a link to the affected webpage, or a reduced test case that shows the pagespeed issue? – ausi Sep 10 '16 at 10:54
  • Any updates on this? Getting the same penalty. – oligofren Sep 29 '16 at 12:01
  • @ausi our affected page is www.desirio.com ... sometimes we have it, sometimes not – Raphael Jeger Feb 24 '17 at 08:58
  • 4
    You are not missing anything; Pagespeed incorrectly assumes your images can be optimized by comparing the dimensions of the rendered image to the file resolution. I wouldn't recommend focusing on the score itself, but rather on the actual metrics: critical rendering path, time to interactive, and tests on slow connections and low-end devices, does meaningful paint happen within first 3 seconds on 3G? Is there FOIT? Pagespeed score shouldn't affect your search results in any significant way either, so I wouldn't consider it penalizing. – Tigran Petrossian Jul 08 '17 at 18:09
  • I think you can find your answer here: https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=en – MaGiO Mar 19 '20 at 09:18

3 Answers3

1

Add Your css in Header and use defer attribute in link tag. This will allow css to be downloaded on client side first but read after the whole document is loaded.

Nikhil Kumar
  • 11
  • 1
0

Disclaimer: this may not address the original question as it was posted by in 2016

TL;DR: Pay attention to the Lighthouse version which is typically listed at the end of the report! Depending on which tool you use to measure your performance scores, you results may vary and by a lot!

Apparently, Google Lighthouse algorithm differs between versions quite a lot. For instance, as of writing, 19 May 2021, I have written a website and run different tests on it to see the Lighthouse performance score. Here's the table for your comparison:

device 7.2.0 7.3.0 7.5.0
desktop 94 94 95
mobile 92 72 95

To keep things simple:

  • I am showing only performance score (that's your big overall value)
  • I have run tests 3 times and averaged it to account for minor fluctuations

At the time of writing:

  • Lighthouse 7.2.0 was shipped on MacOS Google Chrome
  • Lighthouse 7.3.0 is used by PageSpeed Insights
  • Lighthouse 7.5.0 is going to be shipped within 2 weeks on PageSpeed Insights and Google Chrome 92
Alexander Kucheryuk
  • 606
  • 1
  • 8
  • 16
-2

I’m not sure if this will fix your problem, but this:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

Is equivalent to this:

<img src="non-retina.jpg" srcset="retina.jpg 2x">

Maybe this helps?

Mattijs
  • 56
  • 7