Wussten Sie, dass im Schnitt 53% der Websitenutzer abspringen, wenn die Ladezeit 3 Sekunden überschreitet? Im Laufe der Jahre wird der Faktor PageSpeed immer wichtiger.
Warum? Die technische Entwicklung schreitet in einem Affenzahn voran & der Konsument gewöhnt sich daran, alles SOFORT zu bekommen. Das Tempo wird immer schneller und niemand legt Geduld an den Tag, wenn es doch auch anders geht.
Für Sie als Shopbetreiber bedeutet das klar: Sie müssen sich anpassen, sonst ist das Rennen schnurstracks vorbei. Wie Sie Ihrem Shop eine Ladegeschwindigkeit verleihen, die keine Wünsche offen lässt, zeigen wir Ihnen anhand dieses Guides mit hilfreichen Tipps & Tricks.
Deshalb ist PageSpeed so wichtig
Sicherlich haben Ihnen die Statistiken von oberhalb zu denken gegeben. Hinsichtlich der User-Experience muss die Seite einfach sofort präsent sein. Schließlich ist die Hemmung in den meisten Fällen schwindend gering, zur Konkurrenz überzuspringen.
Gerade in eCommerce Shops bedeutet das erhebliche Umsatzeinbußen, die einfach nicht sein müssen. Nun leider ist eine gute Ladezeit Grundvoraussetzung, damit andere Aspekte der Usability überhaupt zum Tragen kommen. Ihnen bringt die einfachste & übersichtlichste Menüstruktur nichts, wenn die Seite im Schneckentempo lädt.
Diese User-Signals sind natürlich ein Einflussfaktor auf Ihr Ranking. Google mag keine Websites, deren Absprungrate höher ist als der Shanghai-Tower.
Darüber hinaus zählt PageSpeed auch als direkter Rankingfaktor, was 2010 offiziell von Google Mitarbeiterin Maile Ohye bestätigt wurde. Dabei teilt Google Websites ein in schnell & langsam und zieht dadurch wichtige Rückschlüsse. Auch der Mobile-First Index beinhaltet diesen Faktor.
So überprüfen Sie Ihre Ladezeit
Ihr erster Schritt sollte ganz klar folgender sein: Testen Sie Ihre Ladezeit mit einem funktionsfähigen Analysetool!
Google PageSpeed Insights
Hier fällt die erste Wahl mit Sicherheit auf die Eigenkreation von Google.
Um das Tool zu nutzen, gibt es zwei Möglichkeiten:
- Unter https://developers.google.com/speed/pagespeed/insights/?hl=de
- Oder in den Chrome-Entwicklertools unter „Audits“
Die Datengrundlage wird bei beiden Optionen dem Analysetool Lighthouse entnommen.
Aber Achtung: Nehmen Sie den Score nicht zu ernst. Das Tool misst nicht die eigentliche Ladezeit, sondern nur das Ausmaß der Umsetzung der empfohlenen Best Practises. Der Score ist übrigens (Wie man in manchen Pseudo-Fachkreisen munkelt) kein Rankingfaktor & hat keinerlei Einfluss.
Alternative: YSlow
Genau wie Pagespeed Insights bietet YSlow eine Bewertung der Seitenleistung basierend auf bestimmten Regelsätzen. Zusätzlich werden praktische Handlungsempfehlungen vorgeschlagen, die zur Optimierung dienen. So kann zum Beispiel ermittelt werden, welche Dateien eine lange Ladezeit benötigen.
Für Bulk-Abfragen: Bulk PageSpeed Test
Wenn Sie mehrere Seiten effizient gleichzeitig überprüfen möchten, können Sie Ihre Analyse auch mit dem Bulk PageSpeed Test von Experte.de erfolgreich durchführen.
10 Tipps für die Optimierung
Nun stellt sich die Frage, wie Sie am besten vorgehen um möglichst effektiv Ihre Ladezeit zu verringern. Mit Sicherheit gibt es tausende Einflussfaktoren, die alle ihren Teil dazu beitragen.
Die wichtigsten davon haben nach dem 80/20-Prinzip ermittelt, sodass mit möglichst wenig Aufwand das Maximum rausgeholt werden kann.
1. Animationen reduzieren
Besonders wenn Ihre Systemanforderungen ein großes Spektrum an ästhetischem Spielraum bieten, verleitet das schnell dazu sich darin zu verlieren.
Konzentrieren Sie sich lieber auf die Designaspekte, die den Nutzer wirklich weiterbringen. Denn hier gilt der Grundsatz: Usability vor Beauty!
Umso weniger Animationen & JavaScript Sie verwenden, desto schneller wird Ihre Seite. Reduzieren Sie es auf das Wesentliche.
2. JavaScript & CSS-Dateien reduzieren
Wenn Sie mehrere Stylesheets & zahlreiche JavaScript-Dateien verwenden, wird die Abfrage um einiges länger dauern, da jede Datei einzeln aufgerufen werden muss.
Halten Sie sich bestmöglich an folgende Tipps:
- Verwenden Sie nur ein Stylesheet – So erlauben Sie dem Browser das Caching der CSS-Datei
- Kombinieren Sie externe JavaScript-Dateien, um Aufrufe zu reduzieren
- Vermeiden Sie die Nutzung von Inline-Styles
Da dieser Punkt meist mit am ausschlaggebendsten bei etlichen Testing-Tools ist, können Sie hierüber einiges an PageSpeed gewinnen.
3. Serverseitige Optimierung
Bei der Optimierung jeglicher Einflussfaktoren, die im direkten Zusammenhang mit Ihrem Webserver stehen, haben sich folgende Best Practises als hilfreich erwiesen:
- Schnelle DNS-Verbindungen schaffen
- Verwenden Sie ein CDN (Content Delivery Network), besonders wenn Sie international aktiv sind
- Nutzen Sie https / SSL-Zertifikat
- Durch serverseitiges Caching werden dynamische Seiten auf dem Server statisch abgespeichert & sind so schneller verfügbar
Hinsichtlich serverseitiger Optimierung ist der Pool an Optimierungsmaßnahmen schier unerschöpflich. Daher zählen wir hier nur die Top 3 der wichtigsten Punkte auf.
4. Caching nutzen
Caching ist im Grunde für jede erfolgreiche Website oder Onlineshop ein Muss! Wenn Sie noch kein funktionstüchtiges Caching verwenden, wird es höchste Zeit.
So funktioniert’s: Beim Caching werden einige Webdateien von besuchten Websites temporär im Browser abgespeichert, sodass sie bei zukünftigen Abfragen schneller verfügbar sind. So können Daten effizient wiederverwendet werden.
Meist lässt sich Caching kinderleicht über eine Erweiterung oder ein Plugin einrichten. Für WordPress als CMS empfehlen wir WP Super Cache.
5. Bildoptimierung
Bilddateien kosten meist viel Speicherkapazität & reduzieren daher Ladezeiten drastisch. Besonders PNG-Dateien sind meist nicht unter 100KB groß.
Wenn Sie keinen transparenten Hintergrund für Ihr Bild benötigen, nutzen Sie auf jeden Fall JPG. Das komprimierte Format ist meist ca. 90% kleiner.
Durch das neue Format WebP können sogar noch bessere Leistungen erzielt werden. Allerdings ist dies nicht mit allen Browsern kompatibel & eignet sich daher nur bedingt. Einige Plugins ermöglichen die automatische Bereitstellung von WebP-Images, wenn der Browser das Format unterstützt. Anderweitig wird wie gewohnt das hinterlegte JPG oder PNG präsentiert.
Auch bei der Dateiauflösung gilt: Weniger ist mehr! Nutzen Sie kein 1920×1080, wenn das eingebundene Bild nur 300 Pixel breit sein kann. Halten Sie sich bestmöglich an die minimal benötigte Größe.
Darüber hinaus existieren bei Bildern meist Metadaten, die auf Ihrer Seite nichts zu suchen haben (Aufnahmedatum, Ort, Kamera). Diese lassen sich meist auch ganz einfach durch ein Plugin entfernen.
6. GZip Komprimierung verwenden
Wahrscheinlich haben Sie schon einmal mit .zip Dateien gearbeitet, die Dateimengen komprimieren, sodass der Download schneller erfolgen kann.
Genau das macht GZip mit dem Code Ihrer Seite. GZip ist ein freies Kompressionsprogramm, das die verlustfreie Komprimierung von Webdateien ermöglicht.
Es gibt zwei Möglichkeiten der Implementation:
- Per Plugin
- Per Console im Webserver
Jegliche Abfragen werden schneller erfolgen, wenn die Dateimenge geringer ist. Die Nutzung ist auf nahezu allen Websites sinnvoll & führt zu weniger Ladezeit.
7. Lazy Loading einrichten
Wenn Sie eine Website laden, sehen Sie in den meisten Fällen nur den oberen Teil & können für mehr Inhalt nach unten scrollen. Der obere Teil nennt sich „Above the Fold“.
Nun wird bei dem Aufrufen einer Webseite nicht nur der obere Teil geladen, sondern die gesamte Seite.
Lazy Loading ermöglicht das „Nachladen“ von Inhalten, die unterhalb des Folds liegen. So kann der sichtbare Teile schneller angezeigt werden.
Die Einrichtung von Lazy Loading ist zwar meist an einige Individualentwicklungen geknüpft, aber das Ergebnisse lohnt sich – Besonders bei umfangreichen Seiten.
8. Code aufräumen / Minify
Können Sie sich vorstellen, wie viele Inhalte Sie in Ihrem Quellcode oder Stylesheet auffinden, die eigentlich unnötig sind?
Darunter fällt zum Beispiel Folgendes:
- Kommentare
- Formatierungen
- Leerzeichen
Über zahlreiche Programme lässt sich Ihr Code so auf das Nötigste reduzieren & Sie profitieren von verbessertem PageSpeed.
9. JavaScript im Footer laden
Die meisten Websites laden Skripte im <head>-Bereich der Website. Das bedeutet, wenn diese eigentlich gar nicht notwendig für den sichtbaren Teil der Website sind, blockieren sie das Laden der primär wichtigen Inhalte.
Die Lösung: Platzieren Sie Ihr JavaScript im Footer, solange es nicht essenziell für den Teil Above-the-Fold ist. So können Sie Ihrem Nutzer schneller die Inhalte präsentieren, die er wirklich sehen möchte.
10. 301 Weiterleitungen reduzieren
Wenn Sie von einer URL auf die nächste weiterleiten, verdoppelt sich logischerweise die Ladezeit der Seite. Wenn dies nur in ausgewählten Fällen der Fall ist, wird es nicht schwer ins Gewicht fallen.
Auch Google hält nicht viel von übermäßiger Nutzung. Der Bot folgt maximal 3 Weiterleitungen, somit wird das Crawling dadurch behindert.
Sie sollten 301 Weiterleitungen daher nur bei URL-Umzügen verwenden & darauf achten, dass keine Links mehr auf die alte URL verweisen. Sorgen Sie für eine saubere URL-Struktur & behalten Sie den Überblick.