search

apache / incubator-pagespeed-mod

Apache module for rewriting web pages to reduce latency and bandwidth.
http://modpagespeed.com
Apache License 2.0
696 stars 158 forks source link

webp images not being served in AMP pages? #1933

Closed imizwa closed 5 years ago

imizwa commented 5 years ago

Hi there, I have an issue but not sure if it's my config or PS. I have PS installed on my server running WordPress with an AMP plugin. When I visit a non-AMP page with Chrome I see the images are served as webp as they should be, but when I visit an AMP page with either my Chrome mobile simulator plug-in or a physical tablet, images aren't served as webp but are instead served as srcset JPGs, is this normal?. It could very well be my own fault as I'm pretty new to PS so I will include my config below:

`############################################################## ModPagespeedDisableFilters inline_css,inline_javascript

ModPagespeedEnableFilters collapse_whitespace,remove_comments
ModPagespeedEnableFilters rewrite_css,rewrite_javascript
ModPagespeedEnableFilters combine_css,combine_javascript
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters jpeg_subsampling
ModPagespeedEnableFilters convert_gif_to_png
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters convert_jpeg_to_progressive
ModPagespeedEnableFilters inline_images
ModPagespeedEnableFilters responsive_images,resize_images
ModPagespeedEnableFilters responsive_images_zoom
ModPagespeedEnableFilters lazyload_images
ModPagespeedEnableFilters move_css_above_scripts
ModPagespeedEnableFilters canonicalize_javascript_libraries

ModPagespeedEnableFilters make_show_ads_async
ModPagespeedEnableFilters make_google_analytics_async
ModPagespeedEnableFilters insert_dns_prefetch
ModPagespeedEnableFilters inline_google_font_css

ModPagespeedMemcachedServers localhost:11211
ModPagespeedCreateSharedMemoryMetadataCache "/var/cache/mod_pagespeed/" 51200
ModPagespeedImageRecompressionQuality 85
ModPagespeedJpegRecompressionQualityForSmallScreens 70
ModPagespeedWebpRecompressionQualityForSmallScreens 70
################################################################`

Would appreciate any help thanks.

jmarantz commented 5 years ago

Can you check the content-type served when the jpg is requested from Chrome? I think what you are seeing is that because AMP pages are cached without regard to user-agent, PageSpeed will not rewrite URLs for images in a browser-specific way. But it will optimize images in-place from the original URL and will serve these in an AMP context.

-Josh

On Mon, Jul 22, 2019 at 9:46 AM Richie Brereton notifications@github.com wrote:

Hi there, I have an issue but not sure if it's my config or PS. I have PS installed on my server running WordPress with an AMP plugin. When I visit a non-AMP page with Chrome I see the images are served as webp as they should be, but when I visit an AMP page with either my Chrome mobile simulator plug-in or a physical tablet, images aren't served as webp but are instead served as srcset JPGs, is this normal?. It could very well be my own fault as I'm pretty new to PS so I will include my config below:

`############################################################## ModPagespeedDisableFilters inline_css,inline_javascript

ModPagespeedEnableFilters collapse_whitespace,remove_comments ModPagespeedEnableFilters rewrite_css,rewrite_javascript ModPagespeedEnableFilters combine_css,combine_javascript ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters jpeg_subsampling ModPagespeedEnableFilters convert_gif_to_png ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp ModPagespeedEnableFilters convert_jpeg_to_progressive ModPagespeedEnableFilters inline_images ModPagespeedEnableFilters responsive_images,resize_images ModPagespeedEnableFilters responsive_images_zoom ModPagespeedEnableFilters lazyload_images ModPagespeedEnableFilters move_css_above_scripts ModPagespeedEnableFilters canonicalize_javascript_libraries

ModPagespeedEnableFilters make_show_ads_async ModPagespeedEnableFilters make_google_analytics_async ModPagespeedEnableFilters insert_dns_prefetch ModPagespeedEnableFilters inline_google_font_css

ModPagespeedMemcachedServers localhost:11211 ModPagespeedCreateSharedMemoryMetadataCache "/var/cache/mod_pagespeed/" 51200 ModPagespeedImageRecompressionQuality 85 ModPagespeedJpegRecompressionQualityForSmallScreens 70 ModPagespeedWebpRecompressionQualityForSmallScreens 70 ################################################################`

Would appreciate any help thanks.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apache/incubator-pagespeed-mod/issues/1933?email_source=notifications&email_token=AAO2IPL36436DKWEOTJ7OVDQAVQWNA5CNFSM4IFVYVW2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HASBCGA, or mute the thread https://github.com/notifications/unsubscribe-auth/AAO2IPJHCCED627S3EIKOALQAVQWNANCNFSM4IFVYVWQ .

imizwa commented 5 years ago

Hi Josh, thanks for your comments. I'm not sure how to see the content-type served for JPG? The way I have been testing it is via the PageSpeed Insights website and I get 98/100 all good for desktop no warning, but for mobile it says to "Serve images in next-gen formats" (on the /amp/ variant), which would confirm what's happening when I test with Chrome or tablet.

What I might do is setup a PS dev server locally and that way I can test out different configs much faster as it takes too long via remote server. I will get back here with some results.

Cheers Richie

imizwa commented 5 years ago

Ok I have run some tests and can confirm that PageSpeed is not serving up webp images in AMP pages, and that's using a minimal config as shown below:

ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments

I also ran a diff check on both normal html and AMP html with PS on and off, it's working fine with standard HTML docs removing comments and rewriting image urls to webp. PS is changing/optimizing some code on the AMP pages (not much) but not touching the PNGs or JPGs and just serves the originals. In terms of content type, the document is HTML:

<!DOCTYPE html>
<html amp>
<head>....

I wonder if PS is even meant to serve up webp for AMP pages? Nothing I do seems to resolve it and this is happening on 3 different Ubuntu servers (2 cloud and 1 local).

cheers, Richie

Lofesa commented 5 years ago

Hi there to get images optimized in amp you need set this: pagespeed AddUrlValuedAttribute amp-img src image in your config file. This rewrite the src=Image_url but not the srcset. In a next release (or building modpagespeed from scracth) the srcset attirbute get optimized.

imizwa commented 5 years ago

Thank you! You're a legend!

imizwa commented 5 years ago

Ok I have managed to implement that directive and it's optimizing PNGs for AMP pages but still not serving up WebP images? Is there another setting I need to configure?

cheers Richie

Lofesa commented 5 years ago

Hi Can shared a url to test?

imizwa commented 5 years ago

Hi Lofesa, I setup a fresh server as I was having niggles with the testing servers and now seems to be serving up webp so all good :) It's also an HTTP2 server. https://www.eventroo.com.au/

Thank you so much for your help.

cheers!