Verbessern Sie den mobilen E-Commerce: Machen Sie Ihre Website schneller

Verschiedene Statistiken vermerken den Unterschied, den jede Sekunde Ladezeit für die Konversionsrate eines E-Commerce-Shops ausmacht. Ich persönlich bin bei vielen dieser Statistiken etwas skeptisch, da es viele andere Faktoren gibt, die die Konversionsrate eines Shops beeinflussen können. Angesichts der Dominanz des mobilen E-Commerce und des Browsens über das Desktop-Browsing für fast alle Einzelhandels-Websites ist es jedoch eindeutig wichtig, dass ein E-Commerce-Shop so schnell wie möglich ist, da die Geschwindigkeit die Erfahrung eines Benutzers direkt beeinflusst.

Es gibt zahlreiche Möglichkeiten, das Frontend Ihrer Website zu optimieren; manche komplex und teuer, manche ganz einfach. Sie werden oft feststellen, dass Sie früh schnell und einfach große Gewinne erzielen können, aber schließlich werden Sie abnehmende Renditen und kleinere inkrementelle Verbesserungen erzielen.

Wie weit Sie gehen, hängt wirklich von der Höhe Ihrer Online-Einnahmen ab und davon, wie viel zusätzliche Einnahmen aus dem mobilen E-Commerce Sie wahrscheinlich durch die kleineren inkrementellen Verbesserungen erzielen werden.

Die Verbesserung der Konversionsrate um 0,1 % wird für einen großen Einzelhändler eine viel höhere Kapitalrendite erzielen als für einen kleineren.

Optimieren Sie Bilder für ein erstklassiges mobiles E-Commerce-Erlebnis

Die Bildoptimierung ist ein Bereich, in dem eine große Reduzierung der Seitenladezeit schnell und einfach erreicht werden kann. Ich sehe oft einen Konflikt zwischen Grafikdesignern, Merchandisern und E-Commerce-Managern, wenn es um Bildqualität und -größe geht. Ein Grafikdesigner möchte das größtmögliche Bild mit der höchsten Auflösung und wird nicht immer die Geschwindigkeitsauswirkungen eines von ihm erstellten Bildes berücksichtigen. Ein Merchandiser möchte wahrscheinlich die größten Produktbilder mit der höchsten Auflösung, während der E-Commerce-Manager möglicherweise der einzige ist, der die allgemeine Seitengeschwindigkeit sehen und schätzen kann.

Bildoptimierung ist immer ein Gleichgewicht zwischen Qualität und Dateigröße. Je höher die Bildqualität, desto höher die Dateigröße. Die native Größe und die Komplexität des Bildes wirken sich auch auf die Dateigröße aus. Ein Bild mit einem detaillierten und komplexen Hintergrund hat wahrscheinlich eine viel größere Dateigröße als eines mit einem einfachen Hintergrund.

Designer erstellen gerne wirkungsvolle Banner für eine Website mit vielen Farben und einem Hintergrund, der nicht nur einfarbig ist. Dies kann eine große visuelle Wirkung haben, aber die Folge davon ist eine viel höhere Dateigröße als bei einem ähnlichen Banner mit einem einfachen Hintergrund. Die Einführung von hochauflösenden Bildschirmen wie dem Retina Display von Apple macht es noch schwieriger, das Gleichgewicht aufrechtzuerhalten, da die Bildschirme Unvollkommenheiten in Bildern mit geringerer Qualität hervorheben.

Es ist wichtig, dass alle Teammitglieder die Frontend-Optimierung und die Auswirkungen verstehen, die grafische Entscheidungen auf die Größe von Bildern und damit auf die Seitengeschwindigkeit haben.

Während Standard-Designtools wie Photoshop es Designern ermöglichen, Bilder zu optimieren, gibt es eine Reihe von Diensten von Drittanbietern, die Bilder auf Ihrer Website automatisch optimieren können. Sowohl Akamai als auch Ampliance bieten Bildverwaltungsdienste an, die Ihre Bilder basierend auf einer Reihe konfigurierter Regeln optimieren. Sie können sogar JPEG-Dateien in WebP-Bilder für unterstützende Browser umwandeln, um sicherzustellen, dass die Dateigrößen so klein wie möglich sind.

Bei Envoy haben wir kürzlich den Akamai Image Manager auf der Website eines Kunden getestet und eine durchschnittliche Reduzierung der Dateigröße von PLP-Bildern um 80 % festgestellt, ohne merkliche Beeinträchtigung der visuellen Qualität. Dies führte zu einem enormen Rückgang des Gesamtgewichts der PLP-Seiten (Produktlistenseiten) und einem sofortigen großen Sprung in ihren Google Pagespeed-Ergebnissen. Wenn Sie dafür keinen Drittanbieterdienst verwenden möchten, können Sie ein Open-Source-Tool wie Thumbor implementieren, einen Dienst, den Sie lokal auf Ihren Webservern installieren. Tools wie dieses optimieren Ihre Bilder automatisch im laufenden Betrieb und speichern sie dann in einem Repository zwischen.

Verwenden Sie ein CDN

Content Delivery Networks (CDNs) sind Dienste, die Ihre Inhalte in einem Netzwerk von Servern zwischenspeichern, das allgemein als Edge bezeichnet wird. Diese Server werden normalerweise weltweit an vielen Standorten gehostet, um sicherzustellen, dass Ihre Inhalte an einem Standort zwischengespeichert werden, der physisch näher an den Benutzern liegt als Ihre Ursprungsserver. Während CDNs oft nur zum Zwischenspeichern von Bildern, CSS, JavaScript und Videos verwendet werden, können Sie sie auch zum Zwischenspeichern vollständiger HTML-Seiten verwenden.

Indem Sie vollständige HTML-Seiten zwischenspeichern, können Sie die Bereitstellung von Seiten für Ihre Benutzer erheblich beschleunigen. Da der HTML-Code zwischengespeichert wird, muss Ihre Ursprungs-Webanwendung die Seite nicht jedes Mal erstellen und an den Benutzer zurücksenden, wenn sie angefordert wird, und der CDNs-Cache-Server (Point of Presence) ist wahrscheinlich physisch näher am Benutzer als Ihr Ursprung Server. CDNs verfügen auch über eine Technologie zur Komprimierung und Beschleunigung der Bereitstellung von Inhalten für Benutzer, was alles zu einem viel schnelleren Erlebnis führt.

CDNs können auch die Last auf Ihren Ursprungsservern erheblich reduzieren. Eine PLP-Seite ist oft eine prozessorhungrige Seite, die Ihre Webanwendung spontan generieren muss. Es kann eine große Anzahl von Produkten und Facetten enthalten, die sich alle zu einer Menge Verarbeitung summieren. In den meisten Fällen ändert sich eine PLP-Seite nicht von einer Stunde zur nächsten, so dass das Zwischenspeichern dieser Seite für eine Stunde durchaus möglich ist. Anstatt diese Seite möglicherweise innerhalb einer Stunde tausende Male generieren zu müssen, muss Ihr Ursprungsserver dies einmal tun. In Wirklichkeit funktioniert es nicht ganz so, da viele CDNs mehrere unabhängige Caches haben werden, aber Sie können immer noch mit einem Offload von etwa 60 % rechnen. Das bedeutet, dass Ihre Ursprungsserver und -anwendungen 60 % weniger Anfragen erhalten als ohne das vorhandene CDN.

Verwenden Sie Tools zur Geschwindigkeitsanalyse, um das mobile E-Commerce-Erlebnis zu optimieren

Es gibt eine Reihe kostenloser und kostenpflichtiger Online-Tools, die eine Webseite analysieren und Empfehlungen geben können, wie Sie Ihre Website schneller machen können. Die drei wohl am häufigsten verwendeten kostenlosen Tools sind Google PageSpeed ​​Insights, Yslow und Webpagetest. Jedes dieser Tools ist etwas anders, aber alle analysieren Ihre URL und senden einen Bericht mit Empfehlungen und einer Punktzahl.

Diese Tools können sehr wertvoll sein, um Ihnen schnell zu zeigen, welche Elemente einer Webseite sie verlangsamen, und einige Tools bieten Ihnen sogar Lösungen zur Lösung dieser Probleme. Sie sind zwar nicht umfassend, aber ein schneller und einfacher Weg, um die Änderungen zu finden, die große Auswirkungen haben können.

Minimieren Sie die Verwendung von Skripten von Drittanbietern

Die meisten B2C-E-Commerce-Websites enthalten eine Vielzahl von Ressourcen von Drittanbietern, die von Tracking-Skripten für Affiliate-Netzwerke bis hin zu MVT-Tests reichen. Sie können einen Twitter-Feed, Facebook-Tracking oder sogar externe Schriftarten enthalten. Diese externen Ressourcen können eine Website erheblich verlangsamen, wenn sie nicht sehr sorgfältig verwaltet werden.

Wenn Sie einen Webseiten-Geschwindigkeitsanalysator verwenden, werden Sie oft feststellen, dass diese Ressourcen ständig in der Liste der Elemente erscheinen, die zur Seitengeschwindigkeit beitragen. Eine der größten Herausforderungen besteht darin, dass Sie keine Kontrolle über die Größe und Optimierung dieser Ressourcen haben, da sie von Drittanbietern entwickelt und gehostet werden.

Sie sollten die Ressourcen von Drittanbietern, die von Ihrer Website aufgerufen werden, regelmäßig überprüfen und sicherstellen, dass sie alle am richtigen Ort und auf die richtige Weise ausgelöst werden und dass Sie sie tatsächlich verwenden. Ich habe viele Fälle gesehen, in denen ein Tracking-Skript für einen Dienst, der nicht mehr verwendet wird, immer noch ausgelöst wird, weil es mit GTM hinzugefügt wurde und jemand vergessen hat, es zu entfernen, als der Dienst nicht mehr verwendet wurde.

Google-AMP

Das Google Accelerated Mobile Pages-Projekt ist eine Open-Source-Web-Publishing-Technologie, die darauf abzielt, die Geschwindigkeit und Leistung von Inhalten zu verbessern, die speziell auf Mobilgeräten bereitgestellt werden. Die von Google angeführte und 2015 initiierte AMP-Technologie wurde ursprünglich für die Bereitstellung von Nachrichteninhalten entwickelt. AMP-Seiten sind sehr leicht und verbrauchen in der Regel etwa 10-mal weniger Daten als ihre entsprechenden Nicht-AMP-Pendants und werden oft in weniger als 1 Sekunde geladen. Es gibt jedoch einen großen Haken. AMP-Seiten unterstützen nur einen sehr begrenzten Funktionsumfang und sind daher für viele Anwendungen nicht geeignet, insbesondere für reichhaltige und funktionale E-Commerce-Websites.

Eine Handvoll Einzelhändler haben AMP für E-Commerce mit gemischtem Erfolg ausprobiert. Obwohl sie viel schnellere Seiten haben, mussten sie die Funktionalität und Benutzererfahrung rund um die Einschränkungen von AMP komplett neu gestalten. Komplexe Bereiche der Website, wie z. B. der Checkout, können nicht in AMP erstellt werden, sodass der Benutzer entweder zum Standard-HTML- oder zum Checkout einer progressiven Web-App (PWA) geleitet wird.

Während AMP ein sehr interessantes Projekt ist und in der Nachrichtenbranche gut angenommen wurde, muss es beim E-Commerce noch eine echte Zugkraft zeigen. Wenn Google die verfügbaren Funktionen weiter ausbaut, kann ich mir vorstellen, dass dies ein praktikables Tool für den E-Commerce wird.

Gehen Sie anpassungsfähig

Die meisten E-Commerce-Websites sind jetzt responsiv aufgebaut, wobei sich das Layout dynamisch an den Bildschirm anpasst, auf dem es angezeigt wird. Dies ist sicherlich einer separaten Mobil- und Desktop-Version Ihrer Website vorzuziehen und bedeutet im Allgemeinen, dass Ihre Website auf den zahlreichen verfügbaren Bildschirmgrößen gut funktioniert.

Bei einem responsiven Design werden jedoch in der Regel dieselben Assets verwendet, unabhängig davon, auf welchem ​​​​Gerät die Website angezeigt wird. Banner und Produktbilder werden oft nur verkleinert angezeigt oder in einer mobilen Ansicht sogar ausgeblendet, aber die große Datei wird trotzdem heruntergeladen.

Hier können Elemente des adaptiven Designs zum Einsatz kommen. Anstatt ein fließendes Design zu erstellen, das sich dynamisch an die Bildschirmgröße anpasst, verfügt eine adaptive Website über mehrere feste Layouts, die für bestimmte Bildschirmgrößen entwickelt wurden. Auf diese Weise können Designer die Benutzererfahrung für jede spezifische Bildschirmgröße streng kontrollieren und optimieren.

Obwohl dies komplexer und zeitaufwändiger zu implementieren ist, besteht einer der wichtigsten Geschwindigkeitsvorteile darin, dass Sie ein bestimmtes für Mobilgeräte optimiertes Bild auf diesem Gerät laden, anstatt nur ein größeres Bild in einer kleineren Größe auf einem Mobilgerät anzuzeigen Ladezeit reduzieren. In einem responsiven Design können Sie bestimmte Desktop-Elemente ausblenden, wenn die Website auf Mobilgeräten angezeigt wird. In einem adaptiven Design laden Sie sie überhaupt nicht.

Eine pragmatische Alternative zur vollständigen Anpassung besteht darin, JavaScript in Ihrem responsiven Design zu verwenden, um die verwendete Bildschirmgröße zu erkennen und sicherzustellen, dass für Mobilgeräte optimierte Bilder angefordert und angezeigt werden, anstatt einfach größere Bilder in einer kleineren Größe anzuzeigen. Dadurch wird sichergestellt, dass nur die angezeigten Bilder und Inhalte angefordert und damit heruntergeladen werden, während die Vorteile eines responsiven Designs erhalten bleiben.

Es gibt eine Vielzahl verschiedener Möglichkeiten, die Seiten Ihrer mobilen E-Commerce-Website zu beschleunigen. Einige beinhalten die Entwicklung, andere die Nutzung der Dienste von Drittanbietern und wieder andere ein Gleichgewicht zwischen Design und Funktion.