PageSpeed Not Optimizing WordPress Srcset/Responsive Images

[ka...@consumermedia.com]

Greetings!

We are running mod_pagespeed (1.11.33.2-stable) and WordPress (4.5.3). 

WordPress has been serving responsive images since version 4.4. Here is a blog post about it from their official blog: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/.

We are running into an issue where pagespeed isn't optimizing or lazyloading the srcset/responsive images coming from WordPress. That also means the images aren't coming from our CDN like they should, since pagespeed pushes optimized images to the CDN.

Here is an example: 

<img style="margin-bottom: 1px;" src="https://cdn.domain.com/wp-content/uploads/2016/03/image-file-name.png.pagespeed.ce.jGrj1bHlwv.png" alt="image alt text" width="100" height="104" class="aligncenter size-full wp-image-10203" srcset="https://www.domain.com/wp-content/uploads/2016/03/image-file-name.png 100w, https://www.domain.com/wp-content/uploads/2016/03/image-file-name-87x90.png 87w" sizes="(max-width: 100px) 100vw, 100px">

Is there a good solution to this problem? I know you can disable srcset/responsive images in WordPress, but that doesn't seem like the ideal solution.

Here are our pagespeed filters for reference:

<!--

mod_pagespeed on

Filters:

ah Add Head

cw Collapse Whitespace

cc Combine Css

gp Convert Gif to Png

jp Convert Jpeg to Progressive

mc Convert Meta Tags

pj Convert Png to Jpeg

db Debug

ec Cache Extend Css

ei Cache Extend Images

es Cache Extend Scripts

fc Fallback Rewrite Css 

if Flatten CSS Imports

hw Flushes html

ci Inline Css

ii Inline Images

il Inline @import to Link

ji Inline Javascript

io In-place optimize for browser

idp Insert DNS Prefetch

js Jpeg Subsampling

ll Lazyload Images

pr Prioritize Critical Css

rj Recompress Jpeg

rp Recompress Png

rw Recompress Webp

rc Remove Comments

ri Resize Images

ir Resize to Rendered Image Dimensions

cf Rewrite Css

rd Rewrite Domains

jm Rewrite External Javascript

jj Rewrite Inline Javascript

cu Rewrite Style Attributes With Url

cp Strip Image Color Profiles

md Strip Image Meta Data

Options:

AvoidRenamingIntrospectiveJavascript (aris) True

EnableCachePurge (euci) True

EnableRewriting (e) 1

FileCacheInodeLimit (afcl) 500000

ImageRecompressionQuality (irq) 95

InPlaceResourceOptimization (ipro) True

InPlaceRewriteDeadlineMs (iprdm) 10000

JpegRecompressionQualityForSmallScreens (iqss) 90

RewriteLevel (l) Core Filters

RewriteRandomDropPercentage (rrdp) 0

Statistics (ase) True

StatisticsLogging (asle) True

SupportNoScriptEnabled (snse) False

#NumFlushes            0

#EndDocument after     4860us

#Total Parse duration  4730us

#Total Render duration 22785us

#Total Idle duration   130us

No critical images detected.

The following filters were disabled for this request:

CriticalSelectorFilter: No critical selector info in cache

Lazyload Images

-->

Thanks!

-Karl

[Joshua Marantz]

As it happens, we are just checking in code to fix this problem in our trunk:

https://github.com/pagespeed/mod_pagespeed/commit/428b7e044e753169724e7512804d41cca9c11651

There's an in-flight change to add support for cache-extending images referenced in srcset as well.  Stay tuned!

-Josh

--
You received this message because you are subscribed to the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-di...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/94a71ed4-3d33-4d87-b655-14b7a18c239c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ka...@consumermedia.com]

Thanks for the fast response. That's great news!

To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-discuss+unsub...@googlegroups.com.