Wordpress Pagespeed Optimierung

Pagespeed Optimierung für WordPress

WordPress Pagespeed Optimierung in 5 einfachen Schritten! So macht ihr eure WordPress Site schneller und das Ganze super einfach mit Plugins. Diese einfachen Tipps helfen euch die Ladezeit eures Blogs zu optimieren.


Die WordPress Geschwindigkeit ist nicht nur ein wichtiger Suchmaschinenfaktor, sondern beeinflusst auch maßgebend die User Experience. Wenn man seine WordPress Website das erste Mal einem Pagespeed Test unterzieht, kommt es oft zur Ernüchterung. Meist ist man hier weit entfernt von einem Google PageSpeed Score 100/100. Website Speed Tests mit Tools wie Google PageSpeed Insights durchzuführen ist eine feine Sache. Aber wie genau funktioniert die WordPress PageSpeed Optimierung?

Es ist wichtig, sich hierfür etwas Zeit zu nehmen, denn das Optimieren der Website Geschwindigkeit mit WordPress ist nicht immer einfach. Dennoch soll dieser Artikel in einfachen Schritten erklären, wie Ihr einen Google PageSpeed Score in einem grünen Bereich erreichen könnt.

Bitte beachtet auch, dass der Speed eures Webhosters (Webspace auf dem eure WordPress Installation liegt) auch direkten Einfluß auf euren PageSpeed Score hat. Wer also am Webhoster spart, der verschenkt wichtiges Speed-Potenzial. In meinem Blog-Artikel über WordPress Webhosting Anbieter habe ich die besten drei Anbieter vorgestellt.

Pagespeed Score 100/100 mit WordPress

Aus eigener Erfahrung kann ich sagen, dass eine Performance optimierte Website wesentlich besser bei Google rankt. Bitte behaltet immer im Hinterkopf, dass ein Google PageSpeed Score 100/100 manchmal aufgrund der Website Umgebung technisch schwer möglich ist. Dennoch sollte ein Ranking im oberen grünen Bereich mit diesen einfachen Tipps zur WordPress Pagespeed Optimierung möglich sein.

WordPress kann auf der einen Seite ein Alptraum sein für die Google PageSpeed Optimierung (zu viele Plugins drücken auf die Performance eurer Website), auf der anderen Seite gibt es wiederum Plugins, die euch die Google PageSpeed Optimierung mit WordPress erleichtern.

Verschiedene Website Speed Test Tools

Noch eine kleine Anmerkung: Es gibt natürlich nicht nur Google Page Speed Insights, sondern auch noch andere Tools, um eure WordPress Website auf Performance zu überprüfen. Diese Tools liefern neben einem anderen Einblick auch noch weitere nützliche Tipps, um die Geschwindigkeit zu optimieren. Im Nachfolgenden sind noch einige andere Geschwindigkeits Check Tools aufgelistet:

GTMetrix Website Speed Test

Website Speed Tools GTMetrix

Dieses Tool wirkt auf den ersten Blick etwas unübersichtlich – bietet jedoch zu Google Page Speed Insights einen tieferen Einblick. Ich empfehle mit Google PageSpeed Insights anzufangen, die Geschwindigkeit zu optimieren, um die Feinheiten mit https://gtmetrix.com/ zu tunen.

Pingdom Website Speed Test

Website Speed Tools Pingdom

Mit Pingdom könnt ihr untersuchen, was an eurer Website schnell, langsam oder zu groß ist. Dazu gibt es auch noch die Best Practices, die ihr auf euer WordPress Projekt anwenden könnt. Pingdom zeigt zuverlässig Dateigröße, Ladezeit, Geschwindigkeit und andere Details zu jedem Seitenelement an. Die Speed Liste von pingdom kann dazu noch schön gefiltert und nach Belieben sortiert werden. Damit könnt ihr bis ins letzte Detail analysieren, was genau eure WordPress Website verlangsamt. Ein Paradies für Pagespeed Nerds.

YSlow Website Speed Test Tool

Website Speed Tools YSlow

YSlow analysiert Webseiten mit dem Fokus darauf, warum sie langsam sind. Das Besondere an YSlow: Der Algorithmus basiert nicht auf Google PageSpeed Kriterien, sondern auf die Geschwindigkeitskriterien von Yahoo. YSlow zeigt auch Verbesserungsvorschläge auf.

Webpage Analyzer

Website Speed Tools Webpage Analyzer

Web-Seite Analyzer ist ein einfaches und unkompliziertes Webseite Geschwindigkeits Tool. Zugegeben: Der Webpage Analyzer ist ziemlich unsexy, bietet aber eindeutige Werte und zeigt auch Verbesserungsvorschläge. Dieses Website Speed Tool ist eher was für die erfahrenen Pagespeed Optimierer.

Webpagetest Speed Tool

Website Speed Tools Webpagetest

Mit den Webpagetest Speed Tool könnt ihr eure Website Geschwindigkeit von mehreren Standorten rund um den Globus in echten Browsern und mit verschiedenen DSL-Geschwindigkeiten testen. Mit dem Webpagetest Tool könnt ihr auch verschiedene Websiten untereinander testen. Das Speed Tool bietet zudem noch andere erweiterte Funktionen an: Multi-step transactions, Video Capture, Content blockierende Elemente und anderes.

6 Schritte zum optimalen Google PageSpeed Score

 

1. Bilder optimieren

Google PageSpeed Insights hält bereits wertvolle Optimierungstipps bereit. Das Erste auf das uns Google PageSpeed Insights hinweisen wird, ist die Optimierung unserer Bilder.
Dafür können wir einfach das WordPress Plugin EWWW Image Optimizer installieren. Durch den EWWW Image Optimizer ist eine verlustfreie Kompression eurer Bilder möglich. Das bedeutet, dieses Plugin verkleinert eure Bilder automatisch, ohne dabei die Qualität zu beeinflussen. Das Schöne an diesem Plugin ist, es hat ein bulk-optimization Feature – nach der Installation könnt ihr mit einem Klick eure gesamte Medienbibliothek optimieren. Danach wird dieses Plugin jedes Bild, das ihr hoch ladet automatisch optimieren. Damit wird die Geschwindigkeit eurer WordPress Website deutlich erhöht.

Ich deaktiviere jedoch dieses Plugin nach dessen Benutzung, damit WordPress nicht unnötig durch Plugins verlangsamt wird. Beim Upload neuer Bilder wird das Plugin wieder aktiviert – die entsprechenden neuen Bilder werden optimiert und das Plugin wird wieder deaktiviert.

2. Javascript und CSS reduzieren & dynamische Inhalte cachen

Der zweite Optimierungstipp von Google PageSpeed Insights ist Javascript, HTML und CSS zu reduzieren.

Durch die Modularität von WordPress kann es oft dazu kommen, dass viele verschiedene CSS- und Javascript-Dateien eure WordPress-Installation verlangsamen. Teilweise kommt jedes WordPress-Plugin mit einer oder mehreren CSS-Dateien daher. Aber keine Angst, WordPress bietet hier für die Website-Geschwindigkeits-Optimierung verschiedene Plugins an.

Ein weiterer Punkt, der mit reinspielt ist, dass WordPress dynamisch aus eurer Datenbank generiert wird. Hierzu wird dem Server viel abverlangt, was unter Umständen dazu führen kann, dass eure WordPress Website extrem langsam werden kann. Aber wenn eure Inhalte gar nicht sonderlich dynamisch sind – ihr also mit statischen Pages und Posts arbeitet, dann könnt ihr diese doch einfach in statische HTML Pages umwandeln, anstatt für jeden Besucher eurer Page eine dynamische Page aus eurer Datenbank bereitzustellen. Dafür nutzt man das Caching. Hier wird einfach eine statische Version aus der dynamischen WordPress Website erstellt. Vereinfacht ausgedrückt wird also eine statische HTML Version aus eurem PHP Code erstellt, der so den Server entlastet und schneller an den Besucher ausgeliefert werden kann.

Um Javascript, HTML und CSS zu reduzieren und euer dynamisches PHP in statisches HTML zu verwandeln benutzen wir das kostenlose Plugin W3 Total Cache. Die Einstellung für das Caching Plugin nemmt ihr wie folgt vor:

3. Above the Fold-Optimierung

Was bedeutet Above the Fold? Bevor eine Website im Browser Fenster angezeigt werden kann, müssen Javascript und CSS-Dateien geladen werden. Above the Fold ist die Ansicht, die der User ohne scrollen sieht. Dabei sind natürlich Skripte und CSS Dateien, die für den Rest der Website (Footer, Skripte, Animationen, die sich unterhalb des sichtbaren ersten Bereiches befinden) benötigt werden, sekundär. Das bedeutet, wir müssen für die Above the Fold-Optimierung dem Browser nur das geben, was er für die Anzeige des ersten sichtbaren Bereiches (Above the Fold) benötigt. Keine Sorge – auch hierfür bietet WordPress wieder praktische Plugins.

Above the Fold Optimierung

Aber bevor ihr die Above the Fold-Optimierung durchführt, solltet ihr euch vorher noch ein paar Gedanken machen. Ich habe bei meiner WordPress Website bewusst auf die Above the Fold-Optimierung verzichtet. Mir hat die Above the Fold-Optimierung nämlich nur 2 Speedpunkte gebracht. Dafür musste ich jedoch mit einem komischen ersten Eindruck leben – und das auf jeder Unterseite.

Die hier beschriebene automatisierte Above The Fold-Optimierung hat zur Folge, das in den ersten Millisekunden eure Website nicht so aussieht, wie sie sollte – ein komischer erster Eindruck entsteht, bis die Website komplett geladen wurde. Solltet ihr Slider auf eurer Webpage haben, kann das sogar noch viel schlimmer aussehen. Hier muss man direkt an den CSS Code ran – und das ist sehr aufwändig und ohne bzw. mit schlechten Programmierkenntnissen kaum möglich. Manchmal bringt die Above the Fold-Optimierung auch nur ein paar wenige Speed Punkte mehr – da bringt es eher etwas, wenn ihr euch auf andere Bereiche konzentriert.

Da Google Fonts oder Schriftarten allgemein ebenfalls geladen werden müssen, blockieren diese auch das Rendering Eurer WordPress Website.

Für die Above the Fold-Optimierung braucht ihr das Above the Fold Optimization Plugin. Dies sollt ihr installieren und danach unter Plugins > Above the Fold Optimization auf „Einstellungen“ klicken. Klickt auf den Tab „Extract Full CSS“. Da wir zunächst eure Startseite optimieren wollen, wählen wir hier „/ – Root“ aus und klicken auf Download. Nun haben wir eine Datei, die unseren gesamten CSS-Code enthält.

Above the Fold Plugin für WordPress

Wir öffnen diese Datei (zum Beispiel mit einem Texteditor) und markieren den gesamten Code mit Strg+A bzw. Apfel+A. Wir kopieren den Code mit Strg+C bzw. Apfel+C in die Zwischenablage und rufen nun den Critical Path CSS Generator auf. Hier geben wir die URL zu unserer Startseite an (1) und kopieren den Code in das linke Feld (2). Danach klicken wir auf Create Critical Path CSS. Das sollte jetzt, je nach Größe, eine Weile dauern. Nun erscheint im rechten Feld der Code, der nötig ist, um eure Homepage Above The Fold zu rendern.

Diesen Code (Critical Path CSS Code) kopieren wir nun wieder in die Zwischenablage. Aber bevor wir den Code wieder in das Plugin einfügen können, sollten wir den CSS Code noch minifyen.

Above the Fold Speed Optimierung - minify CSS

Dazu rufen wir den CSS Minifier im Browser auf und kopieren den Code wieder in das linke Feld. Danach klicken wir auf „Minify“. Das Tool entfernt nun alle Zeilen und Freiräume und spart so nochmals wichtige Kilo Bytes. Wir kopieren den Code im rechten Fenster wieder in die Zwischenablage und fügen ihn nun in unser Above The Fold Optimization Plugin unter Settings ein. Danach das Ganze noch speichern und voila: Above The Fold-Optimierung gelungen.

Above The Fold Optimierung - Was ist passiert? Kritische Stimmen

Was haben wir getan? Ihr habt euch erst den ganzen CSS-Code ausgeben lassen, um dann mit dem Critical Path CSS Tool und eurer URL nur den erforderlichen CSS Code ausgeben zu lassen, um den Inhalt Above the Fold zu rendern. Dieser verkleinerte Code wird dann wiederum minifiziert und mittels des Above The Fold Plugins als Inline CSS auf jeder Seite im Head eures HTML-Dokuments eingefügt.

Hier gibt es kritische Stimmen, die Google stark für diesen Zwang kritisieren. Es gibt drei Punkte, die dafür sprechen, die Above the Fold-Optimierung wegzulassen und dafür auf ein paar Website Speedpunkte zu verzichten:

Schlechter Programmierstil

Jeder CSS-Profi weiß, dass Inline-CSS unbedingt vermieden werden sollte. Inline-CSS steht gegen die strikte Trennung von Semantik und Aussehen – es erfolgt wieder die Vermischung von Styling und HTML Code. Google zwingt hier jedoch durch die Above the Fold-Optimierung, auf jeder Seite Inline-CSS Code zu verwenden. Das schlimmste daran ist, dass zusätzlich zum Inline-CSS (das für kleinere Onepager sicherlich nur bedingt empfehlenswert ist) auch noch CSS-Dateien notwendig sind. Wir haben also von Haus aus mindestens zwei Stellen, an denen CSS Codes vorkommen. Dies bringt uns gleich zum zweiten Argument, das gegen die Above the Fold-Optimierung spricht:

Erschwerte Wartung und Veränderung des CSS-Codes

Da sich nun ein und das selbe an zwei unterschiedlichen Stellen aufhält, ist die Veränderung und Wartung des CSS-Codes extrem schwierig. Am konkreten Beispiel mit dem Above the Fold Optimization Plugin muss bei jeder kleinen Änderung des CSS Codes wieder der Critical Path CSS Generator benutzt werden und der Inline-CSS Code im Header der Site wieder aktualisiert werden.

Inline CSS Code wird auf JEDER Webseite neu geladen

Während externe CSS-Dateien einmal geladen werden und dann immer wieder Verwendung finden, wird durch das Inline-CSS im head der Site die Website beim Aufruf einer Unterseite eventuell etwas schneller – allerdings wird genau dieser Umstand beim Besuch mehrerer Unterseiten immer langsamer. Das Inline-CSS wird immer neu geladen. Damit verkürzt sich die Ladezeit bei einer Webseite – beim Aufruf mehrerer Webseiten wird die Ladezeit jedoch (durch das drei und x-fache Laden des Inline CSS’s) länger.

 

4. Browser Caching aktivieren

Wichtig zur Beschleunigung eurer Website ist das Browser Caching. Das Browser Caching dient dazu, statische Ressourcen, die sich nur selten oder gar nicht ändern, direkt aus dem Browser Cache zu laden. Dadurch werden CSS-Dateien und Bilder direkt von eurer Festplatte geladen – sofern ihr diese schon einmal von der Website geladen habt. Dadurch wird euer Server entlastet, da Grafiken nicht angefragt und geladen werden müssen. Natürlich verbessert das auch die Ladezeit eurer Website. Dieser Vorteil kann allerdings nur genutzt werden, wenn der Besucher schon einmal eure Website besucht und bereits Bilder und CSS-Dateien geladen hat.

Um das Browser Caching zu nutzen müssen wir Expires Header festlegen. Dies legen wir in der .htaccess Datei fest. Diese sollte im besten Fall auf eurem Server im Stammverzeichniss liegen. Falls nicht schaut bitte in eurem FTP-Programm, ob auch versteckte Dateien angezeigt werden. Bitte beachtet, dass die .htaccess eine wichtige Datei ist, die (bei unsachgemäßer Behandlung) eure Website lahm legen kann. Also vor der Editierung lieber ein Backup anlegen.

Wir müssen dem Browser nun sagen, dass bestimmte Dateien mit einem Alter X direkt aus dem lokal abgelegten Cache geladen werden können. Dies erreichen wir, indem wir folgenden Code in die .htaccess-Datei einfügen:

 # BEGIN Expires-Headers
 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/x-javascript "access 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
 <filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "max-age=2592000, public"
 <filesmatch "\\.(css)$">
 Header set Cache-Control "max-age=604800, public"
 <filesmatch "\\.(js)$">
 Header set Cache-Control "max-age=216000, private"
 # END Expires-Headers

Mit dem Browser Caching kann man eine Geschwindigkeitsoptimierung von bis zu 80% erreichen. Damit ist das Browser Caching ein wichtiges Werkzeug bei der Geschwindigkeitsoptimierung.

5. Dateien komprimieren mittels Deflate

Normalerweise werden eure Dateien unkomprimiert von eurem Server übertragen. Mit WordPress einher gehen jedoch oft größere Javascript-Dateien und andere Bibliotheken. Hier macht eine Kompression mittels Deflate Sinn, um die Übertragung der Dateien zum Nutzer zu beschleunigen. Falls Ihr einen Apache Server habt, unterstützt dieser das Modul deflate. Wenn ihr nicht genau wisst, was Ihr für einen Server habt, ist es sehr wahrscheinlich, dass ihr einen Apache Server habt, bzw. eure WordPress Website sich auf einem Apache Server befindet.

Ihr könnt den Server dann anweisen, die Kompression bei Auslieferung eurer Dateien zu benutzen. Dies geschieht nach Dateityp und passiert, indem ihr folgenden Code in eure .htaccess Datei einfügt:

# Deflate Compression by FileType
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
 </IfModule>

Wie immer ist Vorsicht geboten, wenn ihr an der .htaccess Datei auf eurem Server herumspielt!

WordPress Pagespeed Optimierung Anmerkung

Mit diesen einfachen Schritten schafft ihr es, dass eure Website einen guten PageSpeed Score erreicht. Weitere Optimierungen sind dann mit Programmieraufwand verbunden und hängen auch von eurem WordPress Theme ab. Aber mit diesen einfach Schritten schafft man schon einiges an Performance.

Bitte beachtet auch, dass euer Page Speed Score vom geladenen Content auf eurer Startseite abhängt. Wenn ihr also eine sehr lange Startseite habt, mit vielen Bildern (die über das img tag eingebunden werden) und womöglich noch Videos, wird euer Pagespeed auch wesentlich geringer ausfallen. Deshalb sollte man hier auf unnötige Spielereien verzichten. Auch viele JS-Dateien sind nicht unbedingt der Ladezeit eurer Website zuträglich. Hier geht es um einen Kompromiss zwischen Userexperience und der Ladezeit.

Fazit

Einen Pagespeed Score 100/100 zu haben ist sicherlich schön, jedoch sollte man das Ganze nüchtern betrachten. Für die SEO ist ein hoher Pagespeed Score sicher von Vorteil und kann die wichtigen paar Plätze bis auf Platz eins bzw. auf Seite 1 bringen. Dennoch zählt natürlich immer der Nutzer. Wenn ihr dem Nutzer eine komplett weiße Homepage anbietet, die sicherlich schnell lädt, aber völlig informationsfrei ist, werdet ihr mit der Page auch nicht ranken und dem Benutzer auch nicht das bieten können, weswegen er eure Website besucht – Ziel verfehlt.

Die Geschwindigkeitsoptimierung ist immer Mittel zum Zweck. Wie mit allem gilt: hier nicht blind optimieren und das Ziel aus den Augen verlieren, sondern verantwortungsvoll und nachhaltig agieren. Der User sollte immer im Vordergrund stehen.

  • 5/5
  • 2 ratings
2 ratingsX
Very bad!BadHmmmOkeGood!
0%0%0%0%100%
5 Kommentare
  1. Thomas Fanselow
    Thomas Fanselow says:

    Super toll geschrieben und sehr einfach nachzuvollziehen.
    Für mich einer besten deutschjsprachigen Artikel zu dem Thema Ladezeten optimieren, Danke für die Arbeit, die super Erklärungen und die Links zu den Plugins.

    Antworten
  2. Monti
    Monti says:

    Toller Bericht, versuche auch schon länger „mehr rauszuholen“…
    Meine Seiten pendeln sich leider alle so im „gelben Bereich“ bei 70 Mobil /75 Desk ein. Vor ca. einem Jahr waren diese alle noch schön im grünen. Aber auch Deine Seite hab ich mal durchlaufen lassen – 60/77 ist ja auch nicht so toll. Viele Grüße

    Antworten
    • Rafael
      Rafael says:

      Hi Monti,

      des Schuster Kinder gehen barfuß 😉
      Wie bereits geschrieben ist die Performance ein Kompromiss zwischen Content, Nutzer und Google. Das bedeutet, dass 100/100 nicht unbedingt das beste Nutzererlebnis bringen muss. Aber ja – du hast recht! Es gibt einige Stellschrauben, an denen ich auch noch drehen kann. Leider fehlt oft die Zeit.
      Beste Grüße
      Rafael

      Antworten
  3. Sebastian
    Sebastian says:

    Hmm, irgendwie bewirkte das Tutorial bei mir genau das Gegenteil. Die Werte sind runter gegangen (ich habe vorher Comet Cache statt W3 genutzt). Und sobald ich das Browser Caching mit dem Code hier in die htaccess packe, kriege ich ’nen 500er Fehler. Irgendeine Idee, was ich falsch mache?

    Antworten
    • Rafael
      Rafael says:

      Hi Sebastian,

      wie schon im Artikel beschrieben, ist die Pagespeed Optimierung sehr speziell bzw. individuell. Auch die Einstellungen beim W3 Plugin wollen gut gewählt sein – sonst passiert genau das Gegenteil: Der Pagespeed Score sinkt. In einem anderen Artikel habe ich die drei besten Caching Plugins vorgestellt:
      https://kopfundstift.de/wp-caching-plugins-vergleich/
      Den Code habe ich nochmals gecheckt und er funktioniert bei mir. Warum er bei dir zu einem 500er Fehler führt ist auf die Entfernung schlecht zu sagen. Manche Hoster bieten das Caching schon von Haus aus an. Hier kann es dann zu Konflikten kommen.

      Beste Grüße
      Rafael

      Antworten

Trackbacks & Pingbacks

    Dein Kommentar

    Want to join the discussion?
    Feel free to contribute!

    Schreibe einen Kommentar

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