mod_pagespeed won't combine CSS and JS

Question

I've installed mod_pagespeed on our server but it won't combine my CSS and JS on our website oktoberfest.it. Obviously I've activated combine_css, combine_javascript and PassThrough in filters in pagespeed.conf file.

I've also read that mod_pagespeed can't combine CSS files that contains CSS3 directives, but in my Apache's log file, after enabling LevelLog debug of course, there aren't any error or infos about failures in combining. Neither CSS neither JS.

I've tried to:

1. Readd CoreFilters
2. Reboot Apache
3. Delete mod_pagespeed cache with touch /var/mod_pagespeed/cache/cache.flush
4. Deactivate all filters except combine_css and combine_javascript
5. I've check that folders indicated in .config file are CHMOD 777

I don't know what to do now. I'm done with ideas. I really want this mod_pagespeed features work with our website, we have 40 requests of CSSs and JSs that come from plugins that we can not manage.

What do you suggest me to do?

Answer 1

For CSS Combine

As you are using Wordpress, you need to add a Function in function.php of Wordpress.

function remove_style_id($link) {
        return preg_replace("/id='.*-css'/", "", $link);
}
add_filter('style_loader_tag', 'remove_style_id');

Wordpress writes ID="" Tags into the css link which pagespeed doesn´t like. So it will be ignored.

BUT It "could" cause Problems with a Plugin if a Javascript calls the ID, but regular no one will do it that way. So you´ll be safe.

Answer 2

You can permit IDs for css combining as of version 1.12.34.1, have a look at the documentation.

As wordpress adds -css to any ID, you can just add:

Apache:

ModPagespeedPermitIdsForCssCombining *-css

Nginx:

pagespeed PermitIdsForCssCombining *-css;