WordPress professionell einrichten – Performance

Anmerkung: Diese Artikelserie entstand in Kooperation mit der Full Service Werbeagentur WERBEBOTSCHAFT aus Nürnberg.

Die Geschwindigkeit Ihrer Webseite ist nicht nur ein wichtiger Punkt, um Besucher zu gewinnen und zu binden, sondern u.A. auch, um gute Ergebnisse bei der Suchmaschinen-Optimierung zu erzielen.

Wichtige Tipps und Tricks behandeln wir deshalb in diesem Abschnitt.

Browser-Cache aktivieren

Damit die Browser Ihrer Besucher nicht bei jedem Aufruf immer wieder auf’s Neue alle Inhalte, vor allem Inhalte, die der Browser eigentlich schon kenn, wie z.B. CSS, Javascript Dateien oder Bilder, herunter laden muss, können Sie Browser-Caching über Ihre .htaccess Datei aktivieren.

Nutzen Sie hierfür z.B. folgenden Code:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

Für diverse Inhalte wird über diesen Code gesteuert, wie lange diese im Browser-Cache liegen bleiben, bevor Sie wieder erneut von der Webseite herunter geladen werden sollen.

Der Browser sieht dann also bei jedem Seitenaufruf erst einmal in seinem Cache nach, ob die jeweilige Datei schon schnell zugänglich verfügbar ist und zeigt diese an.

Dies erhöht dann die Geschwindigkeit, in der eine Webseite dargestellt wird schon einmal massiv und freut vor allem Suchmaschinen wie Google, die Seiten mit aktiviertem Browser-Cache höher ranken.

Komprimierung aktivieren

Werden Inhalte wie Bilder, Javascript und CSS vor dem Herunterladen des Benutzer-Browsers komprimiert, erhöht dies natürlich die Seiten-Performanc ebenfalls enorm.

Das Komprimieren können Sie sich wie das Erstellen einer .zip Datei vorstellen.

Der Server komprimiert in diesem Fall die zu übertragenden Daten. Der Browser lädt die komprimierten und somit viel kleineren Daten herunter und entpackt sie dann bei sich.

Dies kann Geschwindigkeitsboots bis weit über 80% zur Folge haben.

Um Dateien von Ihrem Server komprimiert übertragen zu können, können Sie, je nach Servertyp und Version, z.B. folgenden Code in Ihrer .htaccess Datei nutzen (Code für Apache):

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Nicht nur die Besucher, sondern vor allem Suchmaschinen wie Google wird dies wieder freuen und Sie erhalten besseres Bewertungen und damit ein besseres Ranking.

Cache Plugin installieren

Wir haben bereits über das Browser-Caching gesprochen. Noch effektiver ist es, zusätzlich gleich noch ein Caching-Plugin in WordPress zu installieren.

Beste Erfahrungen habe ich bis jetzt mit dem Plugin WP Super Cache gemacht, welches umfangreiche Grund-Einstellungen und vor allem extrem komfortable Profi-Funktionen bietet.

WP Super Cache erstellt einfach gesprochen, wie andere Cache Plugins auch, statische HTML Versionen einer jeden WordPress-Seite bzw. eines Beitrags.

Die Vorteile liegen klar auf der Hand: Bekommt ein Benutzer eine Seite aus dem Cache angezeigt, muss WordPress keine Datenbankabfragen und sonstige Systemaufrufe tätigen. Es wird einfach die HTML Seite aus dem Cache geholt und an den Benutzer ausgeliefert.

Cache Plugins boosten so Ihre Website-Geschwindigkeit bis zum Maximium. Vorausgesetzt sie sind richtig konfiguriert.

Allerdings müssen Sie drauf achten, u.U. immer wieder einmal den Cache manuell zu leeren. Dies kann z.B. der Fall sein, wenn Sie Entwicklungen an Ihrem Theme vornehmen. Verändern Sie beispielsweise eine CSS-Datei und laden die neue Version auf Ihren Server, erfährt das Cache-Plugin davon nichts und zeigt weiterhin die alte Version Ihrer Seite an.
In diesem Fall löschen Sie also den Cache manuell und prüfen danach, ob Ihre Änderungen gegriffen haben.

Gute Cache-Plugins bringen zusätzlich noch Funktionen mit, die Sie bestimmte Bereiche Ihrer Webseite definieren lassen, die nicht gecached werden. Dies kann u.A. bei Shops oder Formularen wichtig sein, da diese unbedingt dynamisch und zu jeder Sekunde aktuell sein müssen.

AMP Plugin installieren

Google hat vor einiger Zeit das Prinzip der Accelerated Mobile Pages heraus gebracht. Vereinfacht gesprochen handelt es sich hier um Vorgaben, die Webseiten erfüllen müssen, welche enge Standards definieren und die Möglichkeiten der Gestaltung von Webseiten extrem beschneiden.

Diese extreme Beschneidung, viel mehr als Bilder in bestimmten Größen, Texte und kleine Skripte sind nicht erlaubt, führt am Ende dazu, dass Ihre AMP konforme Seite in einem hervorgehobenen Bereich der Google-Suche erscheint und gefühlt in der Sekunde des darauf Klickens durch den Benutzer, sozusagen „instant“, erscheint.

Nicht nur, dass diese extrem schnellen AMP Seiten von Benutzern sehr gerne aufgerufen werden, Google belohnt Ihren Webauftritt gleichzeitig mit einer kostenlosen Hervorhebung am Anfang der Suchergebnisse.

Sie sehen also: Das Erstellen einer AMP Version lohnt sich doppelt.

Um aus Ihrer WordPress-Seite zusätzlich eine AMP konforme Webseite zu machen, benötigen Sie nicht viel mehr, als ein Plugin. Das Plugin AMP bringt grundsätzlich alles mit, um aus den Beiträgen (!) Ihrer WordPress-Seite zusätzlich entsprechende AMP konforme Seiten zu machen.

Wichtig, und deswegen das Ausrufezeichen bei „Beiträgen(!)“: Seiten werden im Moment noch nicht vom AMP Plugin verarbeitet. Somit liegen am Ende „nur“ Ihre Beiträge als AMP Version vor.

Mehr zu AMP lesen Sie unter https://www.ampproject.org

Combiner und Minify Plugin installieren

Schon nach der Basis Installation sehen Sie im Quelltext Ihrer WordPress-Seite viele Javascript und CSS-Dateiaufrufe.

Jeder Aufruf bedeutet für den Browser einen neuen Prozess, der die entsprechende Datei herunter lädt (auch „Request“ genannt).
Hier wird schnell erkennbar: Je mehr Requests, desto langsamer der Seitenaufbau. Wie schön wäre es, gäbe es eine Möglichkeit, alle Javascript und CSS-Request jeweils zu nur einem Request zusammenfassen.

Genau dies macht ein „Combine“ Plugin wie Autoptimize.

Autoptimize geht hierbei folgendermaßen vor:

• es sammelt alle CSS und Javascript Dateien
• kombiniert sie jeweils zu einer einzigen Javascript bzw CSS-Datei
• komprimiert die jeweiligen Dateien. Entfernt also alle Kommentare, Leerzeilen, Zeilenumbrüche und benennt Variablen und Funktionen in extrem kurze Versionen um
• und liefert am Ende nur noch diese beiden Dateien, also eine CSS und eine Javascript-Datei aus.

So werden zig Requests auf zwei Requests und die Dateigröße minimiert..

Im Verbund mit einem Cache-Plugin (s.o.) geben Sie Ihrer Webseite damit einen massiven Geschwindigkeitsschub und Suchmaschinen wie Google belohnen Sie dafür zusätzlich mit guten Rankings.

Bildkomprimierung

Mit den größten Bandbreiten-Verbrauch haben sicherlich die Bilder auf Ihrer Webseite. Große Header- oder Galeriebilder brauchen, vor allem auf mobilen Geräten, oft ewig zum Herunterladen und belasten das Datenvolumen Ihrer Benutzer.

Klar, dass Sie damit einige Benutzer vielleicht sogar vergraulen, denn wenn nach dem Besuch Ihrer Webseite große Teile des Monats-Datenvolumens verbraucht ist, ist dies mehr als ärgerlich.

Deswegen sollten Sie immer für optimale, also kleinstmögliche, Bilder sorgen. Zum einen sollten Sie dafür natürlich Ihre Bilder nur so groß ablegen und ausliefern, wie sie am Ende gebraucht werden, zum anderen sollten die Bilder so komprimiert wie möglich sein.

In beiden Fällen sollten Sie Ihre Bilder am besten entweder in einem Grafikprogramm vorbereiten, oder in WordPress selbst beschneiden. Am Ende kommen aber trotzdem meist Versionen heraus, die noch ein bisschen mehr komprimiert werden können, ohne sichtbare Verluste zu erleiden.

Hierfür gibt es dann automatische Bildkomprimierungs-Plugins wie z.B. WP Smushit. Diese Plugins optimieren Ihre Bilder in Sachen Kompression sofort und automatisch beim Upload, so dass Sie immer die bestmögliche, weil kleinste, Version online haben.

Am Ende bleibt hier festzuhalten: Optimierte Bilder = weniger Datenverbrauch = schnelleres Laden Ihrer Seiten. Und wieder das bereits bekannte Plus: Suchmaschinen wie Google belohnen Ihre Arbeit durch besseres Ranking.

CDN aufsetzen

Ein Content Delivery Network (CDN) ist ein heute weit verbreitetes System zum schnellen Ausliefern von Ressourcen wie z.B. Bildern, Javascript und CSS-Dateien.

Ein CDN besteht aus vielen, über die ganze Erde verteilten Servern, welche dann, je nach Sitz des Besucher, angesteuert werden. Sitzt der Besucher z.B. in der Nähe von Nürnberg, bekommt er die Inhalte der aufgerufenen Webseite vom Server aus Nürnberg, selbst wenn die eigentliche Webseite auf einem Server in New York liegt.

Der Vorteil liegt auf der Hand: Kurze Wege, schnelle Auslieferung.

Zusätzlich cachen CDNs die Inhalte, was zu einer sehr viel höheren Auslieferungsgeschwindigkeit beiträgt und somit das Anzeigen Ihrer Webseite nochmal signifikant erhöhen kann.

Mehr Informationen zu CDNs erhalten Sie in diesem Artikel.