Convert JPG to Progressive doesn't work for all images

Немања Пантош

unread,

Nov 16, 2013, 3:16:12 PM11/16/13

to mod-pagesp...@googlegroups.com

I have responsive/adaptive drupal site www.myvst.com with mod_pagespeed enabled on server.

Progressive conversion works with some of images:

But with some big ones it not work.

I use this options:

ModPagespeedLowercaseHtmlNames on

ModPagespeedEnableFilters extend_cache

ModPagespeedEnableFilters insert_dns_prefetch

ModPagespeedRewriteDeadlinePerFlushMs 100

#

# Text / HTML

#

ModPagespeedEnableFilters collapse_whitespace

ModPagespeedEnableFilters convert_meta_tags

ModPagespeedEnableFilters remove_comments

ModPagespeedEnableFilters collapse_whitespace

ModPagespeedEnableFilters elide_attributes

ModPagespeedEnableFilters trim_urls

ModPagespeedEnableFilters pedantic

#

# JavaScript

#

ModPagespeedEnableFilters combine_javascript

ModPagespeedEnableFilters canonicalize_javascript_libraries

ModPagespeedEnableFilters rewrite_javascript

ModPagespeedEnableFilters inline_javascript

#

# CSS

#

ModPagespeedEnableFilters rewrite_css

ModPagespeedEnableFilters combine_css

ModPagespeedEnableFilters move_css_to_head

ModPagespeedEnableFilters inline_css

ModPagespeedEnableFilters inline_import_to_link

ModPagespeedEnableFilters move_css_above_scripts

#

# Images

#

ModPagespeedEnableFilters inline_preview_images

ModPagespeedEnableFilters insert_img_dimensions

ModPagespeedEnableFilters rewrite_images

ModPagespeedEnableFilters recompress_images

ModPagespeedEnableFilters recompress_jpeg

ModPagespeedEnableFilters convert_jpeg_to_progressive

ModPagespeedEnableFilters resize_mobile_images

ModPagespeedEnableFilters sprite_images

ModPagespeedEnableFilters local_storage_cache

I use APC, memcached and Boost cache with this drupal site.

Joshua Marantz

unread,

Nov 17, 2013, 11:34:27 AM11/17/13

to mod-pagespeed-discuss, Ilya Grigorik, Bryan McQuade, Doantam Phan

The image you mentioned as failing to convert to progressive looks good now:

http://www.myvst.com/sites/default/files/styles/responzivna/public/field/image/xsonokinetic_Sleighbells_thumb.jpg,qitok=v7JFOqTZ.pagespeed.ic.QfdElZC0wU.jpg

I think it might have been an issue that mod_pagespeed took a while to optimize all the images in this page in the background, so when you examined your page it was not done yet.

I was taking a look at your site in PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.myvst.com%2F), and I noticed it flagged many of your images as not being optimized. Then I re-ran the analysis and it turned out better. I looked at one of the images that faiiled and saw this query parameter "?itok=kKHR4Elh". Can you describe the purpose of that? Is it for cache busting? That might be making mod_pagespeed less effective. With mod_pagespeed, a better approach is to use a relatively short cache lifetime on your origin images, say 10 minutes or an hour, and let mod_pagespeed cache-extend them when it optimizes. mod_pagespeed will add its own signature to each URL based on the actual optimized content, so visitors and proxies can safely cache the content forever.

I also ran a webpagetest comparison with your site, evaluating mod_pagespeed's impact: http://www.webpagetest.org/result/131117_0A_0a9e111a59c86e8e061dec37f0fa4cd2/. Note that in the optimized version you get an "A" for progressive JPEGs, so I think your cache was fully warm by the time my test ran. You get a "C" for caching static content, but the problems flagged are all due to third party widgets, e.g. http://wd.sharethis.com/api/getCount2.php. Looks great in general, though we could still improve the speed I think.

Other comments on your option set:

if you want 'pedantic' then you probably do not want elide_attributes.
I am curious why you set the dead-per-flush at 100ms. That will potentially slow down delivery of HTML to your users. That gives more optimizations a chance to run for each view, but might harm the user experience more than it helps, unless you are trying to optimize for bandwidth. Once your cache is warm, it shouldn't matter one way or the other though.
Do you also set "RewriteLevel PassThrough"? If you do, I'd recommend setting a few more of the Core options, particularly flatten_css_imports and inline_import_to_link. If you leave the 'level' unspecified, then your config will give you those core filters by default anyway.
Most important: I would recommend trying defer_javascript and prioritize_critical_css, which can help start your site rendering without any additional external loads from the browser.

Finally, I think it's great that you are trying responsive web design (RWD) with mod_pagespeed. We'd love to hear more about your experiences and possibly add features to mod_pagespeed to make RWD easier and faster.

-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/e3ca9f97-4925-4754-8325-70c4c1d43089%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Joshua Marantz

unread,

Nov 17, 2013, 11:35:12 AM11/17/13

to mod-pagespeed-discuss, Ilya Grigorik, Bryan McQuade, Doantam Phan

One more thing: it's worth trying convert_jpeg_to_webp to optimize for Chrome, Android, and Opera.

-Josh

Reply all

Reply to author

Forward