mod_pagespeed own js and css render blocking

Question

My mod_pagespeed gives a lower score because it's own js and css are render blocking. Given that the tool is designed to speed up, not slow down, I don't think this is desired behavior by design. Has anyone come across this before?

Here are the recommendations of Google PagSpeed Insights:

Remove render-blocking JavaScript:

http://pacifika.ru/…_pagespeed_static/js_defer.IRaJtkfeqL.js

And

Optimize CSS Delivery of the following:

http://pacifika.ru/…d626d8e8.css.pagespeed.cf.Kr0UOart5j.css
http://fonts.googleapis.com/css?family=Bitter&subset=latin

Here you can see the full picture Pagespeed

I am on Apache server using Varnish cache and here are the mod_pagespeed rules I've enabled:

ModPagespeedEnableFilters extend_cache,combine_javascript,local_storage_cache,rewrite_images
ModPagespeedEnableFilters rewrite_javascript,rewrite_css,sprite_images,rewrite_style_attributes
ModPagespeedEnableFilters collapse_whitespace,elide_attributes,remove_comments
ModPagespeedEnableFilters outline_css,move_css_above_scripts,move_css_to_head
ModPagespeedEnableFilters make_google_analytics_async,inline_google_font_css
ModPagespeedEnableFilters defer_javascript,prioritize_critical_css

I know inline_google_font_css doesn't work for a fact since it still is blocking the render.

Answer 1

Hello from the mod_pagespeed team.

I think you are right on both counts. js_defer.IRaJtkfeqL.js is potentially render-blocking, although it does get loaded at the bottom of the HTML file. We developed what we think is a good mechanism for ensuring that non-critical resources get loaded after rendering for prioritize_critical_css, but we have not applied this to the js_defer helper script yet.

I am tracking this issue as https://code.google.com/p/modpagespeed/issues/detail?id=997

RE http://pacifika.ru/…d626d8e8.css.pagespeed.cf.Kr0UOart5j.css being loaded blocking in the head, it does not look like prioritize_critical_css is working correctly on your site. Beacons are being sent, and the server is responding correctly with a 204. However, the data from the beacons are not being applied.

I noticed that your server is running mod_pagespeed 1.7, which is pretty old. We've marked 1.8 as the stable release, and have 1.9 in beta. Would you be able to upgrade, at least to our stable channel? 1.8 has some improvements to the beaconing mechanism which might help prioritize_critical_css work on your site.

The fonts issue is a tough one. We have decided not to inline the entire font because it's large and cacheable. But the inline_google_font_css still helps my inlining a CSS indirection, removing one round trip before your site can render. Basically, if you want a custom font, it has to be downloaded to the client before your page can be drawn, and here we think it's better to have it cacheable than to inline it.