WordPress-Websites: Die 5 Top-Erfolgsfaktoren für Ladezeit-Optimierung in 2019
Speed kills – aber nur im Straßenverkehr. Im Gegensatz zu den in der StVO verankerten Höchstgeschwindigkeiten (welche du natürlich stets einhalten solltest), gibt es hinsichtlich der Ladegeschwindigkeit deiner Website keine Limits. Im Juli 2018 hat Google nämlich das so genannte Speed Update in seinem Algorithmus nach langer Vorbereitungszeit endgültig ausgerollt.
Bei SISTIX wurde im Sommer 2018 ein Artikel über Seitengeschwindigkeit als SEO-Faktor veröffentlicht, welchen ich an dieser Stelle als Einstieg ans Herz legen will. Kurz zusammengefasst: wie schnell deine Website am Gerät des Nutzers lädt (vor allem auf Smartphones und Tablets), ist wichtiger denn eh und je. Im Q3/2018 legt der Anteil des mobilen Traffics nämlich bei über 50%, ein Wert der durch zunehmend günstige Mobilfunkverträge mit Flat-Rate-Daten-Packages ständig ansteigt.
Die Ladezeit steht auch in direktem Zusammenhang mit der Absprungrate deiner Website. Die Absprungrate sagt aus, wie viele Prozent aller Besucher die Seite ohne Interaktion (z.B. Klick oder Navigation auf eine Unterseite) wieder verlassen. Der Mensch ist ungeduldig und immer im Stress. Wenn eine Website daher nicht (gefühlt) schnell lädt und Interaktion (z.B. Scrollen) zulässt, desto schneller verlässt er eine Website auch wieder. Was wiederum ein negatives Rankingsignal für Google ist, weil dies schlecht hinsichtlich der Benutzerfreundlichkeit einer Website ist.
Kurze Ladezeiten erhöhen auch die Conversion-Rate auf deiner Website – im Umkehrschluss verlierst du mit jeder Sekunde zusätzlicher Ladezeit mitunter tausende Euro an potenziellem Umsatz. Eine der bekanntesten Studien wurde bereits im Jahr 2012 bei Amazon durchgeführt – diese besagt, dass der Umsatz beim Onlineriesen bei einer um 1000 ms (1 sek) längeren Ladezeit um 1.6 Milliarden USD (!) einbrechen würde – mittlerweile ist dieser Wert natürlich noch viel höher.
Die Vorteile von WordPress
Zu meinem persönlichen Hintergrund: ich beschäftige mich seit 2014 mit der Optimierung von Websites. Seit Sommer 2017 bin ich bei der MONOBUNT Online- und Werbeagentur in Ried im Innkreis angestellt und dort für die Bereiche E-Commerce Projektmanagement, Web Analytics und Technisches SEO zuständig.
Unser Fokus liegt auf der Erstellung von Webseiten und Webshops auf Basis von WordPress (kurz: WP) bzw. WooCommerce (ein Plugin für WP, welches eine Website innerhalb von wenigen Minuten zum vollwertigen Webshop transformiert). Dies hat vor allem den Hintergrund, dass WP das mit Abstand beliebteste CMS (Content Management System) der Welt ist.
Im Dezember 2018 wurden laut builtwith.com knapp 42% der Top-10.000-Websites weltweit auf WP-Basis erstellt. Die Tendenz ist weiterhin steigend. Eine große Community, Plugins für alle erdenklichen Zwecke sowie die einfache Bedienbarkeit des Backends sind dabei drei der Hauptgründe für die Dominanz von WordPress, das die Nutzung von anderen bekannten CMS wie etwa Drupal, Joomla, TYPO3 oder Magento mittlerweile weit hinter sich gelassen hat.
Das Ziel von MONOBUNT ist mehr Leads, mehr Conversions und damit auch mehr Umsatz für seine Kunden zu erzielen. Wie ich im ersten Absatz beschrieben habe, ist die Ladezeit nunmehr einer der absoluten Erfolgsfaktoren für das Erreichen dieser Ziele.
Daher habe ich mich im Laufe des letzten Jahres auch in meiner Freizeit immer mehr mit diesem Thema beschäftigt, einige Bücher gelesen und im April 2018 auch das WordCamp in Wien besucht (eine Retrospektive findet ihr per Klick) um Einblicke in die europäische Community zu bekommen.
Ziel meines Blogeintrags ist daher ein (zumindest einigermaßen) leicht verständliches Kompendium für die Optimierung der eigenen WordPress-Seite. Es gibt natürlich mehr als 5 Erfolgsfaktoren, die nachfolgenden besitzen jedoch aus meiner Sicht die höchste Relevanz.
1) Server bzw. Hosting
Die Wände oder das Dach deines Hauses können noch so gut sein – wenn das Fundament schlecht ist, dann wirst du vermutlich stets mit Problemen kämpfen müssen. In meiner Analogie ist der Server das Fundament deiner Website, mit dem der Erfolg aller nachfolgenden Optimierungen steht und fällt. Es ist daher eine ganz schlechte Idee, bei der Wahl des optimalen Hostingpartners zu sparen zu beginnen.
Wenn du nur einen Blog betreiben willst, dann kann ein Hosting-Angebot um 2.99€/Monat durchaus verlockend sein. Es gibt viele nationale und internationale Hostingbetreiber, welche mit Angeboten in dieser Preisregion locken. Diese sind per se nicht schlecht, sind jedoch für kommerzielle Zwecke nicht geeignet.
Man muss beispielsweise mit einer Großzahl an Einschränkungen leben. Meistens hat man keinen Einfluss auf die Serverkonfiguration, bestimmte Settings können nur auf Anfrage oder gar nicht durchgeführt werden und man teilt sich den Platz am Server mit anderen Webseiten („Shared Hosting Service„). Für eine Ladezeit-Optimierung wie in meinem Blogeintrag beschrieben sind diese Hostingangebote zum Großteil gänzlich ungeeignet.
Wenn du deine Website oder deinen Webshop bei einer Agentur erstellen lässt, dann ist die Wahl eines performanten Servers ein Qualitätsmerkmal für diese Agentur. Du solltest daher bei der Einholung deiner Angebote auch gleich Fragen hinsichtlich des zukünftigen Hostingdiensts stellen. Nur wenn du weniger als 10-20€ im Monat zahlst, dann ist es aus meiner Sicht akzeptabel, wenn du auf einem Shared Host landest. Ansonsten solltest du schon mindestens 30€/Monat für das Hosting deiner Website einkalkulieren, wenn du dich in guten Händen wiederfinden willst.
Du weißt nicht, bei welchem Host deine Website aufgeschalten ist? Mit DNS Frog gibt es ein einfaches und kostenloses Tool, mit dem du dies herausfinden kannst. Einfach deine Domain bei „Whois Lookup“ eingeben und du siehst unter nserver im Normalfall deinen Hostinganbieter, nachfolgend am Beispiel von ried.at – der Website meiner Heimatstadt. Wenn ich auf mybizcloud.at gehe, dann weiß ich nun also, dass die Website von der INFOTECH EDV-Systeme GmbH gehostet wird.
(Managed) Cloud Hosting und Dedicated Server (welche du dir mit keiner anderen Website teilen musst) sind in punkto Hosting klar zu empfehlen und auch die Standardwahl einer kompetenten Agentur.
2) Bildoptimierung und Bildkomprimierung
Bilder machen durchschnittlich über 60% der so genannten page load einer Website aus, also dem Anteil der Bilder an der Gesamtdatengröße einer Website. In einem Ladezeit-Workshop mit einem Experten von Google im Sommer 2018 wurde erwähnt, dass eine Startseite maximal 1600 KB (also 1.6 MB) groß sein sollte. Auch wenn dies aus eigener Erfahrung zumeist völlig unrealistisch ist, so ist es trotzdem besonders wichtig, dass du alle deine Bilder optimierst, bevor du diese bei WordPress (oder auch in jedem anderen CMS) hochlädst.
Am besten optimierst du deine PNG und JPG mithilfe von TinyPNG. Dabei handelt es sich um ein bekanntes (und kostenloses) Online-Tool, mit dem du deine Bilder vor dem Upload ohne Qualitätsverlust komprimieren kannst. Es gibt TinyPNG jedoch nicht nur als Onlinetool, sondern auch als (kostenpflichtige) Erweiterung für Photoshop, welche im Grunde jeden Cent wert ist.
Aber eine Komprimierung alleine reicht nicht. Bevor du einen Seiteninhalt erstellst, sind auch (grundlegende) Rechenkenntnisse gefragt, wenn du auch Bilder in die Seite integrieren willst. Die maximale Seitenbreite meines Blogs liegt (durch die Sidebar am rechten Bildrand bedingt) bei nur etwa 833 px (auf Desktop-Rechnern) – dies kannst du beispielsweise durch die Verwendung der Chrome Entwicklertools feststellen (siehe nachfolgendes Bild).
Wenn du nun drei Bilder nebeneinander platzieren willst, dann ist die Rechnung ganz einfach: 833 / 3 = 278. Die Breite eines Bilds in einem Dreier-Raster sollte dementsprechend bei 278 px liegen. Eigentlich sogar noch weniger, weil du auch den vertikalen Abstand zwischen den drei Bildern einrechnen musst. Aus Gründen der Einfachheit berücksichtige ich dies in meinem Beispiel nicht. Um die tatsächliche Auswirkung dieser Maßnahme zu beweisen, will ich ein praktisches Beispiel zeigen.
Nachfolgend siehst du dreimal nebeneinander das scheinbar gleiche Bild:
Schneemann 1:
Nicht optimiert
Nicht resized
1920 x 1280 px
209 KB
Schneemann 2:
Optimiert
Nicht resized
1920 x 1280 px
95 KB
Schneemann 3:
Optimiert
Resized
278 x 185 px
8 KB
Ohne dass du einen mit freiem Auge sichtbaren Unterschied zwischen den drei Bildern erkennen kannst, ist das Bild ganz rechts also um 201 KB bzw. um 97% kleiner als das ganz linke Bild.
Angenommen du hast 10 dieser Bilder auf deiner Website und führst diese Arbeiten bei jedem Bild durch, dann ersparst du dir nur durch Bildoptimierung und Bildkomprimierung knappe 2 MB an page load – und das immer, ohne dass die optische Qualität deiner Inhalte unter dieser Maßnahme leiden.
3) Plugins und Google Tag Manager
Für (nahezu) jede Anwendungsmöglichkeit gibt es bei WordPress ein Plugin. Eigentlich gibt es für alle Anwendungsfälle sogar mehrere, wenn nicht sogar ein Dutzend an Plugins. Doch je mehr Plugins du auf deiner Seite installierst, desto träger und auch angreifbarer wird dein System. Deswegen solltest du niemals zu viele, unbekannte oder schlecht bewertete Plugins installieren (Tipp: immer auch die User-Kommentare lesen).
Wenn du Google Analytics verwendest (und das solltest du eigentlich, egal welche Ziele du mit deiner Website verfolgst) oder ein Facebook Pixel auf deiner Website implementieren willst, dann kannst du das einerseits über Plugins erledigen. Mit jedem Plugin steigt allerdings die Gefahr, gehackt zu werden bzw. mokiert sich PageSpeed Insights oder GTmetrix über die Anzahl der Requests an den Server. Eine (bessere) Alternative dafür ist daher die Verwendung des Google Tag Managers (GTM).
Der kostenlose GTM wurde 2012 von Google auf den Markt gebracht, um Marketingverantwortlichen die Möglichkeit zu geben, HTML oder JavaScript-Tags eigenständig auf einer Website zu implementieren und zu warten. Zuvor musste man im Grunde immer einen Entwickler kontaktieren, um Tags und Skripte direkt im Quellcode einer Webseite zu installieren (und zu deinstallieren). Der GTM (dessen Basiscode auf einer Website eingebaut wird und damit als Container für alle e-marketing tags dient) wurde im Laufe der letzten Jahre stetig weiterentwickelt und ist 2018 eigentlich nicht mehr aus dem Online Marketing wegzudenken.
Über den GTM kann man nicht nur bekannte Tools von Google (Analytics, Conversion Tracking, Remarketing, Optimize, uvm.) das Facebook Pixel oder Visitor Tracking (u.a. HotJar, Mouseflow), sondern auch custom HTML- und JavaScript-Tags kreieren und auf die eigene Website einbinden. Für mittlerweile knapp 100 Online Marketing Tools gibt es vordefinierte Tags im GTM, für fast alle Skripte gibt es jedoch auch Anleitungen auf der jeweiligen Anbieter-Website.
Durch die Verwendung des GTM kannst du also nicht nur auf die Installation von vielen unterschiedlichen Plugins verzichten (die alle nur eine Aufgabe erfüllen würden), sondern auch dein Online Marketing zentralisieren und auch leicht zugänglich an externe Berater oder Agenturen machen.
Doch am Ende auch ein kleines „aber“: um effizient und effektiv mit dem GTM arbeiten zu können, solltest du mindestens Grundkenntnisse im Bezug auf HTML und JavaScript mitbringen. Ich selber bin kein Entwickler, habe mir aber im letzten Jahr ein JavaScript-Buch für Einsteiger gekauft und gelesen. Ich bin dadurch noch immer kein Entwickler, verfüge aber dadurch seither über Grundkenntisse und kann die Inhalte zwischen den Tags deuten. Hier ein kleiner Einblick in die Tags auf meiner Website (wie du siehst, tut sich hier schon einiges und ich erfülle auch bereits die Vorgaben von ePrivacy):
Erneut will ich jedoch nicht zu weit vom Grundthema abdriften, sondern nur eine kleinen Einblick in die Welt des Google Tag Managers geben, mit dem ich zum ersten Mal im Sommer 2015 gearbeitet habe und sich seither wie bereits erwähnt massiv weiterentwickelt hat.
Zusammenfassend erneut die Aussage, dass dir der GTM bei der Reduzierung deiner Plugins und damit auch bei der Performancesteigerung deiner Website behilflich sein kann und nebenbei auch ein unverzichtbares Instrument im Online Marketing (für Webshops noch viel mehr) geworden ist.
Mir persönlich blutet das Herz, wenn ich ein SEO-Audit einer Website durchführe, auf welcher Google Analytics direkt in den Quellcode der Website hardcoded implementiert ist. Ein weiteres Kennzeichen einer fortschrittlichen Agentur bzw. OM-Verantwortlichen in einem Unternehmen ist daher die Verwendung des GTM bzw. zumindest des gtags von Google.
4) Konfiguration eines Caching Tools
Hat man den passenden Server gefunden, alle Entwicklungsarbeiten und Bildoptimierungsarbeiten abgeschlossen sowie die richtigen Plugins gefunden, dann sollte man im vorletzten Schritt der Ladezeit-Optimierung ein passendes Caching-Tool auswählen und konfigurieren.
Wenn man unter den WordPress-Plugins nach „Caching“ sucht, dann werden aktuell 141 Seiten mit passenden Ergebnissen gefunden. Die bekanntesten und von mir verwendeten Caching-Tools sind jedoch WP Super Cache, W3 Total Cache, Autoptimize oder auch WP Rocket. Mit Ausnahme des letztgenannten Plugins sind diese Tools grundsätzlich kostenlos. Will man jedoch völlige Handlungsfreiheit erzielen und den letzten Rest aus den Plugins herauskitzeln, dann geht dies eigentlich nirgendwo ohne das kostenpflichtige Freischalten aller Funktionen. Umgangssprachlich handelt es sich dabei also zumeist um Lite-Versionen, welche Appetit auf mehr machen sollen.
Was genau machen nun aber diese Caching-Tools? Eine Website besteht gewöhnlich aus statischen und dynamischen Inhalten. Dynamische Inhalte sind beispielsweise ein Warenkorb in einem Onlineshop, ein Kalender bei dem ich mir einen Termin buchen kann, oder aber auch eine Google-Landkarte auf einer Website. Wie der Name schon sagt, verändern sich dynamische Inhalte recht häufig und sollen/dürfen daher auch nicht zwischengespeichert werden.
Im Gegensatz dazu sind statische Inhalte jene Elemente auf einer Website, welche sich selten bis gar nie verändern. Beispielsweise HTML-Texte, CSS-Stylesheets oder Bilder. Und diese statischen Inhalte können daher auch zwischengespeichert werden um die Ladezeit einer Webseite zu verkürzen. Aktiviert man nun den Cache mithilfe eines Caching-Tools, dann bringt dieser eine Mischung aus den oben genannten Inhalten in ein statisches HTML-Dokument, zwischenspeichert dieses und liefert es bei einem Seitenaufruf an den Besucher aus.
Ganz egal, welches der oben genannten Caching-Tool man verwendet, eins habe ich bereits seit längerer Zeit festgestellt: die richtige Konfiguration des WP-Caches kann ziemlich komplex werden und auch unerwartete Probleme mit sich ziehen. Deswegen sollte man ein Caching-Plugin auch niemals ohne Vorwissen über die Begrifflichkeiten und die Auswirkungen der einzelnen Einstellungen installieren oder konfigurieren. Im Extremfall zerstört man damit nämlich sowohl die Optik als auch die Performance der eigenen Website.
Es gibt kaum zwei Websites, die 1:1 gleich sind. Deswegen kann man die Konfiguration eines Caching-Tools auch niemals copy&paste-mäßig durchführen. Ganz im Gegenteil, es ist sogar extrem wichtig, dass man jeden Optimierungsschritt sofort testet (und zwar in allen responsiven Darstellungen bzw. bei allen Breakpoints) und die Änderungen gegebenenfalls wieder zurücksetzt. Man kann sich natürlich auch auf Fehleranalyse begeben, welche Einstellung(en) ein bestimmtes Problem bewirken und hier (im Optimalfall zusammen mit einem Entwickler) nach einer Alternativlösung sucht.
Von allen bisher genannten Faktoren für die Ladezeit-Optimierung ist ein Caching-Tool zusammenfassend mit Sicherheit die komplexeste, aber gleichzeitig auch verheißungsvollste Optimierungsmöglichkeit.
5) Verwendung eines Content Delivery Networks (CDN)
Ein Content Delivery Network (CDN) ist ein Netzwerk aus leistungsfähigen Servern, die Inhalte an verschiedenen Orten (Rechenzentren) auf der ganzen Welt zwischenspeichern. Wenn man auf ein „Inhalt-Auslieferungs-Netzwerk“ (so die wortwörtliche Übersetzung) zurückgreift, dann werden statische Dateien (Bilder, HTML, Dokumente) im Cache der um die ganze Welt verteilten Replica-Server zwischengespeichert und müssen damit nicht mehr vom eigentlichen Webserver abgerufen werden.
Zum einen entlastet dies den Webserver und zum anderen sorgt dies für kürzere Ladezeiten bei den Nutzern. Dank der Anycast-IP-Technologie werden Anfragen nämlich stets an jenen Server weitergeleitet, die dem Nutzer am nächsten ist. Wie dies funktioniert, zeigt die nachfolgende Grafik von CloudFlare am besten.
Angenommen, mein Webhost befindet sich in Hamburg. Greif jetzt ein User aus Wien oder Linz auf meine Website zu, dann werden die statischen Dateien nicht direkt vom Server in Hamburg ausgeliefert, sondern von den Replica-Servern in Wien oder Linz. Daher müssen keine langen Wege zurückgelegt werden, was die Ladegeschwindigkeit der Inhalte verbessert. Außerdem kann man mit einem CDN auch große gleichzeitige Benutzerzahlen leicht(er) bewältigen, ins Besondere wenn man größere Daten zum Download anbietet.
Last but not least ist ein CDN auch für den Sicherheitsaspekt wichtig: Angriffe auf Websites können frühzeitig erkannt und abgewehrt werden. Vor allem gegen DDoS-Attacken, die Server durch eine enorme zeitgleiche Datenabfrage in die Knie zwingen wollen, kann man sich mit einem CDN schützen. Die Last des Angriffs wird auf die Replica-Server verteilt und damit für jedes einzelne System verringert, was zum ultimativen Effekt hat, dass der Service weiterhin verfügbar ist.
Ähnlich wie beim Caching-Tool sollte auch die CDN-Konfiguration niemals von einem Laien durchgeführt werden oder das Setup einfach von anderen Instanzen kopiert werden. Durch die Verwendung eines CDN kann man viele Probleme lösen aber andererseits mit den falschen Einstellungen auch viele Probleme kreieren. Ausgiebige Funktionstests sind daher auch hier unerlässlich.
Zusammenfassung
If you talk the talk, then you have to walk the walk. Meine Website dient mir primär als „Versuchskaninchen“ für neue Entwicklungen, Plugins und HTML/CSS/JS-Experimente. Ich habe emprechtinger.com daher im Laufe der letzten Monate nach den fünf beschriebenen Punkte optimiert und kann derzeit folgende Werte bei Google PageSpeed Insights sowie GTmetrix vorweisen:
Wie man sieht, schramme ich bei PageSpeed Insights knapp an der „Perfektion“ vorbei. Ich erreiche die aktuellen Werte, ohne dem Besucher dabei eine schlechtere User Experience (UX) oder optische Einschränkungen vorzusetzen. Man sollte nämlich niemals das wahre Ziel aus den Augen verlieren: man optimiert eine Seite nicht, um einen möglichst hohen Wert bei Google PageSpeed Insights zu erzielen, sondern um die UX für die Besucher zu verbessern.
Höhere Werte als die aktuellen zu erreichen, wäre auch nicht wirklich effizient. Denn bei der Speed-Optimierung einer Website ist stets das Pareto-Prinzip (80:20 Regel) anzuwenden. Um die letzten 20% Optimierung herauszukitzeln, muss man im Normalfall 80% des Aufwands investieren. Und die Zeit oder Muße dazu hat man im Normalfall nicht.
Technisches SEO bzw. Ladezeit-Optimierung sollte keine langweilige Wissenschaft sein oder Probleme bereiten. Ganz im Gegenteil, mir persönlich macht es viel Spaß, durch die kontinuierliche Verbesserung der relevanten PageSpeed-Werte und die aus der Optimierung erzielten Lerneffekte werde ich ständig dazu getrieben, den nächsten Schritt zu machen und neue Dinge zu probieren. Wenn etwas komplett schief geht, spiele ich einfach das Backup vom Vortag ein ;- )
Abschließend würde mich interessieren:
- Was siehst du als nächsten Schritt bei der Ladezeit-Optimierung?
- Verwendest du andere Plugins für bestimmte Zwecke?
- Hast du Geheimtipps für das Hosting deiner Webseite?
- Würdest du gerne nähere Infos zu bestimmten Punkten wissen?
Ich freue mich auf eine rege Diskussion oder gerne auch Direktkontakt über mein Kontaktformular!
Hinterlasse einen Kommentar
An der Diskussion beteiligen?Hinterlasse uns deinen Kommentar!