Im WordPress Plugin-Repository finden sich unzählige sowohl kostenlose als auch kostenpflichtige und "Freemium" Plugins, die eine bestmögliche Performance der Webseite versprechen. Tatsächlich können diese, vor allem bei Verwendung von fertigen Themes und vielen Plugins, tolle Ergebnisse bringen. Bei der Neuentwicklung oder Anpassung von Webseiten mit Custom Themes gibt es einige Tricks und Kniffe, Mithilfe derer sich die Geschwindigkeit ohne Plugins wie WP Rocket, Autoptimize und Co. sogar noch besser optimieren lässt. In dieser Beitragsreihe erkläre ich, wie ich so die besten Ergebnisse erreiche.
Auf was muss ich achten, um eine bestmögliche Performance zu erreichen?
Es gibt zahlreiche kleine und große Punkte, die eine Webseite bremsen können. Welche Schritte notwendig sind, lässt sich nicht im Allgemeinen für sämtliche Webseiten sagen, da jede Seite natürlich unterschiedlich aufgebaut ist. Im großen und ganzen lassen sich diese aber in folgende Gruppen unterteilen:
- Anzahl der Requests reduzieren
- Dateigrößen minimieren
- Ausführungszeit des Codes verkürzen
- Server optimieren
Wie machen das herkömmliche Plugins?
Anzahl der Requests reduzieren
Einer der wichtigsten Schritte, die fast alle herkömmliche Performance-Plugins durchführen, ist die Reduzierung von Requests. Ein Request, also eine Anfrage an den Server, ist eine Datei, die in die Seite eingebunden wird. Das können beispielsweise JavaScript- und CSS-Dateien sein, Schriftarten und Grafiken. Diese Dateien liegen in der Regel auf dem selben Server wie die Webseite, können aber auch ganz woanders liegen, wie zum Beispiel JavaScripts und Bilder einer Google Maps-Einbindung. Aber wie schaffen diese Erweiterungen eine Reduzierung der Links?
In der Regel wird jedes Script und jede CSS-Datei einzeln über einen script- bzw. style-Tag in die Seite eingebunden. Man hat also im gesamten HTML seiner Webseite eine Vielzahl an einzelnen Tags, die jeweils eine Datei referenzieren. Performance-Plugins setzen an dieser Stelle an: Sie nehmen den Inhalt jeder einzelnen Datei und fügen all diese Datei-Inhalte in einer einzelnen .js bzw. .css-Datei zusammen. Dadurch muss nur noch eine einzelne Script- und eine CSS-Datei referenziert werden, es finden also nur noch zwei Requests statt anstelle der teilweise dutzenden Requests.
Nachteile: Je größer einzelne Dateien sind, desto länger benötigen diese, um vom Browser heruntergeladen zu werden. Es findet zwar dank der Request-Minimierung eine Performance-Verbesserung statt, allerdings benötigen die übriggebliebenen Dateien länger als notwendig, um vollständig geladen zu sein. Das kann beispielweise dazu führen, dass die Webseite sich während des Ladens noch mehrmals optisch ändert. Außerdem beinhalten die beiden Dateien noch immer sämtliche Script- und Style-Inhalte, selbst wenn diese beim initialen Laden der Webseite noch gar nicht benötigt werden.
Dateigrößen minimieren
Für die Minimierung der Dateigrößen gibt es je nach Dateityp logischerweise unterschiedliche Wege. Bilder, beispielweise, können natürlich nicht auf die gleiche Art verkleinert werden, wie text-basierte Dateien (also Script- und CSS-Dateien).
Textbasiert
Textbasierte Dateien wie Scripte und CSS-Dateien werden in der Regel minifiziert (minified). Aber was bedeutet das?
Wir Menschen formatieren unsere Texte so, dass wir sie gut lesen können. Wir nutzen Leerzeichen, Zeilenumbrüche, Tabstopps und sprechende Bezeichnungen, damit wir besser verstehen, was ein Script oder Stil überhaupt macht. Wenn wir beispielweise beim Schreiben einer JavaScript-Datei den Funktionsname "loadImage" lesen wissen wir: Diese Funktion lädt ein Bild.
Ein Computer, oder in dem Fall der Browser, benötigt keine sprechenden Funktionsnamen. Er benötigt auch keine Leerzeichen, Zeilenumbrüche, Tabstopps oder Kommentare. All diese Informationen, auch wenn sie für uns Menschen nicht wie sehr viel wirkt, vergrößern eine Datei unnötig. Also können sie alle entfernt werden. Dadurch entsteht eine Datei, die im Prinzip nur noch aus einer einzelnen Zeile besteht. Funktionen heißen nicht mehr "loadImage" sondern "a". Auf diese Weise lässt sich Kilobyte um Kilobyte sparen.
Bilder
Bilder können auf diese Weise aber nicht optimiert werden. Stattdessen können sie konvertiert und komprimiert werden.
Moderne Plugins bieten die Möglichkeit, Bilder in das neue, für Web optimierte Format "WebP" zu konvertieren. Dadurch allein wird die Dateigröße teils schon stark reduziert, ohne viel Qualität einzubüßen. Dabei werden sämtliche Informationen vom Bild entfernt, die nicht benötigt werden, unter anderem die sogenannten Exif-Daten mit den Einstellungen der Kamera, Copyright- und Standort-Informationen.
Zusätzlich werden die Bilder von vielen Plugins komprimiert. Dabei wird die Qualität ein wenig verringert, wobei man hier oft wählen kann, wie stark die Qualität reduziert werden soll. WordPress selbst bietet zudem schon die Möglichkeit, jedes Bild beim Hochladen automatisch in verschiedene Größen zu verkleinern. Dadurch muss für ein kleines Vorschau-Bild nicht mehr das Bild in voller Größe geladen werden sondern in einer dafür angepassten Größe, beispielweise 150x150px. Diese Funktion ist standardmäßig aktiviert.
Nachteil: Wenn die Komprimierung nicht korrekt konfiguriert ist, sieht man häufig eine deutlich verminderte Bildqualität.
Ausführungszeit des Codes verkürzen
Die Methoden der Reduzierung von Requests und Minimierung von Dateigrößen setzen beide an der eigentlichen Ladezeit an, also beim Übertragen von Daten zwischen Server und Browser. Aber schon vorher kann optimiert werden: Beim Generieren des HTML-Codes auf dem Server.
Der wichtigste Teil hierbei ist für die meisten Plugins das sogenannte Caching. Das bedeutet, dass fertig generierte Dateien auf eine spezielle Weise auf dem Server gespeichert werden, sodass diese nur noch abgerufen und nicht mehr vom Server erneut berechnet werden müssen. Das kann vor allem bei schlecht programmierten oder sehr aufwändigen PHP-Seiten sehr hilfreich sein.
Nachteil: Sehr dynamische Webseiten haben teilweise Probleme mit Caching und es müssen einige wichtige Dinge bei der Konfiguration des Caches beachtet werden.
Nächster Teil: Anzahl der Requests reduzieren