Verbesserung der Ladegeschwindigkeit eurer (WordPress-)Website
Zu lange Wartezeiten stellen nicht nur in der Offline-Welt ein Problem dar. Die Ladegeschwindigkeit eurer Website, der sogenannte PageSpeed, hat große Auswirkungen auf die User Experience der Besucher:innen und gilt als einer der einflussreichsten Google-Rankingfaktoren. Aufgrund dieser und noch vieler weiterer Gründe, auf welche wir in diesem Beitrag eingehen werden, solltet ihr euch als Website-Betreiber:in mit dem Thema PageSpeed-Optimierung auseinandersetzen. Bei fast jeder Site besteht Verbesserungspotenzial, welches ihr ausschöpfen könnt, um die Peformance sowie eure Online-Umsätze nachhaltig zu steigern.
Zu Beginn sehen wir uns die Hintergründe des PageSpeeds an und erklären euch, warum er im heutigen World Wide Web einen hohen Stellenwert eingenommen hat. Ebenso erläutern wir Methoden, wie unsere Web-Developer:innen die Ladegeschwindigkeit von Websites messen und teilen ihre Top-Praxistipps mit euch, sodass auch ihr Verbesserungsmaßnahmen planen könnt.
Warum ist der PageSpeed relevant?
Wenn wir über die Bedeutung des PageSpeeds sprechen, gibt es vier Punkte, die ausschlaggebend sind:
1) User Experience: Eine gute User Experience ist von zahlreichen Faktoren abhängig, neben der einfachen Bedienbarkeit und einer übersichtlichen Menügestaltung und Struktur spielt vor allem die Ladegeschwindigkeit eine maßgebliche Rolle. Wenn das Aufrufen einer URL mehr als drei Sekunden dauert, verlassen bereits in etwa 40 % der User:innen die Seite bevor diese vollständig geladen wurde. Schnelle Ladezeiten führen somit zu einer längeren Verweildauer, welche benötigt wird, um die potenziellen Kunden von euren Werten, Produkten und/oder Dienstleistungen zu überzeugen. Hinzu kommt, dass ein hoher PageSpeed den User:innen sofort vermittelt, dass ihr eure Website/euren Onlineshop professionell und mit Sorgfalt betreibt.
2) Conversion Rate: Die beim ersten Punkt erwähnte Verweildauer steht im direkten Zusammenhang mit eurer Conversion Rate. Wenn sich Personen länger auf eurer Website aufhalten, stoßen sie auf mehrere Landingpages sowie Call-to-Action-Buttons. Ebenso relevant sind die Ladezeiten, die bei der Durchführung der Handlungsaufforderungen entstehen. Dabei solltet ihr sämtliche Conversions im Blick haben, und nicht ausschließlich Käufe oder Transaktionen. Beispielsweise müsst ihr auch sicherstellen, dass ein Formular zur Newsletter-Anmeldung von Interessierten schnell ausgefüllt und abgeschickt werden kann. Kurz gesagt: Die Conversion-Rate-Optimierung und die Ladezeitoptimierung gehen Hand in Hand.
3) Google-Ranking-Faktor: Der PageSpeed beeinflusst euer Ranking bei der Google-Ergebnisliste, sowohl bei der Suche auf dem PC und dem Laptop sowie bei der mobilen Suche. Die Zeit und die finanziellen Ressourcen, die ihr die Ladezeitoptimierung investiert, sind essenziell für eine wirksame technische Suchmaschinenoptimierung. Hinzu kommt, dass auch die User Experience (zum Beispiel die Verweildauer) ebenso Auswirkungen auf die Ranking-Position hat.
4) Crawler: Die Webcrawler der unterschiedlichen Browser analysieren automatisch Webseiten und indexieren diese. Bei umfangreichen Websites mit vielen Unterseiten kann es gegebenenfalls zu Schwierigkeiten mit dem sogenannten Crawl Budget kommen, wenn die Ladezeiten zu lang sind. Ist das Budget aufgebraucht, kann es passieren, dass wichtiger neuer Content erst verspätet in die Indizes der Browser aufgenommen wird.
Dies liegt an der Limitierung des Crawl Budgets für jede Website – das Budget ist in diesem Fall eine bestimmte Zeitspanne. Aufgrund der enormen Menge an Websites weltweit wird nicht jede täglich vollständig neu von den Crawlern ausgelesen. Der Algorithmus des Browsers macht die Länge der Zeitspanne davon abhängig, wie oft neue Inhalte auf der Site veröffentlicht werden. Kurze Ladezeiten sorgen dafür, dass pro Tag maximal viele Seiten ausgelesen und indexiert werden können. Dies ist wichtig, wenn ihr neuen Content veröffentlicht, der sofort ranken soll.
Messung der Ladegeschwindigkeit
Wir empfehlen euch, die Ladegeschwindigkeit eurer Webseiten in regelmäßigen Abständen zu überprüfen. Vor allem Seiten mit hohem Besucheraufkommen, wie zum Beispiel die Homepage und eure Produktübersicht, sollten über gute Messwerte verfügen. Die WP-Stars Programmierer:innen greifen zur Überprüfung der Ladegeschwindigkeiten auf folgende Tools zurück:
► Google PageSpeed Insights: Die Verwendung dieses Tools ist kostenlos und es überzeugt durch seine übersichtliche Benutzeroberfläche. Die Messwerte werden in den Ampelfarben grün, gelb und rot dargestellt und das System erstellt für euch eine Empfehlungsliste für Verbesserungen. Diese könnt ihr dann Schritt für Schritt umsetzen.
Wichtige Werte sind unter anderem der Largest Contentful Paint (LCP) und der First Input Delay (FID). Ersterer zeigt die Zeitdauer an, die der Browser benötigt, bis die User:innen mit dem größten sichtbaren Bereich der Website interagieren können. Der First Input Delay misst die Zeit, die zwischen der ersten User-Interaktion mit der Webseite (beispielsweise ein Klick auf einen Button) und dem Zeitpunkt, an dem Browser darauf aktiv reagieren kann, vergeht. Durch diesen Wert könnt ihr die Reaktionsfähigkeit der Webseite überprüfen. Der LCP und der FID sind übrigens auch Teil der Google Core Web Vitals, das sind die Metriken, auf die der Google-Algorithmus zur Bewertung der User Experience von Websites zurückgreift.
► Chrome Lighthouse Tool: Wenn ihr die Ladegeschwindigkeiten direkt im Browser einsehen möchtet, könnt ihr die Webseiten im Chrome-Browser öffnen und das Google Lighthouse Tool aktivieren. Dabei handelt es sich um Open-Source Webanalyse-Tool, das euch neben den Performance-Werten auch noch Auskünfte über die Umsetzung der Barrierefreiheit sowie der Suchmaschinenoptimierung gibt. Die Anwendung PageSpeed Insights holt sich ihre Daten übrigens von Lighthouse.
► GTmetrix: GTmetrix ist ein kanadisches Online-Tool, mit dem ihr die Performance eurer Website analysieren könnt. Die Messwerte entstehen hier aus einer Kombination von Googles PageSpeed Insights und Yahoos Monitoring-Tool YSlow. Ein weiterer Pluspunkt von GTmetrix ist die freie Auswahl des Serverstandorts. Dies ist zum Beispiel hilfreich, wenn ihr eine Website betreibt, die auch im Ausland oft aufgerufen wird.
Im Idealfall überprüft ihr die Ladegeschwindigkeit eurer Webseiten mit mehreren Tools, um einen realistischen Eindruck der Performance zu erhalten. Sollten eure Messwerte bei der Mobilversion der Website etwas schlechter ausfallen, müsst ihr euch in der Regel keine großen Sorgen machen. Die meisten Tools simulieren bei der Messung von mobilen Ladegeschwindigkeiten eine sehr langsame Internetverbindung (schlechter als 3G), die es heutzutage in Mitteleuropa kaum noch gibt.
Unsere Praxis-Tipps
Unsere jahrelange Erfahrung im Bereich Web Development hat uns gelehrt, wie wir den PageSpeed einer Website möglichst schnell und effizient optimieren können. Wir raten euch dazu, diese Punkte zu berücksichtigen:
▶ Bilder optimieren: Für einen hohen PageSpeed solltet ihr alle Bilder auf eurer Website komprimieren, da eine große Anzahl an hochauflösenden Bildern das Rendern stark verzögern kann. Viele Bildbearbeitungsprogramme beinhalten die Funktion, dass ihr die Bilder „fürs Web“ speichern könnt. Habt ihr eine WordPress-Site, könnt ihr auf das Plugin Imagify zurückgreifen. Die kostenlose Version ermöglicht euch aktuell die Bilderoptimierung von ca. 200 Fotos pro Monat.
▶ Lazy Loading: Das sogenannte Lady Loading sorgt dafür, dass beim Aufrufen einer URL nur jene Daten vom Browser geladen werden, die sich im Sichtfeld der Userin beziehungsweise des Users befinden. Wird weiter gescrollt, werden die Inhalte vollständig geladen. Die Lazy Loading-Funktion kann zum Beispiel mittels JavaScript auf eurer Website implementiert werden. Insbesondere bei Webshops mit großem Sortiment hat sich das Lazy Loading durchgesetzt, da es den PageSpeed deutlich erhöhen kann.
▶ Minification: Unter Minification versteht man das „Aufräumen des Quellcodes“. Dies ist sinnvoll, da ein Browser beim Aufrufen einer Webseite alle Dateien Zeile für Zeile ausliest. Das sind oft hunderte bis tausende Zeilen. Um euren PageSpeed zu beschleunigen, solltet ihr im Code keine überflüssigen Leerzeichen, Kommentare und nicht benötigte Formatierungen finden.
▶ Externe Skripte: Sollte euer PageSpeed zu langsam sein, kann das Problem bei der Einbindung von zu vielen externen Skripten liegen. Wenn der Server, von dem das Skript abgerufen wird, langsam ist, drosselt das sofort eure eigene Ladegeschwindigkeit. Aufgrund dessen empfehlen wir euch, wenn es möglich ist, die benötigten Skripte auf eurem eigenen Webserver abzuspeichern.
▶ Verwendung von Plug-ins: WordPress bietet uns die Möglichkeit, Performance Plugins einzusetzen, die uns die PageSpeed-Optimierung erleichtern. Besonders beliebt und erprobt ist dabei das Plugin WP-Rocket. Dieses kann zum Beispiel automatisiert JavaScript- und CSS-Dateien zusammenfassen und minifizieren. Zudem kann das Plugin Bilder für das Lazy Loading optimieren.
Performance-Plugins werden oft als eine All-in-one-Lösung verkauft, aber wir sind der Meinung, dass wir derartige Plugins als Hilfsmittel und nicht als Wundermittel betrachten sollten. Sie können uns dabei helfen, die PageSpeed-Optimierung schneller voranzutreiben, aber viele Bugs, die eine verzögerte Ladegeschwindigkeit auslösen, können weiterhin nur manuell behoben werden.
▶ Auswahl des Servers: Gemäß unserer Erfahrung solltet ihr euren Server sehr präzise auswählen, sodass dessen Leistung auch tatsächlich euren individuellen Anforderungen entspricht. Bedenkt immer, dass euer Traffic durch erfolgreiche Marketingmaßnahmen steigen kann und ihr möglicherweise in Zukunft eine stärke Serverleistung benötigen werdet. Deshalb raten wir euch, einen Anbieter zu wählen, bei dem die Serverleistung skalierbar ist.
Wir hoffen, dass euch unsere Tipps dabei helfen, euren PageSpeed zu verbessern, um den (potenziellen) Kundinnen und Kunden die bestmögliche User Experience zu ermöglichen. Solltet ihr professionelle Unterstützung von unseren Web-Developer:innen benötigen, könnt ihr euch jederzeit bei uns melden!