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?

Cataplasia

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.

Conditioning

strictly concerning wordpress, i can confirm this is an effective solution. – Citystate

Check this for a cleaner solution https://mcmap.net/q/1041019/-mod_pagespeed-won-39-t-combine-css-and-js – Aachen

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;

Tmesis

Answer 3

There appear to be a few issues preventing mod_pagespeed from combining resources on your site. First of all, many of your CSS files have id attributes, which will prevent the combine_css filter from functioning. HTML generally expects elements to have a single id attribute, and it's not clear what that should be if those CSS files are combined.

That doesn't explain why mod_pagespeed does not seem to be rewriting any CSS or JS resources on your page though. mod_pagespeed is able to rewrite the HTML, for example www.oktoberfest.it/?ModPagespeedFilters=collapse_whitespace is able to remove whitespace from the page. The issue is likely that mod_pagespeed is not able to fetch these resources internally. This can happen for a number of reasons, but look in your apache error_log for messages related to SERF.

The best fix for fetch related failures is to use the ModPagespeedLoadFromFile directive if your environment will allow it. Also have a look at this FAQ entry, which explains the problem. You can also try updating to beta release 1.4.26.1 or later, which includes a workaround for common loopback fetch errors.

Migratory