Shopify Optimierung: So erhöhst du den Pagespeed des Webshops

"In der Ruhe liegt die Kraft" – das gilt im Privatleben. Im E-Commerce aber haben die Kunden es eilig. Kurze Lade- und Reaktionszeiten der Online Shops sind daher Schlüsselfaktoren deines Erfolges.

Immer mehr Nutzer shoppen auf den mobilen Geräten (Mobile SEO ist eines der Stichwörter), und sie erwarten sofortiges Laden nach dem Klicken oder Antippen. Langsames Laden bedeutet höhere Absprungraten, weniger Nutzerinteraktionen, geringeren Traffic, geringe Conversion Rate und damit negative Auswirkungen auf deinen Umsatz.

Diese Zahlen von auf Google und SOASTA sprechen für sich:

Bei einem Anstieg der Ladezeit von

• 1 auf 3 Sek. steigt die Wahrscheinlichkeit des Absprungs um 32 %
• 1 auf 5 Sek. steigt die Wahrscheinlichkeit des Absprungs um 90 %
• 1 auf 6 Sek. steigt die Wahrscheinlichkeit des Absprungs um 106 %
• 1 auf 10 Sek. steigt die Wahrscheinlichkeit des Absprungs um 123 %

Klar ist also: Deine Website braucht eine kurze Ladezeit, um hohe Absprungraten zu vermeiden, das Publikum zu aktivieren und möglichst alle Verkaufschancen zu nutzen. All das ist auch für die Shopify SEO von großer Bedeutung.

Wenn du deine Shop-Website mit Shopify betreibst, kannst du deren Geschwindigkeit mithilfe folgender Tipps erheblich steigern.

1. Deine Shopify-Website-Performance analysieren

In diesem Abschnitt stelle ich einige Tools vor, mit denen du deine Shopify Shops analysieren kannst. Mit den Vorschlägen dieser Tools kannst du deine Website oft erheblich verbessern.

Mit PageSpeed Insights die Website-Leistung auf Mobile und Desktop analysieren

Das Google-Tool PageSpeed Insights erzeugt einen Score der Geschwindigkeit deines Shops und generiert auf dieser Basis Vorschläge, um deine Seite schneller zu machen. Dabei kannst du weitere Maßnamen treffen, um den Pagespeed zu optimieren. 

Das Tool zeigt die wesentlichen Aufgaben für Mobilgeräte und Desktops separat, darunter:

• Bilder optimieren
• CSS minimieren
• JavaScript minimieren
• JavaScript- und CSS-Elemente entfernen, die das Rendern des oberen Bereichs der Seite behindern
• Browser-Caching nutzen und die Antwortzeit des Servers reduzieren
• Landingpage-Weiterleitungen vermeiden
• Gzip-Komprimierung verwenden

Der PageSpeed-Bericht für Mobile

Der PageSpeed-Bericht für Desktop

Google empfiehlt außerdem, deine Website mit dem Tool Test My Site zu prüfen, das sowohl die mobile Benutzerfreundlichkeit als auch die mobile Ladezeit von Websites analysiert.

Wenn du deine URL eingibst, beginnt Google den Scan und führt dich weiter zur Auswertung, sobald sie fertig ist. Zunächst erhältst du einen Überblick. Nach einem Klick auf den Button "Vollständigen Bericht anfordern" oben rechts kannst du deine E-Mail-Adresse eingeben und findest kurz darauf weitere Details in deinem Postfach.

Ladezeit- und Leistungsoptimierung für die Website mit Gtmetrix

GTmetrix ist ein weiteres kostenloses Tool, das die Leistung deiner Website analysiert. Du erhältst eine (US-amerikanische) Schulnote von A bis F und Empfehlungen zur Optimierung.

Bei Gtmetrix können wir durch Klicken auf die Registerkarte "Waterfall" die genaue Zeit anzeigen, die der Abruf jedes Elements gebraucht hat.

Mit Pingdom die Ladezeit und Leistung deiner Website überwachen

Auch Pingdom testet die Geschwindigkeit deiner Website kostenlos und generiert Vorschläge zur Optimierung.

2. Deine Seite blitzschnell machen mit AMP

Accelerated Mobile Pages, kurz AMP, ist ein offenes Standardframework, mit dem jeder Seitenbetreiber schnell ladende Webseiten für Mobilgeräte erstellen kann.

Mehr als 50 Prozent der Online-Shopper sind auf Mobilgeräten unterwegs. Daher ist es wichtig, dass deine Website für Mobilgeräte optimiert ist und von ihnen schnell geladen wird. Dazu dient die AMP-Technologie, die bereits viele Anbieter erfolgreich einsetzen.

In Shopify kannst du mit einer der Apps FireAMP oder RocketAmp schnell und effizient AMP-Seiten für deine Website erstellen. Beide haben im Shopify App Store eine Bewertung von über vier Sternen und verbessern die Ladezeit deiner Shopify-Website auf Mobilgeräten. Alternativ kannst du die Shopify-API verwenden, um AMP-Seiten zu entwickeln. Achte bei der Implementierung auf diese häufigen AMP Fehler.

3. Bilder komprimieren

Mit Shopify kannst du die folgenden Bildformate hinzufügen:

• JPEG oder JPG
• Progressives JPEG
• PNG
• GIF

Die Bildkomprimierung ist für ein schnelles Laden von Webseiten unverzichtbar. Stelle bei der Bildoptimierung (fester Bestandteil von Bilder SEO) sicher, dass deine Bilder eine akzeptable Größe haben, und verwende nicht zu viele Bilder auf einer einzelnen Seite.

Bei der Bildkomprimierung ist auch die Bildqualität zu berücksichtigen.

Für neue Bilder kannst du tinypng.com oder tinyjpg.com kostenlos verwenden, um die Größe zu reduzieren. In diesem Beispiel hat mir das Tool 71 Prozent und insgesamt 286 Kilobyte Datenvolumen gespart:

Wenn du alle Bilder durch die optimierten Versionen ersetzt, verbessert sich die Ladezeit der Seite automatisch.

Bilder, die bereits in deinem Shopify-Store vorhanden sind, kannst du mit Crush.pics oder Image Optimizer ohne Qualitätsverlust komprimieren.

4. Ein schnelles und responsives Theme für deinen Shopify-Shop auswählen

Die Geschwindigkeit deiner Shopify-Website hängt wesentlich vom Theme ab. Bei der Auswahl lohnt es sich daher, Folgendes zu beachten:

• Suche nach einem schnellen und responsiven Theme.
• Suche nach einer aktuellen Version des Themes und überprüfe die Live-Vorschau. Prüfe die Theme-Vorschau-Seite mit Google PageSpeed Insights und sieh dir die Vorschläge an, um die Seite schneller zu machen.

Wenn du dich für ein Theme entschieden hast, halte es immer auf dem neuesten Stand.

5. Die Anzahl installierter Apps reduzieren

Die meisten über Shopify heruntergeladenen Apps fügen deinem Shop JavaScript- und CSS-Dateien hinzu. Auch wenn du die Apps nicht verwendest, werden diese Dateien im Hintergrund ausgeführt und vermindern die Leistung deiner Website.

Überprüfe daher deinen Shop auf Apps, die du nicht verwendest, und entferne sie. Vielleicht hast du zum Beispiel einige Apps mal ausprobiert und nicht daran gedacht, sie zu löschen.

6. Die Anzahl der HTTP-Requests reduzieren

Verwende das Tool HTTP Requests Checker von GiftOfSpeed, um herauszufinden, wie viele HTTP-Requests deine Seite stellt. Du kannst HTTP-Requests wie folgt reduzieren:

• CSS-Skripte kombinieren und inline platzieren
• Kleinere JavaScripts inline platzieren
• Alle JavaScript-Dateien kombinieren
• Design- und Funktionsgrafiken sparsam einsetzen
• CSS-Sprites für Bilder nutzen
• Bilder in Base64-Code konvertieren
• Die Anzahl der Social-Buttons begrenzen

Mehr dazu erfährst du in dem Leitfaden How to make fewer HTTP requests.

7. Weiterleitungen und defekte Links reduzieren

Hinter Leistungsproblemen können unter anderem Weiterleitungen und fehlerhafte Links stecken. Vermeide unnötige Weiterleitungen grundsätzlich und behebe defekte Links so schnell wie möglich.

Für Weiterleitungen

Unnötige Weiterleitungen drücken auf die Leistung und Geschwindigkeit der Website. In Shopify kannst du 301-Weiterleitungen mithilfe der integrierten Funktion "URL-Weiterleitungen" anlegen.

Für defekte Links

Defekte Links auf deiner Website können deine unnötigen HTTP-Requests erhöhen, die Benutzererfahrung beeinträchtigen und deinen Rankings schaden. Um defekte Links zu finden und zu beheben, kannst du kostenlose Tools wie Broken Link Checker und Xenu verwenden.

8. Deinen gesamten Tracking-Code mit Google Tag Manager organisieren

In der Regel kommen separate Tracking-Codes für Google Analytics, Google Ads, Ziel- und Remarketing-Tags und andere Zwecke zum Einsatz, die erstellt und eingebaut werden müssen. Dies nimmt einige Zeit in Anspruch und verlangsamt letztendlich die Website. Mit Google Tag Manager kannst du all deine Tags an einem Ort speichern.

Google Tag Manager lässt sich auch mit deinem Shopify-Shop nutzen. In dieser Anleitung von Shopify erfährst du mehr dazu.

9. Ein Hero Image statt Slider nutzen

Slider sind schon seit einiger Zeit beliebt. Wo sie eingesetzt werden, enthalten sie meist 5–6 qualitativ hochwertige Bilder, wodurch sich die Ladezeit der Website erhöht. Untersuchungen haben gezeigt, dass es an der Zeit ist, Slider ad acta zu legen.

Ein paar interessante Zahlen dazu:

• Nur 1 Prozent der Nutzer klicken auf einen Slider. - Quelle
• Slider / Karussells stören Nutzer und verringern die Sichtbarkeit. - Quelle
• Slider / Karussells sind schlecht für die SEO. - Quelle 1 / Quelle 2
• Slider sind nicht gut für Mobile geeignet. - Quelle
• Slider verschieben den Content nach unten. - Quelle

Nutze anstelle eines Sliders ein einzelnes, qualitativ hochwertiges Hero-Layout mit klarer Handlungsaufforderung.

Die konkrete Definition eines Hero Images laut Wikipedia:

Hero image (engl. wörtlich „Heldenbild“) ist ein Webdesign-Fachbegriff für eine besondere Art von Web-Banner. Ein Hero image ist ein großes Banner-Bild, das auffällig (an bevorzugtem Platz) auf der Web-Seite platziert ist, meistens am Anfang und zentriert und die ganze Bildschirmbreite einnehmend.
Das Hero image ist oft das erste, was ein Besucher auf einer Website sieht, und sein Zweck ist es, einen Überblick über den wichtigsten Inhalt der Site zu geben. Je nach Charakter der Website hat das Hero image einen anderen Inhalt: Es kann beispielsweise auf Neuigkeiten über die Site hinweisen, Bestseller einer kommerziellen Site präsentieren oder dort mit einem besonderen Service werben.
Ein Hero image vereint oft Bild und Text, es kann gleich bleiben (statisches hero image), es kann auch verändert oder ausgetauscht werden (dynamisches hero image).

Schlussbemerkung

Beginne mit diesen einfachen und praktischen Tipps, um die Ladezeit deiner Website sofort zu verbessern. Gibt es noch weitere Möglichkeiten, die du nutzt, um deinen Shopify-Shop schneller zu machen? Lass es uns in den Kommentaren wissen.