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

In dieser Serie beschäftigen wir uns mit den Dingen, die eine WordPress-Website wirklich schnell machen. Es geht keinesfalls darum, die berühmten 100/100 Punkte bei Google Page Speed zu erreichen, denn oftmals lassen die angesprochenen Punkte viel Potenzial hinter sich. Um genau dieses Potenzial geht es uns. Wir wollen so viel Geschwindigkeit wie nur möglich aus einer Live-Website heraus kitzeln und dabei in den Millisekundenbereich der Ladezeit vordringen. Den Grundstock haben wir bereits im ersten und im zweiten Teil gelegt.

WordPress Performance-Fresser abschalten

Wenn du aus deinem WordPress viel Geschwindigkeit herausholen möchtest, dann solltest du einige Funktionen des Content Management Systems abschalten. Denn WordPress gehört nicht gerade zu den schnellen Vertretern seiner Zunft. Viele Dinge sind in den Core gewandert, obwohl sie keinesfalls durchdacht sind und das CMS langsamer machen, als es eigentlich nötig wäre. Das ist zwar schade, doch man muss es ja nicht hinnehmen.

1 – WordPress Heartbeat API

Die Heartbeat API steuert alle Ajax-Aufrufe innerhalb von WordPress. Zudem sorgt sie auch für das Zwischenspeichern beim Schreiben eines Artikels Im Backend. Allerdings tut sie das sehr regelmäßig, wie ein Herzschlag bei einem Menschen. Diese ständigen Anfragen an den Server gehen stark auf die CPU und fressen damit wichtige Performance. Gleichwohl hat die Heartbeat API natürlich Vorteile. Die Vorteile kann man allerdings nur ausschöpfen, wenn man keine statische Website hat, sondern einen Blog oder ein Magazin führt.

Daher liefere ich dir zwei Code-Snippets – mit dem einen kannst du die API komplett abschalten, mit dem anderen schaltest du sie nur außerhalb der Beiträge ab. Automatisches Zwischenspeichern funktioniert bei Nummer zwei noch. Zudem kann die admin-ajax.php weiterhin durch Plugins genutzt werden. Das Kommentar-Plugin de:comments benötigt die Datei, daher ist die Heartbeat API bei mir nur mit Snippet zwei abgeschaltet. Das Snippet gehört in die functions.php des Themes oder in ein eigenes Plugin.

Ein Klick öffnet das Gist bei Github

2 – wp-cron.php abschalten

Eine der wirklich größten Performance-Bremsen innerhalb von WordPress ist die wp-cron.php, die für geplante Aufgaben innerhalb des CMS zuständig ist. Sie sorgt also dafür, dass vorher definierte Aufgaben zu einer bestimmten Zeit gestartet werden. Grundsätzlich wäre das kein Problem, wenn sie es nicht bei jedem (!) Seitenaufruf tun würde. Jeder einzelne Seitenaufruf innerhalb von Back- und Frontend erzeugt eine Anfrage. Klar, wenn noch nicht so viel Traffic auf dem Server ist, macht das vielleicht nicht so viel aus. Bei vielen Besuchern hingegen kann der Server deshalb in die Knie gehen.

Eine wesentlich bessere Lösung ist es daher, die Nutzung der wp-cron.php vollkommen abzuschalten und sie dann mit Hilfe eines echten Cronjobs zum Beispiel alle 15 Minuten aufzurufen. Deine geplanten Artikel erscheinen dann eventuell 15 Minuten später, doch was macht das schon aus. Den folgenden Code schreibst du in die wp-config.php hinein.

Der Umgang mit Website-Logos

Logos sind wichtig. Ein cooles Logo gibt deiner Website den richtigen Kick und macht sie unverwechselbar. Wenn du Geschwindigkeit willst, dann gibt es zwei Möglichkeiten, mit dem Logo umzugehen. Entweder gestaltest du es absolut passgenau für den umgebenden Container und speicherst es mit Verlusten ab, was unschön aussehen wird. Oder aber du machst es wie ich und lieferst ein Retina-Logo aus, dass durch CSS verkleinert dargestellt wird und daher knackscharf ist. Allerdings sollte die Ausgangsdatei nicht zu groß sein (Dateigröße, nicht Abmessungen). Die Logo-Datei meiner Website hat die Abmessungen 1160 x 243 Pixel und ist als PNG 13 KB groß.

Meine Website liefert das Logo bereits per CSS an den Browser (Div mit Background-Image). Damit die Logodatei nicht erst vom CSS aus dem Ordner Images geladen werden muss, habe ich sie in Base64 kodiert und direkt in das CSS eingefügt. Das erhöht die Dateigröße meines Logos zwar minimal, doch es wird wesentlich schneller geladen. Zudem »springt« es nicht mehr beim Laden. Einen guten Konverter für diesen Job findest du hier. So sieht der Code für die Grafik nach dem Umwandeln aus:

Die Optimierung eines Google-Webfonts

Google Fonts sind extrem beliebt, weil sie auch von Anfängern recht einfach im Theme genutzt werden können. Doch die tollen Fonts haben einen kräftigen Nachteil. Je nach gewähltem Font erhöht sich die Ladezeit der Website messbar. Dazu kommen noch eventuelle Performance-Probleme der Google-Server. Das kommt nicht oft vor, passiert aber hin und wieder. Alles hat seine Vor- und Nachteile. Komplett auf Google Fonts zu verzichten ist sicherlich die schnellste Methode, allerdings nicht wirklich schön. Ich würde nicht auf die ansehnlichen Schriftarten verzichten wollen, doch ich möchte ebenfalls nicht, dass so viele Dinge über fremde Server geladen werden. Daher zeige ich dir heute, wie ich mit Google Fonts umgehe. Ich habe sie lokal auf meinem Server liegen und rufe den Font innerhalb meines CSS auf. Das macht meine Website messbar schneller.

Google Font auf deinem Server bereithalten

Wenn du deinen Font herunterlädst und lokal auf deinem Server hast, wird er im Allgemeinen schneller laden. Daher zeige ich dir, wie man die Fonts auf dem eigenen Server einsetzt. Zuerst einmal musst du dir den Font aussuchen, den du gerne haben möchtest. Du bekommst dann ein Link-Element, welches du in deinen Header kopieren sollst. Doch genau das tust du nicht, sondern suchst dir aus dem Element nur den Link raus und gibst ihn in das URL-Fenster deines Browsers ein und rufst ihn auf. Aus dem angezeigten Code benötigst du als nächstes die Font-Datei (nur woff oder woff2 herunterladen).

Benenne die Datei um. Nutze einen kurzen Dateinamen. Im meinem Fall habe ich sie »varela-round.woff2« genannt. Befördere die Datei in den CSS-Ordner deines Themes. Nimm dir nun die CSS-Datei deines Themes vor, kopiere den kompletten @font-face Code hinein und ändere ihn wie folgt:

Ein Klick öffnet das Gist bei Github

Wenn du das getan hast, dann wird der Font nun von deinem Server geladen und sollte super-schnell ohne Verzögerung angezeigt werden. Zudem wird er nur ein einziges Mal geladen, wenn das CSS ordentlich gecached wird.

Fazit

Wieder haben wir einige nötige Arbeiten auf dem Weg zu einer wirklich schnellen Website erledigt. Du ahnst es sicher schon, dass war noch lange nicht alles. In der nächsten Folge unserer Serie (es werden voraussichtlich fünf Teile) beschäftigen wir uns mit dem arbeitsintensivsten Teil, bei dem auch Fortgeschrittene etwas ins Schwitzen kommen werden: dem optimalen Ausliefern von CSS und JavaScript. Wenn du mit deiner Website in den Millisekundenbereich vordringen willst, dann muss alles stimmen. Besonders dieser Teil. Fast alles wird Handarbeit sein, doch ich versichere dir: es wird sich lohnen!

Quellen:

• Cronjob statt wp-cron.php
• WordPress Heartbeat API deaktivieren
• Image base64 Encoder

(dpe)