mod_pagespeed own js and css render blocking, pagespeed penalty

416 views

Skip to first unread message

Vlad K

unread,

Oct 2, 2014, 6:04:47 PM10/2/14

to pagespeed-ins...@googlegroups.com

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.

[1]: http://developers.google.com/speed/pagespeed/insights/?url=pacifika.ru&tab=mobile "PageSpeed"

Carlos Lizaga Anadon

unread,

Oct 3, 2014, 9:36:34 AM10/3/14

to pagespeed-ins...@googlegroups.com

Let fix this.

If you want to avoid the issue with CSS you need to include the critical CSS of the page to render the necessary content to display your page in a screen with 1024 px width (in desktop). There are may ways to do this but I'd suggest using http://jonassebastianohlsson.com/criticalpathcssgenerator/ . This will give you a clue about what rules should be included into a style node at your page <head> to be rendered in the first 14-16 KB. Once you've done that, you will need to include the rest of the CSS in a deferred way. This can be done including the link rel after </html> node or by using a deferred script to load it.

Said that your page should be something like this:

<!DOCTYPE html>
<html>

<head>

...
<style>

....

</style>

</head>
<body>

...

</body>

</html>
<link rel="stylesheet" type="text/css" href="...">

About the js issue, you need to load any script in a deferred way so it's being downloaded once after the page is rendered to ensure that the page is not being blocked.

You're using mod_pagespeed and it should be able to do it but i'm not really sure if your configuration is right.

So basically you need to do all of this manually or just place your question into the mod_pagespeed discussion which is here: https://groups.google.com/forum/#!forum/mod-pagespeed-discuss

Regards,

Carlos Lizaga.

Reply all

Reply to author

Forward

0 new messages