Da der Wettbewerb im E-Commerce immer stärker wird, suchen Einzelhändler nach neuen Möglichkeiten, sich von der Konkurrenz abzuheben, und die Wettbewerbsgrenze bewegt sich stetig in Richtung Technologie. Die Einführung von Multichannel hat die Customer Journey sehr komplex gemacht, aber eines ist sicher: Geschwindigkeit ist wichtiger denn je. Googles jüngste Ankündigung des Updates zur Seitenerfahrung , ein neuer Ranking-Algorithmus, mit dem Webseiten anhand der Art und Weise beurteilt werden, wie Nutzer die Interaktion mit ihnen wahrnehmen, ist ein deutliches Zeichen dafür, dass der Suchriese die wahrgenommene Geschwindigkeit betont – die Geschwindigkeit, mit der ein Benutzer eine Seite als geladen wahrnimmt.
Die neue Customer Journey für eCommerce ist sofort. 53 % der Besucher verlassen eine mobile Website, wenn das Laden länger als drei Sekunden dauert. Gleichzeitig wurde jede Verzögerung der Lastzeiten von einer Sekunde mit einem Rückgang der Umwandlungen um 7 % verbunden. Neue Technologien ermöglichen jetzt die Geschwindigkeit von Websites, die bisher nicht möglich war. Mit einer Kombination aus modernen tragbaren Frontends, Server-Side Rendering (SSR), Accelerated Mobile Pages (AMP) und modernen CDN-Technologien ist das Laden von Seiten in weniger als einer Sekunde nicht nur möglich – sie werden zum neuen Wettbewerbsplatz im eCommerce.
Inhaltsverzeichnis
- Die Bedeutung der Geschwindigkeit von Websites für den eCommerce
- Geschwindigkeit = Geld
- Was ist AMP und wie funktioniert es
- Upstarts im Einzelhandel übertreffen ihre milliardenschweren Konkurrenten
- Was ist SSR und wie funktioniert es?
- Was sind moderne CDNs und Edge-Computing?
- Zusammenfassung
Die Bedeutung der Geschwindigkeit von Websites für den eCommerce
Die Geschwindigkeit der Website wirkt sich auf die gesamte digitale Strategie aus, von der Sichtbarkeit (SEO und SEM) über den Traffic, die Nutzererfahrung bis hin zu Konvertierungen und Umsätzen. Dies ist direkt auf die zunehmende Fokussierung von Google auf Mobilgeräte und Geschwindigkeit zurückzuführen.
Der Suchriese ist seit Jahrzehnten auf der Suche nach der Feststellung, dass die Geschwindigkeit der Website wichtig ist. Sie haben mehrere mobile Updates eingeführt, um die Bedeutung der Geschwindigkeit mobiler Websites als entscheidend für die Rangfolge in Suchergebnissen und SEM zu festigen.
Zu diesen Bemühungen gehören die Indexierung von Mobilgeräten im Jahr 2016, AMP mit mobilen Anzeigen im Jahr 2017, das Speed Update im Jahr 2019 und das bevorstehende Seitenerfahrungsranking-Update, das Anfang 2021 live gehen wird. Und nicht zuletzt wird das Google-Abzeichen der Schande bald eingeführt und bekanntermaßen langsame Websites markiert und Benutzer warnt, die von der Suchergebnisseite (SERP) aus zur Website navigieren.
Bei aller Fairness hat Google neben der Einführung algorithmischer Änderungen und der Schändung von Websites, um die Rolle der Website-Geschwindigkeit zu betonen, auch eine Reihe von Tools entwickelt, mit denen ein schnelleres Web Wirklichkeit werden kann. Dazu gehören verschiedene Tools zur Erleichterung und Messung der Website-Geschwindigkeit, z. B. PageSpeed Insights, AMP, der Impact Calculator und die Mobile Speed Scorecard, um nur einige zu nennen.
Quelle: Test My Site
Google Test My Site ist ein Tool, mit dem Sie eine schnelle Prüfung Ihrer Website durchführen und die potenziellen Auswirkungen auf den jährlichen Umsatz abschätzen können, wenn Empfehlungen für die Geschwindigkeit der Website umgesetzt werden.
Die Bemühungen, diese Tools zu erstellen, liegen im Interesse von Google, da 58 % der Suchanfragen und 65 % der Werbeeinnahmen des Unternehmens über Mobilgeräte stammen.
Planen Sie eine 1-zu-1-Demo
Planen Sie ein Beratungsgespräch, um zu erfahren, wie der Edgio (Layer0) XDN Ihnen dabei helfen kann, Seiten in weniger als einer Sekunde zu laden. Klicken Sie hier!
Geschwindigkeit = Geld
Es ist allgemein bekannt, dass sich die Geschwindigkeit der Website auf das Kundenerlebnis und den Umsatz auswirkt, insbesondere auf Mobilgeräten.70 % der Verbraucher geben an, dass die Geschwindigkeit der Website ihre Kaufbereitschaft beeinflusst. Amazon berechnete, dass eine Sekunde Verzögerung beim Laden der Seiten 1,6 Mrd. US–Dollar an Umsatzverlusten pro Jahr Kosten würde . Um mehr zu verkaufen, müssen Sie sicherstellen, dass die Inhalte überall dort, wo ein Besucher landet, z. B. auf Ihrem Produktangebot oder auf den Produktbeschreibungsseiten, schnell und mühelos geladen werden. Ebenso sollte der Zahlungsvorgang schnell und einfach sein. Dies bildet die Grundlage für eine erneute Interaktion und veranlasst den Käufer dazu, zurückzugeben und mehr von Ihnen zu kaufen.
Heute wird es jedoch immer schwieriger, schnelle mobile Erlebnisse bereitzustellen. Zusätzlich zu schlecht optimierten, aufgeblähten Websites mit überdimensionalen Bildern und unordentlichem Code stellt eine mobile Seite durchschnittlich 214 Serveranfragen, von denen hundert auf Anzeigen bezogen sind. Folglich dauert das Laden einer durchschnittlichen Seite auf einem mobilen Gerät (bei 4G) 15,3 Sekunden. Einige der wettbewerbsfähigeren Einzelhändler können die Ladezeiten mobiler Seiten auf nur 3-5 Sekunden verkürzen – aber es gibt noch Raum für Verbesserungen. Und das ist kein Problem, das 5G lösen kann.
Es ist der unvereinbare Kompromiss zwischen Werbung, Personalisierung, Analyse und Tracking und einer hervorragenden Nutzererfahrung
Die Grundlage für Geschwindigkeit
Der erste Baustein für blitzschnelle Ladevorgänge der ersten Seite ist die Verwendung von AMP für Suchverkehr und SSR für die anderen Kanäle. Der zweite Schritt besteht darin, ein blitzschnelles Laden nachfolgender Seiten zu gewährleisten. Dies geschieht mit tragbaren Frontends, die auf Geschwindigkeit ausgelegt sind, wie z. B. Progressive Web Apps (PWAs). Die letzte Säule ist ein modernes CDN mit Edge-Computing-Funktionen, mit denen jede Millisekunde beim Laden von Seiten abgezogen werden kann.
Tatsächlich hat Google eine ideale Customer Journey empfohlen, bei der eine Website zuerst eine AMP-Seite bereitstellt, um Nutzer zu suchen, und dann auf den nachfolgenden Seiten zur vollständigen PWA-Version der Website überführt. Und da fast die Hälfte des Traffics auf der Website von Einzelhändlern aus organischer Suche stammt, ist die Unterstützung von AMP und PWA sinnvoll.
Dieses Thema wurde auf der Google I/O 2017 ausführlich diskutiert .
Mit PWAs können Entwickler äußerst ansprechende und blitzschnelle Erlebnisse bereitstellen, die mit nativen Apps konkurrieren. Hinsichtlich des durch Suchvorgänge generierten Datenverkehrs ist AMP jedoch die schnellstmögliche Option mit mittleren Ladezeiten von einer halben Sekunde.
Kurz gesagt, erfordert das Aufsteigen in SERP eine Kombination aus AMP und SSR für schnelle erste Lasten und PWA für blitzschnelle Browsing-Übergänge. Das Problem besteht darin, dass es einfacher gesagt als getan wird, da Enterprise eCommerce-Websites SSR-Unterstützung hinzufügen müssen, was für sich allein schon eine komplexe Aufgabe ist, und zwei separate Websites verwalten müssen, eine für die PWA (normalerweise in React, Angular, Vue, Next oder Nuxt geschrieben) und die andere in AMP HTML.
AMP-Seiten sind so schnell, weil sie vorab abgerufen, vorgerendert und von einem CDN (Content Delivery Network) zwischengespeichert werden. Der AMP-Cache von Google liefert die meisten AMP-Seiten.
Die Grundlagen der Website-Geschwindigkeit bestehen also aus den folgenden drei Schlüsselelementen:
SSR + AMP für schnelle erste Ladungen
Von SERP aus werden Benutzer zu einer AMP-Version der Seite weitergeleitet, um blitzschnell die erste Seite zu laden. SSR macht dasselbe für Besucher aus allen anderen Kanälen, einschließlich E-Mails, sozialen Netzwerken und Empfehlungskanälen.
Tragbares PWA-Frontend für blitzschnelle Browsergeschwindigkeiten
PWA übernimmt die Funktion, um sofortige Browsing-Geschwindigkeiten bereitzustellen, während der Besucher durch nachfolgende Webseiten navigiert. Auf diese Weise können Verbraucher blitzschnelle Ladevorgänge der ersten Seite und sofortige Seitenwechsel über die erste Seite hinaus erleben.
Prefetching + modernes CDN
Mit Predictive Prefetching und einem modernen CDN mit Edge-Computing-Funktionen können Sie dynamische Daten an die Edge und von dort zu den Browsern der Benutzer streamen, bevor sie sie anfordern. Auf diese Weise können Sie das Cache speichern und bedienen, worauf Kunden warten: Die JSON-Daten, die sich auf die verschiedenen Produkte, die Sie auf Lager haben, ihre Preise und Informationen übertragen. Auf diese Weise können Websites des elektronischen Geschäftsverkehrs und andere datenbankgestützte Websites sofortige Erlebnisse bieten und den Verbrauchern 5 Sekunden voraus bleiben (z. B. eine Produktbeschreibungsseite, auf die ein Nutzer am ehesten klickt, bevor er auf den Link klickt).
Jetzt, da wir die drei Säulen kennen, die die Grundlage für die Geschwindigkeit der Website bilden, können wir uns näher mit diesen beiden Säulen befassen.
Was ist AMP und wie funktioniert es
Google AMP ist ein Open-Source-Framework zur Erstellung mobiler Webseiten mit mittleren Ladezeiten von 500 ms. AMP schafft bessere, schnellere Erlebnisse im mobilen Web, indem HTML vereinfacht und strenge Einschränkungen für CSS und JavaScript durchgesetzt werden. Diese Seiten werden dann zwischengespeichert und auf dem Google-Server vorgerendert, so dass sie so schnell bereitgestellt werden.
Die Vorteile von AMP
AMP-Seiten ermöglichen das Laden von Seiten im Median von 500 ms für Traffic aus dem SERP von Google. Diese Geschwindigkeiten sind möglich, da Google-Server AMP-Inhalte vorab in den Browser eines Nutzers abrufbar und vorab wiedergegeben haben, bevor auf den Link zur AMP-Seite geklickt wird. Für die durchschnittliche E-Commerce-Website macht Google-Suche (sowohl organisch als auch kostenpflichtig) etwa 50 % des Traffics aus. Diese Gewinne können sich also auf einen großen Prozentsatz Ihres Traffics auswirken.
Websites, die AMP verwenden, sehen auch Vorteile in der reduzierten Absprungrate, da Benutzer, die in der Regel auf das Laden einer Seite warten, nun blitzschnell auf sie warten.
Wie AMP + PWA das Spiel verändert
Die Kombination aus AMP und Progressive Web Apps (PWAs) deckt die gesamte Customer Journey von der Suche ab und sorgt so für eine schnelle End-to-End-Lösung Der Käufer lädt die AMP-Seite aus einem Google SERP, und während des Durchsuchens der AMP-Seite werden die Ressourcen, die für die PWA-Version der Website benötigt werden, im Hintergrund geladen. Auf diese Weise hat der PWA bereits einen Vorsprung beim Laden des Inhalts für die nachfolgende Seite, wenn der Benutzer Maßnahmen ergreift (z. B. auf eine beliebige Stelle auf der Website klickt), und von dort aus sind alle verbleibenden Übergänge clientseitig gerenderte Browserübergänge und keine neuen Navigationen.
Warum verwenden nicht alle AMP?
Die Kombination aus AMP und PWA ist ein Paradies für Geschwindigkeit, aber es ist ein Albtraum für die Entwicklung. Um die Technologie effektiv zu unterstützen, müssen zwei Versionen Ihrer Website erstellt werden: Eine in der Sprache, in der Ihr Frontend geschrieben ist (die in der Regel JavaScript- oder CSS-schwer ist) und eine andere, die den Standards des AMP-Projekts entspricht. Und es ist erst der Anfang: Jede Bugkorrektur, Layoutänderung, neue Funktion usw. muss möglicherweise sowohl auf die AMP- als auch auf die PWA-Codebase übertragen werden.
Das React Storefront Framework und Layer0 erleichtern Entwicklern die Unterstützung von AMP in ihren React Apps.
Upstarts im Einzelhandel übertreffen ihre milliardenschweren Konkurrenten
Durch die Verwendung der Layer0 AMP-Technologie liefert der Modehändler AKIRA nicht nur sofort erste Ladungen aus der Suche, sondern übertrifft auch Amazon, Nordstrom, Zappos und andere große Marken in Bezug auf Schlüsselsätze.
Vor dem Einsatz der Layer0-Technologie wurden bei AKIRA im Durchschnitt 4,8 Sekunden lang erste Seiten geladen, während die nachfolgenden Seiten in 2,5 Sekunden geladen wurden.
AKIRA konnte diese Ergebnisse verbessern und Seiten in weniger als einer Sekunde laden, indem er fortschrittliche Technologie in Edgio (Layer0) nutzte: Ein eCommerce-PWA mit serverseitigem Rendering und AMP-Konvertierung, Layer0 CDN-AS-JavaScript mit einer Cache-Trefferrate von über 95 % für dynamische Inhalte an der Peripherie (und damit die Website 5 Sekunden vor dem Käufer) und Layer0 serverloses JavaScript-Backend für das Frontend zur Optimierung von Servern und APIs.
Mit Edgio (Layer0) konnte der Einzelhändler in vielen Bereichen einen sofortigen Aufschwung verzeichnen:
- Die ersten Ladezeiten sanken um 70 % auf fast eine Sekunde
- Browsing-Übergänge sind auf erstaunliche 500 ms gefallen
- Die Hälfte der Website-Seiten wird jetzt in weniger als 500 ms geladen
- Die mobile Konversionsrate stieg um 37 %
Lighthouse spiegelt diese Verbesserungen auch hervorragend wider: AKIRAS Performance-Score wurde um 36 Punkte gesteigert, übertraf 75 % der Websites im Internet und bietet ein verbessertes Surfen für Kunden.
Lesen Sie die vollständige AKIRA-Fallstudie.
Annie Selke ist ein weiteres herausragendes Beispiel dafür, wie die Investition in die Geschwindigkeit der Website einem Einzelhändler dabei helfen kann, die Suchergebnisseite der Suchmaschine zu verbessern.
Vor dem Besuch von Edgio (Layer0) erschien der Heim- und Dekorationshändler Annie Selke nicht einmal über den Suchergebnissen von Google. Mit einem Anstieg des organischen Traffics um 32 % und einem 41 Anstieg des mobilen organischen Traffics um 40 % übertrifft es heute seine milliardenschweren Konkurrenten.
Wenn Sie interessiert sind, gibt es auch eine Annie Selke Fallstudie auf unserer Website, in der wir uns mit dem Nutty-Gritty befassen.
Für Online-Einzelhändler wie AKIRA und Annie Selke ist eine gut funktionierende mobile Website eine unschlagbare Frucht. Es kann genau das sein, was sie brauchen, um der unerbittlichen Konkurrenz von eCommerce-Giganten wie Amazon, Nordstrom und Zappos standzuhalten.
Je schneller die Seite, desto höher ist sie, wie ein sofortiger, garantierter SEO. Das Portfolio von Edgio (Layer0) weist zahlreiche Beispiele auf. AKIRA, Annie Selke und Shoe Carnival sind nur einige, die viele große Namen übertreffen, darunter Amazon.
Layer0 bietet eine Kombination aus fortschrittlicher Technologie, um eCommerce auf den neuesten Stand zu bringen:
- E-Commerce-PWA mit serverseitiger Rendering-Unterstützung und AMP-Konvertierung
- Prädiktives Prefetching
- CDN-AS-JavaScript bietet eine Cache-Trefferquote von 95 %+ für dynamische Inhalte an der Peripherie, die die Website dem Käufer 5 Sekunden voraus hält.
- Layer0 Serverless-JavaScript-Backend für Frontend optimiert Server und APIs.
Planen Sie eine 1-zu-1-Demo
Vereinbaren Sie ein Beratungsgespräch, um zu erfahren, wie Edgio (Layer0) Ihnen dabei helfen kann, Seiten im Bereich von weniger als einer Sekunde zu laden. Klicken Sie hier!
Was ist serverseitiges Rendering und wie funktioniert es?
Serverseitiges Rendering (auch SSR genannt) ist eine gängige Technik, um eine normalerweise nur clientseitige PWA-Seite auf dem Server zu rendern und dann eine vollständig gerenderte Seite an den Browser zu senden. Das JavaScript-Bundle des Clients kann dann übernommen werden, und die PWA kann normal funktionieren. SSR übersetzt im Wesentlichen JavaScript-Seiten in HTML, eine Sprache, die sowohl Suchcrawler als auch Browser auf dem Server verstehen. Dadurch wird sichergestellt, dass Browser und Such-Crawler Ihre Seiten problemlos bereitstellen und indizieren können.
Ein großer Vorteil der Verwendung von SSR ist eine App, die von jeder Suchmaschine gecrawlt und indiziert werden kann. Dies hilft bei SEO und der Bereitstellung von Metadaten für Social-Media-Kanäle.
Die Vorteile von SSR
SSR kann oft auch die Leistung verbessern, da eine vollständig geladene App bei der ersten Anforderung vom Server heruntergesendet wird. Bei nicht-trivialen Apps kann die Kilometerleistung jedoch variieren, da SSR ein Setup erfordert, das etwas kompliziert werden kann und eine größere Serverlast verursacht. Glücklicherweise gibt es Dienste und Tools wie isomorphe Frontends und Layer0 mit SSR-Unterstützung sofort einsatzbereit.
Ob Sie für Ihre Website serverseitiges Rendering verwenden, hängt letztlich von Ihren spezifischen Anforderungen ab und davon, welche Kompromisse für Ihren Anwendungsfall am sinnvollsten sind.
Was sind moderne CDNs und Edge-Computing?
Edge Computing ist eine Netzwerkphilosophie, die darauf ausgerichtet ist, die Datenquellen näher zu bringen und die Latenz und Bandbreitennutzung im Prozess zu reduzieren. Durch den Einsatz vieler verschiedener Technologien kann dies umgesetzt werden. Wenn Sie die Berechnung näher an die Netzwerkperipherie heranführen (Computer eines Benutzers, IoT-Gerät oder Edge-Server), wird der Umfang der Kommunikation über große Entfernungen zwischen Client und Server minimiert.
CDNs mit Edge-Computing-Funktionen Sie können die Reisezeit von den Servern der Website zum Browser des Nutzers reduzieren, indem Sie den Inhalt an den dem Nutzer am nächsten gelegenen CDN Point of Presence (POP) streamen (sodass ein Benutzer in San Francisco Inhalte von einem POP in South San Francisco bereitgestellt hat, während ein Benutzer in New York Inhalte von einem POP in Brooklyn erhält).
Die Vorteile von CDNs mit Edge-Computing
CDNs speichern eine gecachte Version Ihrer Website an mehreren Speicherorten, um ein schnelleres Laden der Seiten zu gewährleisten. Jeder dieser POP enthält mehrere Caching-Server, die für die Bereitstellung von Inhalten an Besucher in seiner Nähe verantwortlich sind.
Das CDN-AS-JavaScript von Layer0 bringt das Konzept auf eine neue Ebene. Es ist ein anwendungsorientiertes CDN, das Ihre App versteht. Es verwendet dieselbe Sprache, die Ihre Frontend-Entwickler bereits kennen, und gibt Ihnen die volle Kontrolle über das Caching. Infolgedessen sehen Websites, die Layer0 verwenden, Cache-Trefferquoten von 95 %+ für dynamische Inhalte an der Peripherie.
Dank der Edge-Computing-Funktionen von Layer0 CDN-AS-JavaScript sind Sie dem Käufer 5 Sekunden voraus, indem Sie die wahrscheinlichsten nächsten Seiten vorab abrufen und an die Edge streamen, bevor sie angefordert werden, sodass sie im Cache gespeichert und für den Benutzer bereit sind, bevor er auf einen Link zu ihnen klickt.
Zusammenfassung
Lange Ladezeiten können die Benutzererfahrung und das Suchranking einer Website ruinieren. AMP löst einen Teil dieses Problems – die erste Seite der Suche wird blitzschnell. Aber das ist nur die halbe Schlacht. Um Ihre Website auf den neuesten Stand zu bringen, müssen Sie noch mehr tun und einen ganzheitlicheren Ansatz verfolgen – eine Kombination aus Technologien wie Accelerated Mobile Pages (AMP), modernen tragbaren Frontends, Server-Side Rendering (SSR) und CDNs mit Edge-Computing-Funktionen.
Layer0 unterstützt komplexe und dynamische E-Commerce-Websites bei einer Geschwindigkeit von weniger als einer Sekunde, erhöht gleichzeitig die Entwicklungsgeschwindigkeit und das Ertragswachstum und senkt die DevOps-Kosten. Es enthält auch ein CDN-as-JavaScript, das eine Cache-Trefferquote von 95 % oder mehr für dynamische Inhalte liefert, verglichen mit nur 15 % für andere CDNs.
Layer0 bietet konsistente Seitenladezeiten von weniger als 500 ms für große eCommerce-Websites mit Dutzenden von Tags und Skripten, ganz zu schweigen von dynamischen Preisen und Echtzeit-Inventarsuchen. Diese Geschwindigkeitssteigerungen führen bekanntermaßen zu 15-30% Umbauaufzügen, besserer Sicht, Reichweite und letztendlich zu höheren Einnahmen.
Vereinbaren Sie ein Beratungsgespräch mit einem Experten für die Geschwindigkeit Ihrer Website, um zu erfahren, wie wir Ihnen helfen können, sich mit einer Instant eCommerce-Website einen Wettbewerbsvorteil zu verschaffen!
