Pagespeed: combine_css mit WordPress

Wer WordPress mit mod_pagespeed bzw. ngx_pagespeed verwendet und den Filter combine_css verwendet, wird feststellen, das nichts passiert. Was ist zu tun?

Der Grund für die Probleme: Das Pagespeed-Modul berücksichtigt keine CSS-Einbindungen, die unterschiedliche IDs haben. WordPress setzt den Namen des CSS als ID bei der Einbindung, am Ende sieht es dann so aus:

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

Der Lösungsansatz: die ID sowie den dazugehörigen Wert entfernen. Dafür kann man eine entsprechende Funktion in der functions.php des Themes einbinden:

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

Der Hintergrund: der Filter style_loader_tag beinhaltet die Einbindung, die Funktion remove_style_id macht nichts weiter als in der fertigen Ausgabe der CSS-Einbindung in WordPress die ID-Werte zu entfernen. Das „Problem“ besteht schon länger, auf Codecentric.de wurde dieser Lösungsansatz bereits 2011 beschrieben.

Insgesamt braucht man am Ende mit den funktionierenden combine_css das WordPress W3TC-Plugin nicht mehr: Caching wird via Microcaching direkt von Nginx gelöst, alle anderen Seitenoptimierungen erledigt das Pagespeed-Modul im Webserver. Dieser Blog läuft mit einer entsprechenden Konfiguration und erreicht damit sehr gute Speed-Index-Werte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Dieses Formular speichert Name, E-Mail und Inhalt, damit wir den Überblick über auf dieser Webseite veröffentlichte Kommentare behalten. Für detaillierte Informationen, wo, wie und warum wir deine Daten speichern, wirf bitte einen Blick in unsere Datenschutzerklärung.

Ich stimme zu