Pagespeed: combine_css with WordPress

If you use WordPress with mod_pagespeed or ngx_pagespeed and use the filter combine_css, you will notice that nothing happens. What to do?

The reason for the problems: The Pagespeed module does not consider CSS inclusions that have different IDs. WordPress sets the name of the CSS as ID during the integration, at the end it looks like this

link rel='stylesheet' id='wp-pagenavi-css' href='/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all'/

The solution is to remove the ID and the corresponding value. To do this, you can use a corresponding function in the functions.php of the theme:

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

The background: the filter style_loader_tag contains the integration, the function remove_style_id does nothing more than to remove the ID values in the finished output of the CSS integration in WordPress. The "problem" has been around for quite a while, on Codecentric.de this solution was already introduced in 2011 described.

All in all, in the end, with the functioning combine_css the WordPress W3TC plugin: caching is solved directly by Nginx via microcaching, all other page optimizations are done by Pagespeed module in the web server. This blog runs with an appropriate configuration and thus achieves very good speed index values.

Leave a Comment

Your email address will not be published. Required fields are marked *

en_USEnglish
Scroll to Top