Höhere Ladegeschwindigkeiten Ihrer Website wirken sich positiv auf die Besucherzufriedenheit aus und führen zu einem besseren Ranking bei den Suchmaschinen. Für das beliebte CMS WordPress gibt es eine Reihe neuer Tools und Plug-Ins zur Optimierung der Geschwindigkeit. Steigern Sie jetzt mit den folgenden Tipps die Performance Ihrer Seite.
Google PageSpeed Insights – Indikator für die Geschwindigkeit
Verschaffen Sie sich zuerst einen Überblick über den Istzustand. Wie schnell lädt die Website und an welchen Stellen lässt sich der Ladevorgang beschleunigen? Antworten auf sämtliche Fragen liefert das kostenlose Tool Google PageSpeed Insights. Tragen Sie Ihre Website ein und schauen Sie sich die Auswertung an. Die Verbesserungsvorschläge orientieren sich an Best-Practices, ein Wert von 100/100 ist nicht in jedem Fall möglich und muss nicht zwingend erreicht werden. Ein Wert von 80 gilt als sehr gut.
Tipp: Installieren Sie das WordPress-Plugin Google PageSpeed Insights for WordPress zur Auswertung Ihrer Website.
1. Optimieren der Bilder für kürzere Ladezeiten
Optimierte Bilder verkürzen die Ladezeit drastisch.
Sind die Bilder bereits komprimiert? Das Plug-In Optimus Image Optimizer gewährt eine verlustfreie Komprimierung, Sie müssen keine Qualitätsverluste hinnehmen. Nach der Installation erfolgt die Optimierung aller Bilddateien auf einen Klick. Später folgende Bilder komprimiert das WordPress-Plugin anschließend bereits beim Hochladen automatisch. Ein weiterer Pluspunkt: Das Tool konvertiert Bilder ins .webp-Format, was noch schnellere Ladezeiten nach sich zieht.
Hinweis: WebP-Bilder sind rund 26 Prozent kleiner als vergleichbare PNGs und bis zu 34 Prozent kleiner als JPEG-Bilder.
2. JavaScript- und CSS-Dateien verkleinern
Mit komprimierten JavaScript- und CSS-Dateien die WordPress-Seite beschleunigen.
Google Insights bemängelt bei vielen Standardinstallationen auch den Umgang mit den JavaScript- sowie CSS-Dateien und bietet Verbesserungsvorschläge für schnellere Ladezeiten. Das Minimieren der Dateien klappt mit dem kostenlosen Plug-In Autoptimize auf Knopfdruck. Es fügt alle Script- und Style-Dateien zusammen, minimiert und komprimiert diese und ergänzt ein Auslaufdatum für das Caching. Zusätzlich verschiebt das Plug-In Style-Informationen an den Seitenanfang und Script-Informationen ans Seitenende. Der HTML-Code wird minimiert und Sie profitieren von einer schlanken und leichtgewichtigen Seite. Die Entwickler empfehlen zusätzlich die Installation der Plugins WP Super Cache oder Hypercache. Außerdem bietet sich die Installation des kostenlosen Plugins WordPress Cache Enabler an, um die im ersten Schritt erstellten .webp-Bilder Besuchern anzuzeigen. Aktivieren Sie dafür in den Einstellungen des Plug-Ins Create additional cached version for WebP image support.
Zum Download von WP Super Cache
Zum Download von Cache Enabler
3. Render-Blocking JavaScript und CSS eliminieren
Zeigt Google PageSpeed Insights nach der Analyse Ihrer Website die Warnung an, dass sich JavaScript- und CSS-Ressourcen above the fold befinden? Für die JavaScript- und CSS-Dateien erfolgt die Optimierung mithilfe des bereits installierten Plug-Ins Autoptimize. Beseitigen Sie dazu in den JavaScript-Einstellungen den Haken bei Force JavaScript in und setzen Sie bei den CSS-Einstellungen den Haken bei Inline all CSS. Zudem gehören Schriftarten meist zu den blockierenden Ressourcen, das kostenlose Plug-In Font Awesome CDN von KeyCDN ist für die Verwendung alternativer Schriften sehr beliebt. Kopieren Sie den folgenden Code vom Header vor das schließende -Tag des verwendeten Templates:
< link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet" > (Bitte Leerzeichen vor und nach "<" ">" entfernen!!)
4. Browser-Caching: Bearbeiten der .htaccess-Datei
In der .htaccess-Datei sorgen verschiedene Konfigurationen für schnelle Seitenladegeschwindigkeiten. Ein effektiver Weg ist die Aktivierung des Browser-Cachings. Folgen Sie dieser Anleitung zum Browser-Caching für weitere Informationen.
5. Komprimierung aktivieren
Bei allen Plug-Ins von KeyCDN ist Gzip zur Komprimierung der Daten bereits aktiviert. Gzip komprimiert die Dateien und beschleunigt so die Ladezeiten. Fügen Sie zur Aktivierung alternativ der .htaccess-Datei folgenden Code hinzu:
< IfModule mod_deflate.c > (Bitte Leerzeichen vor und nach "<" ">" entfernen!!) # Komprimiere HTML, CSS, JavaScript, Text, XML und 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 # Browser bugs entfernen (nur für wirklich alte Browser) 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 < IfModule > (Bitte Leerzeichen vor und nach "<" ">" entfernen!!)
Fazit zur PageSpeed-Optimierung für WordPress
Die Vorschläge von Google PageSpeed Insights zur Optimierung der Seitenladegeschwindigkeit sind jetzt umgesetzt. Im Idealfall erreichen Sie eine Performance-Bewertung von mindestens 80 Punkten. Sie müssen nicht die 100/100-Punktebewertung anstreben, kleine Details lassen sich nicht immer weiter verbessern. Berücksichtigen Sie auch die Informationen für eine bessere Nutzererfahrung.
Wir haben ein wichtiges Tool vergessen oder Sie haben Fragen oder Anregungen zum Thema PageSpeed-Optimierung für WordPress? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.
Bildnachweis: Fotolia, Lizenz: Host Europe
Wolf-Dieter Fiege
Letzte Artikel von Wolf-Dieter Fiege (Alle anzeigen)
- Was ist Dynamic Rendering und wie lässt sich damit das JavaScript-Crawling verbessern? - 23. August 2019
- React Native für Ihre Apps in Android & iOS - 20. August 2019
- Was sind htaccess Redirects und worauf sollten Sie bei der Weiterleitung achten? - 15. Juli 2019
Was hat es mit diesen Tools auf sich?
https://developers.google.com/speed/pagespeed/module/build_mod_pagespeed_from_source
Hallo Ute,
Google Page Speed ist ein Programm, mit dem man die Ladezeiten von Webseiten und Optimierungen testen kann. https://de.wikipedia.org/wiki/Google_Page_Speed Für den Betrieb dieses Tools gilt es beim Einsatz von bestimmten (Linux)Betriebssystemen Anforderungen zu beachten, die hier vorgestellt werden.
Beste Grüße
Wolf-Dieter
Es muss nicht zwangsläufig an WordPress, den JavaScripts oder iframes liegen – manchmal ist einfach der Provider nicht der Schnellste ….
Hallo Sabiene,
ja, dass ist richtig. Deshalb sollte man vor der Einrichtung einer neuen Internetpräsenz nicht nur auf die Performance des Hosting-Produkts, sondern insbesondere auch auf die garantierten Leistungen des Hosting-Providers achten. Ein wichtiger Punkt ist, ob die garantierten Leistungen wie z.B. bei Host Europe in Service-Level-Agreements fixiert sind.
Mit besten Grüßen
Wolf-Dieter
Wie sieht es mit dem Plugin W3 Total Cache aus? Wird dies nicht empfohlen – und wieso?
2 Plugins für den ein- und selben Zweck finde ich ein wenig übertrieben!
Danke und LG
Hallo Florian,
W3 Total Cache hatte ich bereits in meinem ersten Artikel zum Thema vorgestellt. https://www.hosteurope.de/blog/pagespeed-optimierung-fuer-wordpress/
Einige der vorgestellten Plug-Ins ergänzen sich sehr gut, andere sind Alternativen. Welche Plug-Ins man für seine WordPress-Seite einsetzen sollte, hängt natürlich sehr stark vom Content, der Zielsetzung und dem Traffic der entsprechenden Webpräsenz ab.
Mit besten Grüßen
Wolf-Dieter
Hallo Wolf-Dieter,
vielen Dank für die Antwort.
Da der Beitrag schon gut 2 Jahre alt ist, werde ich mich wohl auf den „aktuelleren“ beziehen und die oben genannten Möglichkeiten einmal testen.
LG
Hallo Wolf-Dieter,
toller Artikel und eine gute Ergänzung zum vorherigen Artikel. Fehlt aber beim Browser-Caching nicht die Anleitung?
Gruss
Bastian
Hallo Bastian,
oh ja, der entsprechende Beitrag (https://www.hosteurope.de/blog/browser-caching/) war noch nicht verlinkt. Habe das gerade nachgeholt. Vielen Dank für den Hinweis.
Beste Grüße
Wolf-Dieter
Im Artikel steht
‚…Kopieren Sie den folgenden Code vom Header vor das schließende -Tag des verwendeten Templates:…‘
Vor welchen Tag? Dem Head-Tag??
Hallo Marcus,
ja, das war etwas unpräzise ausgedrückt. Der Code muss natürlich in die Headersektion eingefügt werden.
Ausführlichere Informationen zum Plug-In Font Awesome CDN gibt es hier: https://fontawesomecdn.com/
Beste Grüße
Wolf-Dieter
Hallo Wolf-Dieter,
das Plugin Cache Enabler kannte ich bis jetzt noch nicht , werde es mal Testen ,vielen Dank für den guten Artikel.
Beste Grüße
Harald
Wer auf Word Press setzt, wird immer wieder mit Problemen beim Thema Page Speed konfrontiert werden. Wenn nicht jetzt, dann in Zukunft bei neueren WP-Versionen. Die Entwickler der WordPress-Templates oder Plug-Ins gucken zu gerne nur auf schöne Optik oder „tolle“ Funktionalität. Oder die Entwickler wollen zeigen, wie cool etwas ist (Effekte) und was sie programmiertechnisch gerade neu gelernt haben und drauf haben. Anders hier, so funktioniert Page Speed auf 100% optimiert zum Beispiel bei einer sehr einfachen Webseite ohne viel Firlefanz: http://lichttherapie-lampe.de
Die Ergebnisse auf Insights hier: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flichttherapie-lampe.de%2F&tab=desktop
100% sind also problemlos möglich bei hosteurope, die genannte Seite ist bei hosteurope gehostet. Das geht auch mit WordPress, wenn nicht zig PlugIns und das richtige Template verwendet werden.
Hallo.das geht nicht nur bei Hosteurope auch bei anderen Providern mache aber keine Werbung für meinen Provider ist ja nicht schwer raus zu bekommen. Ohne CDN habe ich eine Test Geschwindigkeit von 420 bis 390 Millisekunden. (https://tools.pingdom.com/#!/3MQuI/https://slidermusic.de) auch mit viel Firlefanz es geht!!! Auch bei Google ohne CDN Good 100 / 100
(https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fslidermusic.de%2F) man muss halt viel Basteln und Lessen dann geht es…..
Mit CDN habe ich zwar 300 bis 290 Millisekunden aber möchte auch weiter weg schnell sein nicht nur Deutschland.
Habe ungefähr 20 Plugins laufen denke habe zwar irgendwo noch en Fehler den ich wie irre suche aber sie leuft erst mal….:-)
Danke für den Artikel! Die Maßnahmen, die meine Punkte bei Google erhöhen konnten, waren die Aktivierung des Browser-Cachings sowie die Aktivierung der Komprimierung in der .htaccess. Die vorgestellten Plugins wirkten sich für meine Seite negativ aus. Lediglich „Above The Fold Optimization“ brachte mich in die grüne Region. Allerdings funktionieren bestimmte Javascripte/CSS nicht mehr, sodass Animationen, Sticky Header, Parallax-Scrolling… nicht mehr funktionieren. Wahrscheinlich habe ich aufgrund meiner geringen Erfahrung auch nicht den notwendigen Durchblick.
Was allerdings auffällt: Ich habe die Seite dieses Artikels analysieren lassen und es ergeben sich folgende Punkte: 50/100 Mobil – 66/100 Desktop und selbst die Startseite von Hosteurope und vielen anderen großen Seiten bewegt sich im Bereich von 60-85 Punkten. Ich denke, das sind Werte, die sich erreichen lassen.
Hallo Andi,
ja, das ist uns bewusst. Es gibt leider noch ein paar Blocker, die die Ladezeiten nach unten ziehen. Aber wir sind dran.
Mit besten Grüßen
Wolf-Dieter
Ich komme aktuell auch auf 58/100 bei Dekstop und wollte heute WP Super-Cache testen. Leider bekomme ich immer einen 500er Server Error. Ich habe bereits alles was google mir an Lösungsvorschlägen ausgespuckt hat getestet. Alle Plug-Ins Deaktiviert, die htaccess umbenannt, eine php.ini ins admin geladen um den Speicher zu erhöhen(wtf?) … nix hilft. Sobald ich Cache auf „true“ in der config setze bekomme ich einen http 500 error. Die Seite ist http://www.soulmush.de
Kurzer Nachtrag: Ich hab alle Tipps mit etwas Hilfe vom Kundensupport umsetzen können und bin jetzt bei 59/100 Mobile und 89/100 auf Desktop. (vorher: 42Mobile 58Desktop)
Vor allem die Änderungen in der .htaccess haben am meisten bewirkt… das WP Cache Plugin hingegen lediglich auf beiden Seiten nur einen(!) Punkt Verbesserung. Und das hat bei der Installation am meisten Theater verursacht.
Den Code für die .htaccess sollte aber nochmal jemand korrigieren… da fehlen korrekte Anfangs- und End-Tags — wenn man Ihn so übernimmt produziert das Servererrors.
Was heißt das? (Bitte Leerzeichen vor und nach „“ entfernen!!)
Soll ich die Leerzeichen entfernen, wenn ja wo denn bitte?
Warum ist deine Seite eigentlich nicht optimiert?
Die meisten Blogger schreiben nur für Geld aber nutzen tun sie nichts davon.
Nicht sehr vertrauensvoll.
Hallo Scharlotte,
vielen Dank für die Nachfrage. Die Kennzeichnung: „(Bitte Leerzeichen vor und nach „“ entfernen!!)“ ist sicher etwas befremdlich. Zum Hintergrund: Wenn man in WordPress die typische Code-Kennzeichnung verwendet, werden die so markierten Zeilen leider nicht angezeigt, deshalb habe ich mir mir diesem „Trick“ geholfen. Bitte in der betreffenden Zeile das Leerzeichen nach „< " und das Leerzeichen vor „>“ entfernen.
Du hast Recht. Der Host Europe-Blog ist zwar schon in vielen Bereichen optimiert worden, es gibt jedoch noch einige „Baustellen“, die allerdings mit der etwas untypischen Konfiguration dieser Seite zu tun haben. Wir arbeiten daran.
Mit besten Grüßen
Wolf-Dieter