WordPress-Websites von überflüssigem CSS-Code mit „UnCSS“ befreien

In diesem Tutorial möchte ich zeigen, wie man die CSS-Datei einer WordPress-Website verkleinert, indem man überflüssigen bzw. nicht genutzten CSS-Code findet und entfernt. Mit dieser Maßnahme kann man die Performance der Website verbessern.

Um Euch mal einen Geschmack zu geben, was eigentlich der Nutzen ist, habe ich eine Testseite mit WordPress angelegt und sie mit und ohne „gesäuberten“ CSS verglichen:

uncss-less-code

50% weniger Code beim WP-Theme „Twenty Fourteen“ durch UnCSS.

Die style.css vom aktuellen Standard-Theme Twenty Fourteen ist unkomprimiert 77,4 kB groß. Nach dem Entfernen vom überflüssigen CSS-Code hatte die bereinigte Datei nur 39,0 kB! Diese Zahlen sprechen für sich.

Wie immer möchte ich erstmal grundsätzlich das Thema erörtern und im zweiten Teil, dann konkrete die Lösung beschreiben.

Teil 1: Worum geht es – Grundlagen

Was ist überflüssiger CSS-Code?

Mit überflüssigem CSS-Code ist hier der Code im CSS gemeint, welcher nicht für die Beschreibung der Format-Eigenschaften im HTML benötigt wird. Man kann zwei Arten von überflüssigem CSS-Code unterscheiden:

A) Nicht verwendeter CSS-Code:
Das sind Style-Definitionen, für die es im HTML keine Verwendung gibt. Die schleichen sich z.B. durch Reset-Stylesheets ein. Bei Reset-Stylesheets werden für alle möglichen HTML-Elemente Style-Definitionen festgelegt. Wenn aber in der Website nicht alle HTML-Elemente zum Einsatz kommen, hat man unnötigen Ballast in der CSS-Datei.

B) Überschriebener CSS-Code
Das sind Style-Definitionen, für die es im HTML zwar eine Verwendung gibt, die aber von anderen Definitionen überschrieben werden.

Die hier vorgestellte Methode erkennt beide Arten und elemeniert sie.

Teil 2. Finden und Ersetzen von überflüssigem CSS-Code

Im Prinzip geht man wie folgt vor:

  1. Es wird eine Sitemap mit allen URLs der Website erstellt.
  2. UnCSS erfasst anhand der Sitemap die Seiten und holt sich darüber auch alle Stylesheets – sowohl inline Styles als auch externe CSS-Dateien.
  3. Außerdem erfasst UnCSS alle Selektoren aus dem HTML.
  4. Dann werden alle Selektoren mit den Stylesheets abgeglichen.
  5. Die Stylesheets, für die es Selektoren gibt, wandern in eine neu generierte CSS Datei.*

*Das Zusammenfügen von mehreren Stylesheets-Dateien zu einer einzigen hat übrigens den schönen Nebeneffekt, dass man dadurch die Anzahl der HTTP Requests verringert.

Praktische Durchführung

1. Sitemap Plugin installieren

Kopiere das Sitemap Plugin von Liam Gladdy in das Verzeichnis /wp-content/mu-plugins
Ja, richtig gelesen. Das Verzeichnis soll mu-plugins heißen. Was das ist, erfährst Du hier.

2. Grunt und Plugins installieren

Du brauchst:

Unter Ubuntu reicht für die Installation dieser Einzeiler:

sudo npm install grunt --save-dev && sudo npm install --save-dev load-grunt-tasks && sudo npm install --save-dev grunt-exec && sudo npm install --save-dev grunt-uncss

**Kleiner Einschub für alle, die noch keine Erfahrung mit Grunt haben: Ich werde beim Potsdamer WP-Meetup am 18. November eine Einführung in Grunt geben. Die wird es dann auch als Stream im Internet geben und entsprechende Dokumentation.

3. Gruntfile.js einrichten

Jetzt noch die Datei Gruntfile.js im Hauptverzeichnis des Projektes anlegen, den folgenden Code dort rein kopieren und die Verzeichnisse und Dateinamen anpassen:

[code language=“javascript“]
// Wrapper – Nichts verändern!
module.exports = function(grunt) {
‚use strict‘;

// Grunt Tasks
grunt.initConfig({
pkg: grunt.file.readJSON(‚package.json‘),

// Task für die Sitemap
exec: {
get_grunt_sitemap: {
// Hier den Pfad zur Sitemap anpassen.
command: ‚curl –silent –output sitemap.json http://wohinauchimmer/wordpress/uncss/?show_sitemap‘
}
},

// Konfiguration von UnCSS
uncss: {
dist: {
options: {
//Hier ggfls. noch weitere Selektoren eintragen, die ignoriert werden sollen.
ignore : [/expanded/,/js/,/wp-/,/align/,/admin-bar/],
// Hier den Link zur originalen CSS-Datei eintragen.
stylesheets : [’style-original.css‘],
// Hier die Links zu den CSS-Dateien eintragen, die generell ignoriert werden sollen.
ignoreSheets : [/fonts.googleapis/],
// Hier nichts verändern oder eintragen!
urls : []
},
files: {
// Hier den gewünschten Pfad und Namen der erzeugten CSS-Datei eintragen.
’style-uncss.css‘: [‚**/*.php‘]
}
}
}
});

// Hier werden die Plugins geladen. Nichts verändern!
require(‚load-grunt-tasks‘)(grunt);

// Hier werden die Tasks registriert. Nichts verändern!
grunt.registerTask(‚load_sitemap_json‘, function() {
var sitemap_urls = grunt.file.readJSON(‚./sitemap.json‘);
grunt.config.set(‚uncss.dist.options.urls‘, sitemap_urls);
});
grunt.registerTask(‚uncss_style‘, [
‚exec:get_grunt_sitemap‘,
‚load_sitemap_json‘,
‚uncss:dist‘
]);
}
[/code]

4. Grunt Task starten – UnCSS-isierte Datei erzeugen

Terminal öffnen, zum Projekt-Verzeichnis wechseln und den Grunt Task starten:
grunt uncss_style

grunt-uncss-terminal

Terminalausgabe des uncss-Task

Und …schwupp… haben wir eine „UnCSS-isierte“ CSS-Datei erzeugt, die wirklich nur die Styles enthält, die benötigt werden. Je nach Größe der Website kann das Generieren der uncss-Datei einige Zeit dauern. Es empfiehlt sich daher, diesen Task nicht mit watch bzw. Livereload zu verbinden.

Risiken und Nebenwirkungen

Mit UnCSS wird der IST-Zustand einer Seite ausgewertet. Dieser Zustand ändert sich sobald etwas am Theme oder am Inhalt geändert wird. Darum muss das Layout immer überprüft werden bzw. man sollte von Zeit zu Zeit den UnCSS-Task ausführen, damit neu hinzu gekommene Selektoren beachtet bzw. die Styles von weggefallenen Selektoren entfernt werden.

Es versteht sich, dass Ihr UnCSS sowieso erstmal bei einem Testprojekt ausprobiert. Außerdem solltt Ihr nach jedem uncss-Task gründlich prüfen, ob nicht vielleicht irgendwo zu viel Styles weggenommen wurden. UnCSS soll mit komplexen Selektoren nicht arbeiten.

Ich verwende UnCSS bei meinen neuen Themes und es kommt nur sehr selten vor, dass mal irgendwo ein Style zu viel fehlt. Das lässt sich dann aber sehr leicht mit der „ignore“-Option (siehe oben im Code) fixen. Einfach den betreffenden Selektor eintragen. Und den Task neu starten. Dann wird der Selektor nicht mehr entfernt.

Quellen und Dank

Ohne diese Entwickler und Tools wäre UnCSS für uns nicht möglich:

Das wichtigste Tool für uns ist UnCSS von Giacomo Martino. Damit werden die überflüssigen CSS-Codes gefunden und eleminiert.

Das wir UnCSS komfortabel in Grunt anwenden können, haben wir Addy Osmani mit seinem Grunt Task grunt-uncss zu verdanken.

Und last not least das WordPress-spezifische Know-how für diese Methode stammt aus dem Beitrag von Liam GladdyUsing UnCSS and grunt-uncss with WordPress Liam zeigt dort, wie man UnCSS für WordPress Websites anwendet. Und von ihm ist auch das Sitemap-Plugin, welches wir für den Grunt Task brauchen.

 

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

6 Gedanken zu „WordPress-Websites von überflüssigem CSS-Code mit „UnCSS“ befreien

  1. Oliver Kurmis

    Interessant wäre noch zu erfahren, wie gross der Unterschied der CSS-Dateien nach der http-Komprimierung ist.
    Meiner Meinung nach sind http-Komprimierung und Nutzen des Browser-Cache (Expire-Header) die effektivsten und einfachsten Methoden, um eine Webseite zu beschleunigen.

  2. Bettina

    Hallo Heiko,
    super Anregung – danke!
    Ich habe zwar mittels Cache und Co meine Seiten schon beschleunigt, aber bei Bewertungen werden ja die Dateien „gezählt“ und da macht eine Minimierung meiner Ansicht nach sehr großen Sinn.
    Ich werde es auf jeden Fall in den nächsten Tagen mal ausprobieren.

    Viele Grüße
    Bettina

  3. Davis Brown

    „Teste, die neuesten Web-Design und Website-Builder-Tools hier templatetoaster jetzt! „

  4. Karsten

    Hey Heiko!
    Uncss ist ein Grund mehr, mich demnächst mal mehr mit grunt zu beschäftigen. Danke für den Tipp!
    Viele Grüße
    Karsten

Kommentare sind geschlossen.