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 Hyper 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.

Weitere interessante Plug-Ins zum Thema PageSpeed-Optimierung für WordPress finden Sie in diesem Artikel.

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

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

18 thoughts on “PageSpeed-Optimierung für WordPress – Update: Die neuen Tools

  1. 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

  2. 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

  3. Im Artikel steht

    ‚…Kopieren Sie den folgenden Code vom Header vor das schließende -Tag des verwendeten Templates:…‘

    Vor welchen Tag? Dem Head-Tag??

  4. 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.

  5. 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

  6. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.