(Update) Niemand wartet gerne, und niemand mag langsame Websites. Abseits dieser gefühlten Wahrheiten wissen wir, dass zu langsame Websites zu Kaufabbrüchen und Unzufriedenheit führen und dass die Ladegeschwindigkeit einer der SEO-Faktoren ist – alles wichtige Gründen, um die eigene Website zu optimieren.
Glücklicherweise sind wir bei der Ladezeit-Optimierung in der passablen Position, auf viele leistungsfähige Tools zurückgreifen zu können, die zudem häufig entweder kostenlos oder zumindest preiswert sind.
Die Analyse-Werkzeuge und -Dienste
Es gibt eine Vielzahl an Tools, die das Ladeverhalten Ihrer Website untersuchen. Die alle vorzustellen, würde allerdings den Rahmen dieses Artikels sprengen, daher werde ich mich hier auf die wichtigsten Vertreter konzentrieren.
PageSpeed Insights von Google
An erster Stelle gilt es, das Analyse-Tool von Google selbst zu nennen. PageSpeed Insights gibt es seit vielen Jahren, aber seit einigen Monaten nun unter einer neuen Adresse und mit aussagekräftigeren Zahlen und Daten.
Das neue PageSpeed Insights unter pagespeed.web.dev
Bei der Untersuchung liefert uns das Analyse-Werkzeug von Google eine Reihe an wichtigen Daten. Es zeigt uns, welche Maßnahmen bereits umgesetzt wurden, wo die Schwachstellen liegen, welche Maßnahmen noch offen sind, und wo die größten Optimierungspotenziale liegen.
Jede der angemerkten Positionen wird kurz beschrieben und in den meisten Fällen auf einen englischsprachigen Hilfe-Artikel verlinkt.
Diese Website hat schlechte Werte, die sich schon beim Anzeigen von Teilen der Inhalte (FCP) manifestieren: 2,6 Sekunden, bis es überhaupt etwas zu sehen gibt, ist zu lang.
Es ist sinnvoll, sich intensiv mit dem Tool von Google auseinandersetzen. Das hat zwei Gründe. Zum einen untersuchen viele potenzielle Kunden ihre Websites mit diesem Tool – ein Aspekt, der hauptsächlich für WordPress-Dienstleister interessant ist. Zum anderen wird Google die Werte des eigenen Tools als Ausgangspunkt berücksichtigen, wenn es Ranking-Verschiebungen wegen schlechter Ladezeiten gibt.
Die Analyse-Tools im Browser
Auch die Browser haben eigene Werkzeuge, mit denen wir hervorragend das Ladeverhalten von Websites untersuchen können. In der Regel sind diese Webdeveloper-Tools über die F12-Taste auf Windows oder systemübergreifend mit Strg + ⇑ + i zu erreichen. Es ist empfehlenswert, sich mit diesen Werkzeugen auseinanderzusetzen, da sie viele Informationen bieten. Sie können bei diesen Tools erkennen, welche Dateien die Website verlangsamen, welche gar nicht erreichbar sind (404er-Fehler) und wo die Flaschenhälse sind.
Die Webentwickler-Tools von Firefox beherrschen neben der Listenansicht auch eine Diagramm-Ansicht.
Die Webentwickler-Tools in Chrome, dem Browser von Google, sind leistungsfähiger, da dort Lighthouse integriert ist. Dabei handelt es sich um ein effektives Analyse-Werkzeug, welches auch dem PageSpeed Insights von Google als Basis dient.
GTmetrix: viele Tools unter einem Dach
Ein weiteres hilfreiches Analyse-Tool ist der Dienst GTmetrix. Die grundlegenden Funktionen sind kostenlos. Wer sich kostenlos registriert, erhält zusätzliche Funktionen, und weitere werden mit kostenpflichtigen Plänen freigeschaltet. Die zusätzlichen Funktionen sind unter anderem die Möglichkeit, mehr und nähere Testserver auszuwählen und auf die Werte der vorherigen Messungen zurückzugreifen.
Zusammenfassung der Ergebnisse in GTmetrix.
GTmetrix liefert viele Ergebnisse. Neben dem „Wasserfall“, den Sie auch in den Browser-Tools sehen können, werden Ihnen zum Beispiel diverse Timings und Metriken der Website angezeigt. In der Übersicht wird der zeitliche Aufbau der Website in Form einer Filmrolle dargestellt.
Die Wasserfall-Darstellung ermöglicht es Ihnen, schnell zu erkennen, welche Dateien den Aufbau der Website verzögern.
Das Tool von GTmetrix ist von den vorgestellten allgemeinen Analyse-Tools das einsteigerfreundlichste.
Webpagetest.org: viele Tools für Detailverliebte
Wer gerne eine detailliertere Analyse mit vielen Einstellungen und Szenarien bevorzugt, der wird bei Webpagetest.org auf seine Kosten kommen. Neben Testservern in verschiedenen Regionen und den Browsern können Sie auch die Internetgeschwindigkeit festlegen, mit der getestet wird.
Webpagetest.org: Bei der Analyse von Websites können Sie viele Parameter bestimmen, darunter auch die Verbindungsgeschwindigkeit.
Aber das ist nicht alles. Sie können bei den Testreihen auch Unterstützung für diverse Grafikformate deaktivieren, Skripte einbinden oder bestimmte Anfragen blocken.
P3 (Plugin Performance Profiler)
Bis jetzt haben wir lediglich Werkzeuge vorgestellt, die Sie auch für Websites nutzen können, die nicht auf WordPress setzen. Mit dem Plugin P3 (Plugin Performance Profiler) kommt nun ein Analyse-Tool ins Spiel, welches auf WordPress-Websites spezialisiert ist.
Mit diesem Plugin können Sie schnell erkennen, welches WordPress-Plugin die meisten Ressourcen in Anspruch nimmt und dazu beiträgt, den Server zu verlangsamen. Anschließend können Sie überlegen, ob Sie auf die Funktionalität verzichten können, oder ob Sie es mit einer schlankeren Alternative versuchen.
Das Plugin P3 untersucht die Last, die die eingesetzten Plugins verursachen. Damit können Sie schnell herausfinden, welche der Erweiterungen die Website unverhältnismäßig verlangsamen. Quelle: offizielles Verzeichnis.
Tools zur Optimierung von Bildern
Bilder für den Webeinsatz zu optimieren ist eine wichtige Maßnahme, und zwar aus mehreren Gründen. Die Optimierung der Bilder birgt in den meisten Szenarien das höchste Potenzial für die generelle Optimierung der Website, wobei man keine speziellen Kenntnisse benötigt.
Idealerweise wird die Bildoptimierung schon beim Verfassen des Artikels umgesetzt: Es wird das richtige Motiv gewählt, gegebenenfalls wird nur ein bestimmter Ausschnitt aus dem Bild genommen, danach wird das Bild auf die richtigen Maße verkleinert, und anschließend wird die Grafik im richtigen Format abgespeichert und für den Webeinsatz komprimiert.
Je nachdem, um welche Grafik es sich handelt, ist es davon abhängig, in welchem Format Sie die Grafik abspeichern sollen. Für Fotografien eignet sich JPG gut, für Illustrationen kann es besser sein, auf PNG zu setzen. Das relativ neue Grafikformat WebP hat gegenüber den beiden vorher genannten Formaten häufig (aber nicht immer) den Vorteil, bei gleicher visuellen Qualität kleinere Dateigrößen zu verursachen. Hier müssen Sie einfach ausprobieren, was die beste Mischung aus annehmbarer sichtbarer Qualität und verursachter Dateigröße ergibt.
Auch hier ist Auswahl an möglichen Werkzeugen erfreulich. Sicherlich, Sie können nach wie vor auf die kommerziellen Flaggschiffe, wie Adobe Photoshop oder auf die Produktreihe der Firma Affinity, setzen, aber um gute Bilder für den Webeinsatz zu bekommen, ist das nicht notwendig.
Es gibt eine Reihe an günstigen und sogar kostenlosen Werkzeugen, die Sie bei diesem Vorhaben unterstützen. Ich persönlich setze dafür auf IrfanView. Es ist ein Tool, das für privaten Gebrauch kostenlos ist und bei kommerzieller Nutzung einmalig für 10 Euro pro Endanwender zu haben ist.
Photopea ist ein kostenloser, webbasierter Photoshop-Klon.
Wer es gerne webbasiert mag, der sollte Photopea ausprobieren. Es handelt sich hierbei um einen kostenlosen Photoshop-Klon, der im Browser läuft. Dieses Tool kann nicht nur die Bilder für den Webeinsatz optimieren, es beherrscht auch die Arbeit mit verschiedenen Ebenen. Die Beschreibung der Funktionalität finden Sie in der offiziellen Dokumentation.
Daneben gibt es noch weitere Tools, mit denen Sie Bilder optimieren können. TinyJPG ist ein webbasierter Dienst, der Bilder in den Formaten PNG, JPG und WebP komprimiert. Auch bei den Plugins gibt es einige, die sich darum kümmern, die Bilder zu komprimieren, unter anderem wären dies Smush und EWWW Image Optimizer.
WordPress Performance Optimierung: Die wichtigsten Tools – Ausblick
In diesem Artikel habe ich Ihnen einige wichtige und leistungsfähige Werkzeuge vorgestellt, die Ihnen bei der Optimierung Ihrer Website helfen können. Im nächsten Artikel aus dieser Reihe wird es dann um konkrete Optimierungsmaßnahmen gehen.
Bildnachweis: Fotolia, Lizenz: Host Europe
- Web3 – ein besseres Web oder doch nur leere Versprechen? - 12. Mai 2022
- WordPress Performance Optimierung: Die besten praxiserprobten Methoden - 22. April 2022
- WordPress Performance Optimierung: Die wichtigsten Tools - 13. April 2022
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
Wenn man den Code für die Komprimierung kopiert bekommt man nen 500 Error.
IM schließenden Code fehlt ein „/“ vor dem „if module“.
Echt krasser Fehler 😉
Hallo Ronny,
das ist natürlich richtig. Vielen Dank für den Hinweis. Ist gefixed.
Mit besten Grüßen
Wolf-Dieter