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 Ladezeitoptimierung?
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 Ladezeit 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
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
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
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
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
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:
- W3 Total Cache Plugin installieren
- Im Backend auf Performance klicken
- Unter General Settings die Einstellung aus diesem Screen übernehmen: W3 Total Cache Tutorial
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.
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.
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.
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.
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 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
Wie immer ist Vorsicht geboten, wenn ihr an der .htaccess Datei auf eurem Server herumspielt!
Anmerkung zur Optimierung der Ladezeit
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.
Ein interessanter Artikel, danke. In meiner täglichen Praxis als Webdesigner sehe ich aber immer wieder das Problem, dass das Pferd von hinten aufgezäumt wird. Zuerst wird die Webseite gemacht. Das soll schnell gehen und günstig sein. Dann will man sie bequem verwalten können, am besten ohne einen einzigen HTML-Tag zu kennen. Also muss ein Pagebuilder her.
Prinzipiell wird ohnehin jedes Thema, bei dem man sich nicht auskennt, mit einem Plugin gelöst. Brauch man einen Icon, lädt man gleich eine Bibliothek. Braucht man eine Schrift, lädt man sie vom Google-Server. Usw. usw. Es wird also erst mal gehandelt und dann nachgedacht.
Und am Ende macht man dann einen Speedtest und ist entsetzt darüber, wie langsam die Seite lädt.
Dann muss man natürlich nochmals massenhaft Plugins installieren um die Problematik Pagespeed wieder in den Griff zu kriegen. Einfacher wäre es natürlich, wenn man die Sache von Anfang an so konzipiert, dass Dinge wie Pagespeed Vorrang vor Bequemlichkeit haben. Leider wollen das die wenigsten Leute, denn Webseiten klickt man sich halt zusammen…