search

apache / incubator-pagespeed-ngx

Automatic PageSpeed optimization module for Nginx
http://ngxpagespeed.com/
Apache License 2.0
4.37k stars 364 forks source link

webp + cloudflare = images dont load on Safari #1392

Open benslaney opened 7 years ago

benslaney commented 7 years ago

If you use pagespeed with the default settings it seems that it will convert .jpg to .webp and serve that to capable browsers.

However if you use CloudFlare then it will always serve .web files to CloudFlare, who will then cache the webp image, and serve that to Safari/Firefox users. Since those browsers don't support the format, the images will not get displayed. The only solution I know of is to turn image recompression off.

oschaaf commented 7 years ago

I wonder, is the html being cached at CloudFlare?

benslaney commented 7 years ago

Ah yes, it is. it’s set to “cache everything” as a page rule. I should have thought to mention that sorry.

oschaaf commented 7 years ago

I am afraid that caching html like that is probably not going to interact well with ngx_pagespeed.

There is the downstream caching feature for that [1]. But that was designed for a caching proxy running in front of your webserver - and not CloudFlare.

[1] https://modpagespeed.com/doc/downstream-caching

jmarantz commented 7 years ago

It should still be possible to use ngx_pagespeed in OptimizeForBandwidth https://modpagespeed.com/doc/optimize-for-bandwidth mode with Cloudflare caching html in front. Or you could set CloudFlare to respect the Vary:User-Agent header that PageSpeed puts on its HTML responses in CoreFilters https://modpagespeed.com/doc/config_filters mode. You can experiment with whichever choice gives you the best performance.

On Mar 11, 2017 4:45 PM, "Otto van der Schaaf" notifications@github.com wrote:

I am affraid that caching html like that is probably not going to interact well with ngx_pagespeed.

There is the downstream caching feature for that [1]. But that was designed for a caching proxy running in front of your webserver - and not CloudFlare.

[1] https://modpagespeed.com/doc/downstream-caching

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pagespeed/ngx_pagespeed/issues/1392#issuecomment-285902572, or mute the thread https://github.com/notifications/unsubscribe-auth/AB2kPf_kaMYECXbozHArPTdVJncQ30GCks5rkxYPgaJpZM4MZ94W .

dmatora commented 5 years ago

Or you could set CloudFlare to respect the Vary:User-Agent header

@jmarantz How can this be done?

Lofesa commented 5 years ago

https://www.modpagespeed.com/doc/configuration#respectvary

dmatora commented 5 years ago

https://www.modpagespeed.com/doc/configuration#respectvary

@Lofesa is that related to my question?

Lofesa commented 5 years ago

Or you could set CloudFlare to respect the Vary:User-Agent header

@jmarantz How can this be done?

Yes, I think, is the directive in config to respect the Vary header. As stated in the doc: " If a site has resources that legitimately vary on User-Agent, or on some other attribute, then in order to preserve that behavior, you must add

Apache:

ModPagespeedRespectVary on

Nginx:

pagespeed RespectVary on;

to your configuration file."

dmatora commented 5 years ago

@Lofesa unless I am missing something, this sets pagespeed to respect the Vary:User-Agent header But CloudFlare will still not respect it. And based on this https://community.cloudflare.com/t/vary-user-agent-ignored/23988 CloudFlare can only be configured to respect Vary:User-Agent on enterprise plan. So far the only option that works is to just disable cloud flare cache (surprisingly in my case that made performance better)

Lofesa commented 5 years ago

Hi @dmatora Sorry, I missreading. I was thinking that the respect vary was in pagespeed not cloudflare