Schnellere Ladezeiten mit WordPress

Wer wartet schon gerne? Schnellere Ladezeiten bedeuten mehr Kunden. Und eine bessere Platzierung in Google. Lernen Sie in diesem Beitrag, wie Sie den Turbo für Ihre WordPress-Seite zünden.

Björn Höfer 26.02.2018

Lesezeit:

PageSpeed Tools
HTTP-Requests minimieren
Bilder optimieren
Skripte zusammenfassen
Above the fold Skripte priorisieren
Komprimieren von HTML, CSS, JS
Browser Caching nutzen
301-Weiterleitungen vermeiden
Servereinstellungen
Weniger Plugins
WordPress Cache-Plugins
Ausblick: CDN & Managed Hosting

1. PageSpeed Tools

Um die Ladezeiten einer Webseite zu messen, gibt es eine Vielzahl von online-Diensten. Die grundlegendsten Funktionen lassen sich sogar kostenlos nutzen:

2. HTTP-Requests minimieren

Je mehr einzelne Dateien geladen werden, desto länger dauert es. Das ständige Hin und Her zwischen Server und Browser benötigt Zeit. Daher sollten die Server-Anfragen auf ein Minimum reduziert werden. Das Ganze lässt sich durch das Zusammenfassen von Skripten wie CSS-Stylesheets und Javascript erreichen. Mehr dazu im 4. Abschnitt.

3. Bilder optimieren

Einer der Hauptfaktoren ist und bleibt die Dateigröße von Bildern. Vor dem Upload in die WordPress-Mediathek sollten alle Bilder komprimiert werden. Dadurch wird die Datenmenge reduziert, ohne die Bildqualität sichtbar zu verändern. Oft genügt die Option „für Web speichern“ in Bildbearbeitungsprogrammen nicht aus. Zusätzliche Optimierung spart wertvolle Ladezeit.

ImageOptim Computer-Software
Imagify Plugin für WordPress

Eine weitere Möglichkeiten bieten CSS-Sprites. So können häufig verwendete Grafiken in einer Datei zusammengefasst werden. Die Darstellung wird über CSS-Regeln im Stylesheet gesteuert.

Im Zeitalter der Mobilgeräte sollten sich alle Inhalte einer Webseite an die jeweilige Bildschirmgröße des Nutzers anpassen. Das bedeutet nicht nur, die Webseite in Form eines „responsive design“ umzusetzen, sondern auch, die jeweils passenden Bildformate bereitzustellen (responsive images). Diese Aufgabe übernimmt WordPress seit der Version 4.4 automatisch. Beim Hochladen in die Mediathek werden verschiedene Bildgrößen erzeugt und je nach Gerät des Websitebesuchers ausgegeben.

4. Skripte zusammenfassen

Wie bereits erwähnt, sollten Skripte und Stylesheets reduziert oder zusammengefasst werden. So muss weniger geladen werden, die Seite wird schneller ausgeliefert und angezeigt. Idealerweise wurde Ihr WordPress-Theme bereits in diesem Sinne programmiert. Durch den Einsatz schlecht entwickelter Themes oder zu vieler Plugins kann es aber vorkommen, dass viele Einzelskripte geladen werden. In diesem Fall können die Skripte mit Performance-Plugins (siehe 11.) nachträglich zusammengefasst werden.

5. Above the fold content priorisieren

Above the fold – das ist der Bereich einer Webseite, der auf den ersten Blick sichtbar ist, ohne scrollen zu müssen.

So gesehen wäre es am besten, dass dieser Teil schon angezeigt wird, während der Rest der Seite noch lädt. Hier kann es aber zu Verzögerungen kommen, wenn JavaScript und CSS-Ressourcen bereits zu Anfang des HTML-Dokuments geladen werden, obwohl sie für den sichtbaren Bereich noch gar nicht nötig sind. Kurzum: Die Seite wird erst angezeigt, sobald das komplette Dokument geladen wurde.

Die Lösung besteht darin, die Skripte aufzuteilen: Alles was für den den above the fold-Bereich wichtig ist, wird weiterhin imgeladen. Der Rest wird in den Schlussbereich vor das schließende tag verschoben.

Auch hier sind Vorsicht und professionelles Vorgehen angebracht, da das Aufteilen der Skripte zu Darstellungsfehlern führen kann. Hier am besten einen Fachmann beauftragen.

6. Komprimieren von HTML, CSS, JS

Der Quellcode einer Webseite enthält oft Bestandteile wie Kommentare, Absätze und Leerzeilen, die für den Programmierer zwar Übersichtlichkeit bringen, für das Funktionieren der Webseite aber unnötig sind. Das kann durch Plugins erreicht werden oder manuell durch Gzip-Komprimierung in der .htaccess-Datei:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Voraussetzung ist ein Apache-Server, auf dem „mod_gzip“ aktiviert sein muss. Möglich sind hier bis zu 80 Prozent Kompression.

7. Browser Caching nutzen

Wer seine Webseite mit einem der oben genannten PageSpeed-Tools untersucht hat, wird unter den Verbesserungsvorschlägen sicher auch den Hinweis bekommen, den Browser-Cache zu aktivieren. Ebenso wie gzip und mod_deflate wird dies über einen Eintrag in die .htaccess-Datei geregelt:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
</IfModule>

Die hier verwendeten Lebensdauer der Caching-Ressourcen („access plus …“) sind Durchschnittswerte und können je nach Projekt anders ausfallen.

8. 301-Weiterleitungen vermeiden

Eine Weiterleitung wird dann nötig, wenn sich die URL einer Seite ändert. Ein 301-Eintrag in der .htaccess-Datei leitet beim Aufruf über den alten Link auf die neue Seitenadresse weiter. So weit so gut. Problematisch wird es bei zu vielen Weiterleitungen oder Weiterleitungsketten. Die Kommunikation zwischen Browser und Server wird verlangsamt. Auch wenn 301-Weiterleitungen nötig sein können, ist Vorsicht geboten, nicht den Überblick zu verlieren.

9. Servereinstellungen

Über die Konfiguration des Servers lassen sich weitere Verbesserungen in der Ladezeit erreichen. So sollte man stets auf eine aktuelle PHP-Version achten. Denn bei der Weiterentwicklung von PHP wird immer auch die serverinterne Performanz optimiert.

Die Aktivierung von SSL-Verschlüsselung ist nicht nur aus Gründen der Sicherheit empfehlenswert. Das https-Protokoll arbeitet effektiver als übliches http.

Durch Aktivierung von OPcache verringert sich die Ladezeit der Webseiten erheblich, weil die Verarbeitung der PHP-Anwendungen deutlich beschleunigt wird. So laden dynamische Webseiten mit PHP 7 und OPcache mehr als doppelt so schnell als mit PHP 5.6.

Manche Website-Hoster haben auch HTTP Keep Alive aktiviert. Diese Einstellung erlaubt es, Verbindungen zwischen Server und Browser aufrechtzuerhalten und verringert erneute Anfragen. Wenn Sie keinen Zugriff auf die Servereinstellungen haben, lässt sich keep alive auch in der .htaccess aktivieren:

 Header set Connection keep-alive

10. Weniger ist Mehr: WordPress Plugins

Gerade bei WordPress kommt man gern in Versuchung, viele Plugins zu installieren. Sicher, die kleinen Helfer erleichtern viele Funktionen auf Knopfdruck. Allerdings kann es ab einer gewissen Anzahl oder einfach durch schlecht programmierte Plugins zu deutlichen Performanz-Einbußen kommen. Hier empfiehlt es sich, unnötige Plugins auszusortieren oder auf effizientere Alternativen umzusteigen.

11. WordPress Cache-Plugins

Wer sich die Arbeit erleichtern will, kann auf Cache-Plugins zurückgreifen. Wenn auch nicht alles, übernehmen diese zumindest einen Teil der oben aufgeführten Optimierungen. Achtung: Manche Einstellungen können zu Fehlern in der Websitedarstellung führen – gerade bei Komprimierung, Zusammenfassung und above the fold-Priorisierung von Skripten. Vorher also immer ein Backup anlegen!

Meine Plugin-Empfehlungen:

WP Rocket: großer Funktionsumfang, erleichterte Konfiguration, kostenpflichtig
W3 Total Cache: großer Funktionsumfang, aufwendige Konfiguration, kostenlos
Cachify: kleiner Funktionsumfang, einfache Bedienung, kostenlos

Ausblick: Managed WordPress Hosting & CDN

Ja, es ist immer noch Raum für Verbesserung.

Bei Webseiten mit sehr hoher Besucherfrequenz empfiehlt sich Managed WordPress Hosting. Dort werden die Server zu 100% auf die Bedürfnisse von WordPress abgestimmt, was Ladezeiten im 1-Sekunde-Bereich ermöglicht.

Wer ein internationales Publikum anspricht, sollte sein online-Angebot auch auf Servern im Ausland verfügbar machen. Die optimale Lösung lautet CDN: Über ein weit gespanntes Servernetzwerk können die Inhalte überall auf dem Globus schnell ausgeliefert werden.