High Speed: Was WordPress-Websites wirklich schnell macht [#4]

WordPress-Websites wirklich schnell

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

In unserer kleinen Serie beschäftigen wir uns mit den Dingen, die WordPress-Websites wirklich schnell machen. Google Page Speed Insights interessiert uns hierbei nicht, es geht ausschließlich um Geschwindigkeit. Wir wollen mit unserer Website in den Millisekunden-Bereich vordringen. Die Basis dafür haben wir im ersten, im zweiten und dritten Teil gelegt. Heute beschäftigen wir uns mit der Auslieferung von CSS- und JavaScript-Dateien.

WordPress-Websites wirklich schnell

CSS und JavaScript sind maßgeblich am Speed beteiligt

Neben den Bildern und Grafiken sind die CSS- und JavaScript-Dateien und ihre korrekte Auslieferung maßgeblich dafür verantwortlich, wie schnell eine Website werden kann. Dabei entscheidet auch die Anzahl der Dateien, die ausgeliefert werden müssen, über eine schnelle Ladezeit. Ich kann nur dazu raten, lediglich wirklich benötigte Plugins aktiviert zu lassen. Die meisten Plugins liefern ihre eigenen Dateien mit und irgendwann hat das Theme dann schnell 15 bis 25 CSS- und JavaScript-Dateien auszuliefern.

Besonders die »Multi-Purpose«-Themes leiden unter dieser Krankheit. Als Beispiel dafür darf gerne das sehr beliebte Premium-Theme Enfold von Kriesi herhalten, es benötigt allein 17 JavaScript-Dateien. Ein solches Theme kann auch relativ schnell werden, allerdings wird es nicht in den Millisekundenbereich der Ladezeit vordringen. Ein Theme mit wenig Dateien und nur den nötigsten Plugins ist daher die absolute Voraussetzung für wahre Schnelligkeit.

WordPress-Websites wirklich schnell: das ist die Idee hinter dem heutigen Artikel

Wir beschäftigen uns heute nur mit dem “richtigen” Ausliefern der statischen Dateien. JavaScript kann automatisiert behandelt werden, bei den CSS-Dateien ist Handarbeit angesagt. Wir werden alle CSS-Dateien vom automatischen Laden entfernen und sie händisch so laden lassen, wie es für die Geschwindigkeit wichtig ist. Die style.css Datei wird im Header geladen werden, nachdem sie von unnützen Müll befreit wurde. Alle anderen CSS-Dateien werden im Footer geladen.

Das sorgt für einen rasanten Aufbau der Website. Die Startseite wird bei dieser Art der Datei-Behandlung extrem schnell laden, die Unterseiten werden so schnell, wie es die eingebundenen Medien und Werbeblöcke zulassen. Allerdings wird sich der sichtbare Bereich der Unterseiten blitzartig aufbauen, der Besucher wird den Eindruck einer extrem schnellen Website haben, auch wenn die Unterseite – sprich der einzelne Artikel – vielleicht doch eineinhalb bis zwei Sekunden laden muss.

Wo werden welche Dateien geladen?

Ganz wichtig ist, das du herausfindest, wo welche CSS-Dateien benötigt werden. Standardmäßig wird alles CSS auf allen Seiten geladen. Da das ein völliger Unsinn ist, musst du, wenn du WordPress-Websites wirklich schnell machen willst, herausfinden, wo die Dateien tatsächlich benötigt werden. Zum Beispiel wird das CSS eines Kontaktformulars nur auf der Seite Kontakt benötigt. CSS, welches zur Darstellung von Bilder-Galerien benötigt wird, wird entweder nur auf einer speziellen Galerie-Seite benötigt, oder aber auf allen einzelnen Beiträgen.

Notiere Dir also genau, wo welche Dateien wirklich benötigt werden. Denn nur dort werden wir sie auch einbinden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

CSS-Datei versus CSS direkt in das HTML einfügen

Ich habe für meine Website Democratic Post festgestellt, dass das direkte Einfügen des CSS in den Quellcode meine Website langsamer macht, als wenn ich eine optimierte und korrekt versionierte Datei einbinde. Das jedoch kann bei deiner Website durchaus unterschiedlich sein, deshalb solltest du beide Varianten genau testen.

CSS und JavaScript – Teil 1: Query-Strings entfernen

WordPress bindet statische Ressourcen mit sogenannten Query-Strings am Ende der Datei (?ver=4.5) ein. Im Grunde ist das eine gute Idee, die dazu dienen soll, dass diese statischen Ressourcen wie CSS und JavaScript gecached werden können und nicht bei jedem Seitenaufruf erneut vom Browser geladen werden müssen.

http://server.example/wp-content/themes/hemingway/style.css?ver=4.1

Allerdings wird der Parameter bei Speed-Prüftools wie Pingdom immer wieder als Problem für effektives Caching bemängelt, weil die statischen Inhalte von URLs mit Parametern mitunter nicht im Cache gespeichert, sondern jedes Mal vom Server neu geholt werden. Dieses Problem werden wir etwas später mit einer richtigen Versionierung umgehen. Doch zuerst entfernen wir die Query-Strings von den Dateien. Gib folgenden Code in die functions.php deines Themes ein:

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

CSS und JavaScript – Teil 2: JavaScript gesichert in den Footer bringen

Nicht immer und bei jedem Cache-Plugin funktioniert es einwandfrei, dass JavaScript wirklich im Footer geladen wird. Das jedoch ist absolut notwendig, daher helfen wir mit einem kleinen Snippet nach. Auch dieser Code-Schnipsel kommt in die functions.php des Themes, oder in ein seitenspezifisches Plugin.

Ein Klick öffnet das Gist bei Github
print-scripts-in-footer

CSS und JavaScript – Teil 3: Alle CSS-Dateien dequeuen und entfernen

Da wir das CSS händisch an die richtigen Stellen bewegen möchten, damit die Ladezeit davon profitieren kann, müssen wir zunächst alle CSS-Dateien vom automatischen Laden durch WordPress befreien. Nachdem wir hiermit fertig sind, sollte dein Theme keine einzige CSS-Datei mehr laden. Dazu muss ein wenig getrickst werden, denn um ein Stylesheet zu entfernen, müssen wir die ID herausfinden. Unter Umständen musst du die IDs auch in den Plugin-Dateien suchen.

WordPress-Websites wirklich schnell

Im Anschluss benötigen wir einen Code-Schnipsel, der alle CSS-Dateien entfernen wird. Allerdings wirkt das erste Snippet nicht bei allen Dateien, daher habe ich Snippet-Version B hinzugefügt. Ein Schnipsel von beiden wird das CSS unter Garantie entfernen. Probiere zuerst Version A und danach, wenn es nicht funktioniert, Version B.

Auch diese Snippets kommen entweder in die functions.php des Themes oder in ein seitenspezifisches Plugin.

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

CSS und JavaScript – Teil 4: CSS-Dateien korrekt versionieren

Hierfür mag es verschiedene Lösungen geben, vielleicht sind einige auch komfortabler. Ich habe diese Lösung jedoch gewählt, weil ich durch das händische Einfügen der CSS-Dateien an die richtige Stelle genau bestimmen kann, wann die Dateien geladen werden.

Wofür man Dateiversionen benötigt

Eine korrekte Versionierung der statischen Dateien ist für ein optimales Caching der Ressourcen nötig. So können wir absolut sicherstellen, dass die Datei erstens nur beim ersten Seitenaufruf geladen wird und zweitens bei einer Änderung der Datei sofort die neue Version geladen wird, da diese dann ja einen neuen Dateinamen besitzt. Wenn wir fertig sind, werden die Dateien im HTML-Quellcode wie folgt aussehen:

/wp-content/themes/democraticpost-1.3.0/style.1457278063.css

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Teil 1: Der Code für die functions.php

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

Teil 2: Der Code für die .htaccess Datei

Auch die .htaccess Datei, die sich im Root-Verzeichnis von WordPress befindet, muss angepasst werden. Vor der Anpassung bitte ein Backup der Datei erstellen! Danach wird der Bereich von WordPress gegen den folgenden ausgetauscht.

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

Teil 3: Alle CSS-Dateien händisch komprimieren

Da diese Aufgabe nicht mehr durch ein Caching-Plugin erledigt werden kann, müssen wir es selbst tun. Von jeder Datei werden bitte zuvor Backups gemacht. Im Anschluss öffnet man die CSS-Dateien mit einem HTML-Editor, kopiert den kompletten Inhalt und fügt ihn in das vorgesehene Feld des CSS-Compressors ein. Die richtige Einstellung ist hierbei »Highest«. Nachdem das Tool den CSS-Code komprimiert hat, fügen wir ihn in die style.css Datei ein und speichern diese ab.

Damit die automatische Versionierung funktionieren kann, müssen wir das kleine Stück Code für die Ausgabe der CSS-Datei anpassen. Folgende Änderung muss in den Link-Bereich (href=””) hinein:

<link rel="stylesheet" href="<?=auto_version('/path/to/style.css')?>" />

Der richtige Pfad könnte zum Beispiel so aussehen:

/wp-content/themes/democraticpost-1.3.0/style.css

Teil 4: Das Einfügen der Dateien an die richtigen Stellen

Zuerst wird das Style.css in den Header eingefügt. Am einfachsten geht es, wenn du die Datei header.php deines Themes öffnest und den Link dann in den Head-Bereich einfügst. Bitte beachte jedoch die korrekte Schreibweise des Dateipfads. Stimmt dieser nicht zu 100 Prozent, wird die Datei vom Browser nicht gefunden und verursacht daher einen 404-Fehler.

Style.css

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Alle anderen CSS-Dateien

Alle anderen CSS-Dateien wandern vom Header in den Footer, damit sich der sichtbare Bereich der Website sofort aufbaut. Ebenso werden wir die Dateien nur noch dort laden, wo es absolut nötig ist. Die Dateien fügen wir oberhalb von <?php wp_footer();?> ein.

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Die Steuerung der Dateien, also wo genau was geladen wird, erfolgt über die Tags is_single und is_page. Unter Umständen kann man beide Tags auch kombinieren, wie bei mir im oberen Bereich erfolgt. Die oberen drei Dateien werden auf einzelnen Beiträgen und auf einer Seite geladen. Der grundsätzliche Aufbau sieht dabei so aus:

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Der Screenshot zeigt deutlich, dass die betreffende CSS-Datei nur auf dem Beitrag mit der ID 4368 eingebunden wird, überall woanders wird die Datei nicht geladen.

WordPress Codex: Conditional Tags richtig verwenden

Die Behandlung von JavaScript

Dieses ist der leichtere Part. Wenn wir genau vorgehen wollen – wie beim CSS geschehen – die Dateien nur dort laden lassen wollen, wo es auch nötig ist, benötigen wir ein kleines Premium-Plugin. Es nennt sich Gonzales und kostet zurzeit nur 19 US-Dollar. Das Plugin setzt sich in die Werkzeugleiste fest, die du siehst, wenn du dich eingeloggt hast und deine Website aufrufst. Das Plugin ermöglicht dir jede einzelne Ressource entweder auf jeder Seite zu sperren, oder nur für bestimmte Seiten. Mit etwas Arbeit kannst Du genauestens festlegen, welche JavaScript-Datei wo genau geladen wird.

Ein Screenshot:

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

JavaScript bündeln und komprimieren mit Autoptimize

Nachdem dies erledigt ist, werden die JavaScript-Dateien zusammengefügt und komprimiert. Dafür eignet sich das kostenlose Plugin »Autoptimize« hervorragend. Die nötigen Einstellungen zeigt der Screenshot:

WordPress-Websites wirklich schnell

Fazit

Wer bisher am Ball geblieben ist, hat bereits jetzt seine WordPress-Websites wirklich schnell gemacht. Jedoch haben wir ebenfalls feststellen müssen, dass eine wirklich schnell ladende Website sehr viel Handarbeit erfordert. Vielleicht mag es die eine oder andere Lösung noch etwas intelligenter und komfortabler geben, jedoch gibt es immer Verbesserungsmöglichkeiten. Auf jeden Fall wird das CSS jetzt optimal von den Browsern gecached und daher nur beim ersten Seitenaufruf geladen. Jeder weitere Seitenaufruf wird bedeutend schneller sein.

Im nächsten und letzten Teil beschäftigen wir uns mit einigen kleineren Aufgaben, die noch abzuarbeiten sind. Unter anderem wird es auch darum gehen, wie man dem beliebten Jetpack-Plugin Beine macht. Denn je nachdem, welche Funktionen von JetPack genutzt werden, kann es durchaus auch blitzschnell sein und die Website nicht verlangsamen. Doch das erfordert einige Eingriffe.

WordPress-Websites wirklich schnell: die Serie

Links zum Artikel:

(dpe)

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Franz Meyer
Gast

Toller Artikel!
War wieder viel Neues für mich dabei.
Danke für die Infos!

pixselig
Gast

Schöner Beitrag, danke!

Was mir nicht ganz klar ist, ist der Punkt mit der korrekten Versionierung der CSS und JS Dateien.

Fehlt da nicht ein Filter oder ähnliches?
Ich meine, die Funktion “auto_version($file)” wird ja nirgendwo aufgerufen?

Andreas Hecht
Gast

Wird im Punkt 3 direkt im händisch platzierten Stylesheet aufgerufen.

pixselig
Gast

Danke, dass kommt davon wenn man sich, wie ich, nur einen bestimmten Teil herauspickt.

Harry Milatz
Gast
Hallo, Ich habe schon vor längerem die statischen Ressourcen mit eigentlich der gleichen Funktion entfernt. Wird denn ohne Versionierung die entsprechende CSS immer vom Server nachgeladen und nicht aus dem Browsercache? Ich habe bisher keine Versionierung verwendet. Änderungen an der CSS sind eher selten bei mir. Ansonsten gehe ich ein wenig anders vor: Um das passende Laden der Styles und Scripte zu ermöglichen, setze ich eher auf das Plugin “Plugin Organizer” https://wordpress.org/plugins/plugin-organizer/ Es funktioniert auch unter WP 4.5.2 einwandfrei. Hier kann das Laden Plugins für jeden Beitrag/jede Seite gesteuert werden. In meiner functions.php nutze ich dann ein Snippet wie dieses,… Read more »
Harry Milatz
Gast

Noch etwas zum Thema Speed: Vielleicht ist ja auch für den einen oder anderen mein Plugin zum cachen der Gravatarbilder interessant:
https://wordpress.org/plugins/harrys-gravatar-cache/

Dadurch müssen diese nicht mehr von gravatar.com ausgeliefert werden, sondern kommen vom eigenen Webspace.

wpDiscuz