PageSpeed Insights not detecting Webp images via Vary Header

[Emmanuel Galván]

Hello,

I've been testing ways to optimize my sites without having to use mod_pagespeed for a long time. I have tweaked the "regular" .htaccess file that I use for the majority of the sites I work on, and I've managed to get 80+ score on most of my sites. One of those tweaks is to make Apache look for a webp file when jpeg or png files are requested (this one is new, I've just implemented it today). It works with the Accept, Vary and Content-Type headers and works very nice; Chrome's Developer Tools correctly reports the file being served as a webp file instead of jpeg or png. I've compared file sizes and yeah, the server is dispatching the webp versions.

However, it seems that PageSpeed Insights is not correctly parsing --or doesn't accept-- the Vary header or is having some other trouble. My server correctly dispatches a Content-Type:image/webp and Vary:Accept headers if the client sends the Accept:image/webp header, and the webp file actually exists, but PageSpeed Insights insists that my images are not optimized. With this specific site it's a huge hit on my score, since it loads several images which unfortunately I can't make lazy loading.

Site in question: www.estudiokitchen.com

So, how can I get PageSpeed to actually acknowledge that my images are optimized?

Site note: Webp is AMAZING. I've managed to reduce JPEG sizes down about 30%, and for PNG file it's even better, some of my PNGs went from ~70KB to ~6KB. I think the tradeoff of having Apache check if the Webp version exists is totally worth it, lowering CPU cycles due to less network packets transmission.

[Rick Steinwand]

Sounds like a lot of work.

I just use the picture element and let the browser decide:

<picture><source type=image/webp srcset="/images/webgraphics/paying-by-credit-card.webp"><img src="/images/webgraphics/paying-by-credit-card.jpg" alt="paying by credit card" width=250 height=250></picture>

[Emmanuel Galván]

Thanks for your reply.

Actually, it is less work. I have used the <picture> element before and it works, but sadly there is no solution for CSS; the image() property and other techniques (with fallback support, as needed) are not fully supported, not even by Chrome. So having Apache automatically dispatch the Webp version of the image if the browser supports it regardless of how it is being used, is great.

[Joshua Marantz]

Transcoding to webp is awesome.  Nice job!  But it's not the same thing as optimizing your images. I could be wrong, but what PSI might be  telling you is that your webp files could be compressed better, particularly for mobile devices.

It's consistent with our experience that you'll reduce JPG file size by 30% for an equivalent JPG size.  But that doesn't mean it's as small as PSI thinks it can be :)

-Josh

On Fri, Jan 20, 2017 at 11:01 AM, Emmanuel Galván <emmanue...@gmail.com> wrote:

Thanks for your reply.

Actually, it is less work. I have used the <picture> element before and it works, but sadly there is no solution for CSS; the image() property and other techniques (with fallback support, as needed) are not fully supported, not even by Chrome. So having Apache automatically dispatch the Webp version of the image if the browser supports it regardless of how it is being used, is great.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/f1175567-eb7c-435d-a446-713519099276%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Emmanuel Galván]

Josh,

Thanks for your reply! I totally overlooked that. I'll make some tests with different compression levels / image sizes and let you know so we can confirm your theory.

[Emmanuel Galván]

Hey Josh,

Just ran some tests. Sadly, the problem is that PageSpeed Insights webkit client is not including "image/webp" in its Accept header, so the server is still dispatching the regular JPEG/PNG files for PSI. Already sent some feedback, hope they fix it soon.

On Friday, January 20, 2017 at 10:06:12 AM UTC-6, Joshua Marantz wrote:

[Joshua Marantz]

That makes sense.  But PSI can still give you a good score if you compress the JPEG well, which you should be doing anyway to improve the user experience on Safari, Firefox, and Internet Explorer.

-Josh

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/82294ccc-0b5a-4706-91f2-6540ee108a49%40googlegroups.com.

[Tm Azn]

I too confirm that PSI doesn't recognize the webp images. It used to but it doesn't. Now it requests from the server the normal jpeg/png  images. I can't understand why though, how I'm I supposed to test if my webp images are good enough while pagespeed doesn't recognize them?