Prioritize Critical CSS not using the optimized image

[Scott Smith]

I have a site where some pages are using a special hero image that is defined in a style tag in that page's HTML head. I am using Pagespeed to use rewrite_images and prioritize_critical_css. However, it seems the style tags in the head are being moved to the bottom before rewrite_images is able to do it's work. The style tags at the bottom are just the normal JPG file it is referencing. The style tags in the head have the pagespeed optimized versions. Thus, the browser is using the unoptimized JPGs. 

This is what I have configured in the htaccess:

ModPagespeed on 
ModPagespeedRewriteLevel CoreFilters 
ModPagespeedEnableFilters collapse_whitespace,remove_comments,prioritize_critical_css
Anyone run into something like this?

Thanks,
Scott

[Steve Hill]

That sounds unusual. Is the hero image on the same domain as your site? Do you still have the same behaviour if you disable prioritize_critical_css? You can test that quickly by appending a query string to the URL:

?PageSpeedFilters=-prioritize_critical_css

You can also use +debug which should add some HTML comments explaining why the image wasn't optimised.

If you can tell us the URL of your site, that would be helpful.

--
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-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/8e885b62-4b89-4a4a-9280-63133011c03f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Scott Smith]

Example of one of our site's pages with hero image:

http://www.callutheran.edu/about/

Yes, all of the images are on the same domain. This is a screenshot of the CSS stack from the Chrome inspector for that element:

The optimized image is being created, but the CSS is causing it to be overridden back to the original version. Pagespeed is creating a second style tag at the bottom of the source code without the optimized version. The page heroes on our site have to be defined in a style tag in the HTML head because different sections have different images and are managed by many different offices around campus. Because of that, it would not make sense to define the page hero image in a separate stylesheet. So I am not sure there is any way around that. 

Thanks again!

[Steve Hill]

It looks like our CSS parser doesn't like the extra closing CSS tag you have on line 95. I reloaded the page a few times with ?PageSpeedFilters=+debug (to prime the critical CSS stuff) and then looked at the source. Right where it's inserting the critical CSS stuff it says:

<!--Summary computation status for CriticalSelectorFilter

Resource 0 http://www.callutheran.edu/_resources/css/styles.css?v=9-28-16-a: Computed OK

Resource 1 http://www.callutheran.edu/about/:28: Computed OK

Resource 2 http://www.callutheran.edu/about/:76: Unrecoverable CSS parse error or resource contains closing style tag

-->

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

To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/8e885b62-4b89-4a4a-9280-63133011c03f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
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-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/6a1daa78-71e5-4178-a9d6-5b53450ecd2b%40googlegroups.com.

[Scott Smith]

Yeah that extra closing bracket should not have been there. I cleared out that part of the code, but the same problem with pagespeed is still happening. So it wasn't that.

To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/8e885b62-4b89-4a4a-9280-63133011c03f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Otto van der Schaaf]

It looks like the hero is (also) referenced in a css media query. Enabling fallback_rewrite_css_urls may help with getting mod_pagespeed to process and optimize the image in that css fragment. Does adding the following to the configuration help?:

ModPagespeedEnableFilters fallback_rewrite_css_urls 

Otto

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/8e885b62-4b89-4a4a-9280-63133011c03f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
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/6a1daa78-71e5-4178-a9d6-5b53450ecd2b%40googlegroups.com.

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

--
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/2005d160-4ffe-4d1d-adc4-0fbd329a7a7f%40googlegroups.com.

[Scott Smith]

Does the order of how pagespeed's filters are declared matter for how the code is rendered? Would this be a factor here?

[Otto van der Schaaf]

The order in which filters are enabled does not matter, so I don't think that is a factor.

Otto

--

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/662bfc27-563c-434c-b34f-19592791891f%40googlegroups.com.