WordPress Performance-Optimierung an einem Praxis-Beispiel

In diesem Artikel, mit dazugehöriger Video-Podcast Folge, möchte ich euch an einem Praxis-Beispiel einige Tipps und Tricks zur Performance-Optimierung einer WordPress Webseite bzw. eines WordPress Themes geben. Das Video findet ihr am Ende dieses Artikels.

Es gibt für Webseiten eine unglaubliche Menge an verschiedenen Tipps und Tricks um diese zu beschleunigen. Ein echtes Patentrezept, welches sich auf jede WordPress-Webseite anwenden lässt, gibt es jedoch nicht. Jedes Web-Projekt ist in der Regel individuell und sollte auch so behandelt werden.

Anzeige:

(adsbygoogle = window.adsbygoogle || []).push({});

Eine Technik, die bei der einen Seite funktioniert und einen guten Performance-Boost bringt, muss nicht auch zwangsweise bei einer anderen Webseite denselben Effekt hervorrufen.

In diesem Artikel und dem dazugehörigen Video möchte ich euch nun einige Techniken und Tricks vorstellen, die sich im Ansatz für fast jede WordPress basierende Webseite eignen.

Wer darüber hinaus Informationen zur Optimierung der Ladezeit sucht, kann sich gerne auch die weiteren Artikel im Blog ansehen, unter anderem zu finden in der Kategorie Webseitenoptimierung.

Kombinieren (combine), komprimieren (minify oder compress) und danach cachen

Combine, minify and cache – Diese drei Techniken lassen sich in WordPress verhältnismäßig einfach umsetzen, da es hier die verschiedensten Plugins gibt, die diese Arbeit übernehmen können.

Was verbirgt sich hinter den jeweiligen Techniken:

Kombinieren (combine)

Darunter versteht man das Zusammenlegen von Dateien. Nehmen wir einmal an, ihr benötigt für eure Webseite drei CSS-Dateien: Die style.css eures Themes und zwei weitere CSS-Dateien die von Plugins eingebunden werden.

Nun muss der Browser für alle drei Dateien jeweils eine neue Verbindung (HTTP-Request) zum Webserver aufbauen und diese Dateien einzeln herunterladen. Dieser Vorgang kostet wertvolle Zeit, welche vermieden werden könnte.

Um die HTTP-Requests nun von drei auf einen zu reduzieren, werden alle drei CSS-Dateien einfach in einer gemeinsamen Datei kombiniert und nur noch diese eine Datei geladen.

Komprimieren (minify oder compress)

Bei dem Vorgang der Kompression (compress) werden z.B. JavaScript, CSS und auch HTML Dateien um unnötige Zeilenumbrüche, Kommentare, Leerzeichen usw.  bereinigt, dadurch sinkt die Dateigröße.

Bei der Kompression unterscheidet man in der Regel zwischen zwei Varianten, der gerade genannten und beschriebenen „normalen“ Kompression und dem Minifying oder auch Minification.

Bei diesem letzten Vorgang werden nicht nur unnötige Zeichen entfernt sondern Dateien aktiv umgestaltet. In JavaScript werden z.B. Variablen und Funktionsnamen gekürzt, Kurzschreibweisen zur Verkleinerung von Abfragen verbaut uvm. In CSS verläuft der Prozess ähnlich, hier werden ebenfalls Kurzschreibweisen verwendet um den Code zu verschlanken und z.B. auch Farbcodes verkleinert. So wird aus dem HexCode für rot #ff0000 z.B. die kurze Version #f00.

Caching

Der Prozess des Caching kann uns in den verschiedensten Varianten begegnen. In der Regel dient ein Cache-System dazu, dass dynamisch erzeugte Dateien statisch gespeichert werden und somit schneller darauf zugegriffen werden kann.

Im Fall von WordPress und den oben genannten Beispielen, wäre in unserem Fall z.B. ein Cache für die folgenden Systeme relevant:

1. Ein Cache zum Zwischenspeichern der dynamisch erzeugten komprimierten und kombinierten Dateien. Müssten diese mit jedem Seitenaufruf dynamisch neu erzeugt werden, so könnte und würde der Geschwindigkeitsvorteil aufgrund der längeren Verarbeitungszeit der Dateien verpuffen.

2. Um WordPress zu entlasten, können auch hier fertig gerenderten HTML-Ausgaben in...