12 Möglichkeiten zur Verbesserung der Leistung von E-Commerce-Websites und der Seitengeschwindigkeit:
Verwenden Sie schnelles und zuverlässiges Hosting
Nutzen Sie ein Content Delivery Network (CDN)
Organisieren Sie Ihr Tracking mit Google Tag Manager
Priorisieren Sie das Testen und Optimieren Ihrer mobilen Leistung
Verwenden Sie Popup-Schnellansichtsfenster sparsam
Vorsicht vor übermäßigen Flüssigkeitszyklen
Reduzieren Sie die Größe der Miniaturansichten
Machen Sie Home Hero Slides einfach
Wägen Sie die Vorteile der Installation einer anderen App ab
Bilder komprimieren und verkleinern
Machen Sie Ihren Code universell kleiner
Reduzieren Sie Weiterleitungen und entfernen Sie defekte Links
Wie wirkt sich die Seitengeschwindigkeit auf den E-Commerce aus?
Die Seitengeschwindigkeit (oder Ladezeit) bezieht sich auf die Gesamtzeit, die zum Laden von Inhalten auf einer bestimmten URL benötigt wird. Umgekehrt ist die Website-Geschwindigkeit der Durchschnitt verschiedener Ladezeiten, die Dienste wie Google verwenden, um eine Website insgesamt zu bewerten.
Ende letzten Jahres berechnete Skilled die Zahl in 12 separaten Fallstudien zur Seitengeschwindigkeit und entdeckte eine Reihe beunruhigender Ergebnisse.
Wenn es um Kundenerwartungen und Leistung vor Ort geht:
79% der Kunden, die mit der Leistung einer Website „unzufrieden“ sind, kaufen seltener wieder auf dieser Website ein
64% der Smartphone-Nutzer erwarten, dass eine Website innerhalb von vier Sekunden oder weniger geladen wird
47% der Online-Käufer erwarten, dass Webseiten innerhalb von zwei Sekunden oder weniger geladen werden
Kundenerwartungen und Leistung der E-Commerce-Website
Vielleicht überraschender ist der Sekundenunterschied im E-Commerce:
Wenn eine Site 100.000 US-Dollar pro Tag verdient, führt eine Verbesserung um eine Sekunde zu zusätzlichen 7.000 US-Dollar pro Tag
Eine Verzögerung der Ladezeit um eine Sekunde entspricht normalerweise einem Verlust von 11% bei den Seitenaufrufen
Eine Verzögerung von einer Sekunde bedeutet eine Reduzierung der Conversions um insgesamt 7%
Der Unterschied, den eine Sekunde im E-Commerce macht
Darüber hinaus wirkt sich Ihre Seitengeschwindigkeit auch auf die Fähigkeit eines neuen Besuchers aus, Ihre E-Commerce-Website sowohl über PPC-Kanäle als auch über organische Suchmaschinen zu finden.
Im ersten Fall generieren langsame Websites langsame Zielseiten. Langsame Zielseiten senken Ihren Google-Qualitätsfaktor. Niedrigere Google Quality Scores bedeuten höhere Kosten pro Klick.
Zweitens, was SEO-Experten seit langem über das organische Ranking vermutet haben, hat Google kürzlich ein sogenanntes „Speed Update“ formalisiert:
„Obwohl das Ranking seit einiger Zeit die Geschwindigkeit verwendet, konzentrierte sich dieses Signal auf Desktop-Suchvorgänge. Heute geben wir bekannt, dass die Seitengeschwindigkeit ab Juli 2018 ein Ranking-Faktor für mobile Suchvorgänge sein wird.“
Wo solltest du anfangen?
Analytics zur Verbesserung der Site-Leistung und Seitengeschwindigkeit
Wenn Sie ein Google Analytics-Konto haben, suchen Sie eine Registerkarte mit dem Namen „Verhalten“, wählen Sie „Site-Geschwindigkeit“ und klicken Sie auf „Übersicht“. Auf dieser Seite finden Sie einige wichtige Statistiken, die Sie verfolgen können, z. B. die durchschnittliche Downloadzeit Ihres Benutzers, die Domain-Suchzeit und die durchschnittliche Server-Antwortzeit.
Schauen Sie sich als Nächstes den Abschnitt „Seitenzeiten“ an, in dem Sie eine Aufschlüsselung Ihrer Website nach Seiten sowie die Gesamtladerate für jede Seite und sogar für jeden Browser finden. Ein rotes Kästchen zeigt verzögerte und langsame Seiten an:
Was können Sie also tun, um die Leistung und Geschwindigkeit von E-Commerce-Websites zu verbessern?
1. Verwenden Sie schnelles und zuverlässiges Hosting
Ihr Hosting-Service und Ihre Infrastruktur können die Leistung der gesamten E-Commerce-Site erhöhen oder stören – insbesondere an Tagen mit hohem Datenverkehr und hohen Transaktionen.
Die Liste der Markeneinzelhändler – wie Best Buy, Lowes, Macy’s und andere -, die während des Black Friday Abstürze von E-Commerce-Websites erlebten, wächst jedes Jahr weiter. Abgesehen von schlechter Werbung kann es schmerzhaft sein, Umsatzverluste aufgrund dieser Ausfallzeit zu akzeptieren.
Laut einer ITIC-Umfrage:
81% der Befragten gaben an, dass die 60-minütige Ausfallzeit ihr Unternehmen 300.000 USD (20.556.622,37 INR) gekostet hat.
Einige Faktoren, die bei der Untersuchung der Anforderungen an die Hosting-Plattform berücksichtigt werden müssen, sind:
Speicher- oder Bandbreitenbeschränkungen, um zu bestimmen, ob die Plattform bei geplanten Flash-Verkäufen und saisonalen Werbeaktionen nach Bedarf skaliert werden kann
Projizierter Datenverkehr und höchste Benutzerlast, um sicherzustellen, dass eine Plattform aufgrund der plötzlichen Zunahme der Besucher Ihrer Website nicht abstürzt
PCI-konforme Sicherheit, um die Daten Ihrer Benutzer jederzeit zu schützen
Warum sollten Sie mit dem Hosting beginnen? Weil…
Merchant Spotlight: Bombas
Als Bombas zum ersten Mal in hochkarätigen TV-Shows wie Shark Tank auftrat, stieg die Auslastung der E-Commerce-Website von 500 Transaktionen pro Tag auf über 5.000.
Leider stürzte die Website von Bombas auf der alten Hosting-Plattform direkt nach der ursprünglichen Show ab und führte sie dann auf CNBC erneut aus.
Verzerrte Produktbilder und ein langsames Checkout-Erlebnis kosten das Unternehmen viele potenzielle Neukäufe und ständige Kunden.
Die Umstellung auf Shopify Plus gab Bombas die Zuversicht, dass die E-Commerce-Website bei stark frequentierten Verkehrsspitzen wie zukünftigen Wiederholungen von Shark Panzern skaliert und betriebsbereit bleibt.
In Bezug auf den Black Friday Cyber Monday erklärt David Heath, Mitbegründer von Bombas:
„Es ist eine Zeit des Jahres, in der wir Verkäufe anbieten. Die Vorbereitung darauf dauert also ein Jahr – Kundenakquise, unser E-Mail-Plan, Entwicklung und Veröffentlichung neuer Produkte, Sicherstellung, dass wir auf Lager sind und dann sicherstellen, dass alles läuft reibungslos und alle unsere Kunden erhalten ihre Produkte, wenn sie bestellen. Stellen Sie sicher, dass wir das gesamte Personal in ihren Dienstleistungen haben. „
Unabhängig davon, ob wir 500 oder 5.000 Bestellungen pro Tag bestellen, skaliert Shopify Plus automatisch mit uns, ohne dass wir zusätzliche Maßnahmen ergreifen müssen.
Was erklärt den Unterschied?
Dank seiner Cloud-basierten Infrastruktur behält Shopify Plus im Gegensatz zu Magentos lokalem Ansatz nicht nur eine Gesamtverfügbarkeit von 99,98% bei, sondern Ihre Storefront wird 2,97-mal schneller geladen als andere SaaS-Plattformen wie BigCommerce, und Analysten sparen bis zu 40% des Zahlungsverkehrs schlägt vor, dass es schneller geht.
Außerdem erzielten die Anbieter von Shopify auf dem Höhepunkt des Black Friday Cyber Monday einen Umsatz von 1,1 Mio. USD pro Minute (75,37 INR).
Eine vollständige Übersicht über BFCM finden Sie in unserer Holiday Online Shopping-Wissenstabelle: Daten und Erkenntnisse von Cyber Monday für Black Friday, This Year and Beyond
Greg Merrell, Mitbegründer von simplistic, einem Shopify Plus-Partner, der sich auf schnelle Verkäufe mit hohem Volumen und hohem Verkehrsaufkommen spezialisiert hat, sagte:
„Shopify Plus ist die einzige Plattform, auf die wir uns verlassen, um den massiven Anstieg des Datenverkehrs und der Transaktionen von Good Morning America, The View und anderen landesweit im Fernsehen übertragenen Flash-Verkäufen zu bewältigen.“
„Mit über tausend erfolgreichen Flash-Verkäufen können wir Shopify Plus definitiv für alle Ihre Anforderungen an hohen Datenverkehr empfehlen.“
2.Verwenden Sie ein Content Delivery Network (CDN).
Ein Content Delivery Network oder Content Delivery Network (CDN) besteht aus einer Gruppe optimierter Server, die auf der ganzen Welt verteilt sind. Es verteilt die Last der Bereitstellung des Inhalts auf den Server, der dem Standort des Besuchers am nächsten liegt.
Im Wesentlichen werden Kopien des Inhalts Ihrer Website an jedem Ort gespeichert, um die Benutzererfahrung vor Ort schneller und zuverlässiger zu gestalten.
Sie können auch ein CDN wie unten beschrieben mit Ihrem Tag-Management-System (TMS) verwenden, um die Leistung Ihrer E-Commerce-Site zu verbessern. Anstatt sich auf einen einzelnen Server zu verlassen, zieht Ihr CDN Ihre Tags vom am besten geeigneten Server und lädt sie auf die schnellsten Server hoch.
Angesichts des zunehmend internationalen Charakters des E-Commerce ist die Nutzung eines CDN (oder im Fall von Shopify von zwei CDNs) eine nicht verhandelbare Komponente, die Ihre Plattform regelmäßig bereitstellen und optimieren muss.
Shopify bietet Händlern ein Premium-CDN von Fastly ohne zusätzliche Kosten. Damit können Shopify-Geschäfte fast sofort überall auf der Welt eröffnet werden, insbesondere in den USA, Großbritannien, im asiatisch-pazifischen Raum (Asien, Australien und Neuseeland) sowie in Südamerika und Südafrika.
Anstatt wie bei den alten CDNs in der DFÜ-Ära Tausende kleiner, verteilter Präsenzpunkte (POPs) zu erstellen, wird schnell ein grundlegend anderer Ansatz verfolgt:
„Wir haben uns darauf konzentriert, weniger und leistungsfähigere POPs an strategischen Standorten auf der ganzen Welt bereitzustellen. Mit POPs mit hoher Dichte können wir mehr Dienste aus dem Cache bereitstellen, einschließlich statischer und ereignisgesteuerter Inhalte. Dies verbessert Ihre Cache-Trefferquote und eine bessere Benutzererfahrung.“ . „
Bild über Fastly Network Map (März 2018)
Als Backup bietet Shopify auch Zugriff auf das CDN von Akamai, das das Unternehmen als „Media Delivery Network“ bezeichnet:
Bei CDNs geht es sowohl um die Erhöhung der Geschwindigkeit als auch um die Senkung der Kosten. Diana Harbour, Inhaberin der Red Dress Boutique, erklärt:
„Mit Magento Enterprise beginnt und steigt die jährliche Lizenz bei rund 50.000 USD (3.426.103,73 INR). Hosting kostet uns weitere 6.000 USD pro Monat (411.132,45 INR) und CDN (137.044,15 INR) 2.000 USD pro Monat. Wir erhalten unsere Lizenz, Hosting, und CDN von Shopify Plus, wodurch wir im Vergleich zu Magento ungefähr 100.000 USD pro Jahr (INR 6.852.207,46) eingespart haben. „
Wie funktioniert das CDN von Shopify?
Shopify benachrichtigt das CDN, dass sich Ihre Assets wie Bilder, JS und CSS jedes Mal ändern, wenn Sie dies von Ihnen tun.
In Bezug auf visuellen Inhalt, der häufig die Ursache für eine langsame Leistung ist, verwendet Shopify den Filter „Asset_url“ und fügt allen generierten URLs automatisch Versionsnummern hinzu. Beispielsweise könnte eine am Ende einer URL angehängte Versionsnummer folgendermaßen aussehen:?
Wenn Sie ohne Verwendung des Asset-URL-Filters auf ein Bild verlinken und eine neue Version desselben Inhalts hochladen, wechselt Ihr Online-Shop möglicherweise einen Tag oder länger nicht zur neuen Version. Wenn Sie den Inhalt direkt in Ihrem CSS referenzieren, ist die URL statisch und enthält nicht die Version des Assets, das Shopify automatisch aktualisiert.
Um sicherzustellen, dass Aktualisierungen automatisch erfolgen, ändern Sie Ihre CSS-Syntax so, dass sie den Asset_url-Filter enthält. Informationen zu allen URL-Filtern, die zum Importieren von Assets verwendet werden, finden Sie in der Übersicht in der Shopify-Hilfe.
Ein standardisiertes CDN ermöglicht es Shopify Plus-Händlern, das „Backend auf Autopilot“ ihrer Websites zu stärken, sodass sie sich auf andere Geschäftsprioritäten wie die Maximierung des Vertriebs- und Marketingerfolgs konzentrieren können. Gouverneur Vetan, Mitbegründer von Mava Sports, sagt es am besten:
Es ist tatsächlich billiger, weil Sie kein Content Delivery-Netzwerk kaufen müssen. Sie müssen keinen Entwickler kaufen. Sie müssen nicht damit beschäftigt sein, ein Team zu suchen. Alles an einem Ort.
3. Organisieren Sie Ihr Tracking mit Google Tag Manager
Um Ihre E-Commerce-Website und Ihre Strategie für digitales Marketing erfolgreich zu optimieren, müssen Sie eine Reihe von Kundendaten erfassen.
Leider sind all diese JavaScript-Tracking-Tags – allgemeine Analysen, Conversions und Ziele, Verhaltens-Retargeting usw. Für – es kann schließlich die Leistung Ihrer Site verlangsamen.
Es ist auch eine Zeit- und Ressourcenbelastung für Ihre Entwickler-, IT- oder Marketingteams, Tags in Ihrem MarTech-System bereitzustellen, zu testen und zu verfolgen. Wie NChannel erklärt:
„Das Hinzufügen, Aktualisieren und Verwalten all dieser Tags ist für Entwickler zu einer Belastung geworden. Daher haben Anbieter wie Google Tag-Management-Systeme entwickelt, um die Dinge zu vereinfachen. Google Tag Manager erleichtert die Implementierung von JavaScript auf Ihrer Website.“
Ein Tag-Management-System (TMS) wie Google Tag Manager konzentriert alle Ihre MarTech-Tags in einer einzigen JavaScript-Anfrage.
Laut Tag Inspector „reduziert dies die Anzahl der erforderlichen externen Suchvorgänge. Außerdem wird diese Anforderung asynchron ausgeführt (im Hintergrund kann der Rest Ihrer Website unabhängig vom Antwortergebnis geladen werden).“ Wenn Ihre Website aufgrund eines Tag-Fehlers heruntergefahren wird, können Sie das Tag mit einem TMS schnell entfernen. Dies erspart Ihnen stundenlange Frustration und möglicherweise Millionen von Dollar.
Das folgende ConversionXL-Diagramm zeigt, wie ein TMS die Ladezeit Ihrer Seite beschleunigen kann:
Vor der Verwendung von Google Tag Manager benötigte Airbnb zwei bis drei Tage, um die Tagging-Verteilung und den QS-Prozess abzuschließen. „Mit Google Tag Manager dauert es ungefähr eine Stunde, von der Erstellung von Tags über Tests bis hin zur Qualitätssicherung und Verteilung. Es ist exponentiell besser“, sagt Mona Gandhi, Software-Ingenieurin bei Airbnb. Airbnb bietet jetzt eine „8% ige Verbesserung der Ladezeit von Seiten“.
Bewerten Sie jedes Tool, das Sie zum Google Tag Manager hinzufügen, sorgfältig
Die Werbeagentur A Digital weist darauf hin, dass Google Tag Manager zwar Zeit spart und die Leistung Ihrer E-Commerce-Website enorm beschleunigt, es jedoch wichtig ist, „jedes hinzugefügte Tool in Frage zu stellen“, um die Auswirkungen auf Ihre Anzeigen zu überprüfen. Seitengeschwindigkeit und Benutzererfahrung. „“
Wie Sie sehen können, sind die Ladezeiten in der vollständigen Wasserfallansicht der markierten Tracking-Tools auf der A Digital-Website unten fast zur Hälfte festgelegt.
Nach den roten Linien neben Typekit-Schriftarten ist klar, dass Intercom die größte Hürde bei der Seitengeschwindigkeit der Agentur-Website darstellt. Die Agentur schlägt vor, dass durch das Entfernen der Gegensprechanlage die Ladezeit um fast die Hälfte verkürzt wird.
In ähnlicher Weise hat der Shopify Plus-Anbieter Mava Sports „so viele Apps und Plugins wie möglich entfernt, ohne die Benutzererfahrung zu beeinträchtigen“, damit die Website fast fünfmal schneller geladen wird.
Die gute Nachricht ist, dass Sie nur einen Codeausschnitt benötigen, um alle Ihre Shopify Plus-Store-Tags mit Google Tag Manager an einem Ort zu verwalten. Weitere Informationen finden Sie in den Anweisungen in der Shopify Plus-Hilfe. Wenn Sie eine visuelle Demonstration benötigen, bietet Measure School eine kostenlose, praktische Schulung an:
4.Priorisieren Sie das Testen und Optimieren Ihrer mobilen Leistung
Sie haben aus erster Hand erfahren, wie es sich wie eine Ewigkeit anfühlen kann, auf eine langsam ladende Seite zu warten. Laut Mobile 1:
Langsame Seiten sind das Hauptproblem, über das sich mobile Benutzer beschweren – sie rangieren sogar höher als Website-Abstürze.
Google hat kürzlich ein tiefes neuronales Netzwerk trainiert – „ein Computersystem, das dem menschlichen Gehirn und dem Nervensystem nachempfunden ist“ – und …
Mobile Ladezeit und Absprungrate erhöhen sich
Eine Mobile-First-E-Commerce-Strategie war noch nie so wichtig. Und die Situation wird sich verschlechtern, wenn Sie die mobile UX Ihrer E-Commerce-Website nicht bald optimieren.
Am Black Friday Cyber Monday verzeichnete Shopify 64% aller Verkäufe auf Mobilgeräten, ein Plus von 10% gegenüber dem Vorjahr. Dieser Trend wird sich auch in Zukunft fortsetzen. Bis 2020 wird ein jährlicher Umsatz von 250 Milliarden US-Dollar für den mobilen Handel erwartet.
Mobile Commerce versus Desktop auf Shopify während der BFCM 2017
Jetzt ist es an der Zeit, sicherzustellen, dass Ihr Mobile-First-Trading-Asset auf dem Niveau oder sogar besser als Ihre Konkurrenten ist.
(A) Testen und optimieren Sie die Geschwindigkeit Ihrer mobilen E-Commerce-Website
PageSpeed Insights ist ein webbasiertes Tool, auf das über Google Labs zugegriffen werden kann. Es werden Elemente wie CSS und JavaScript angezeigt, die ein schnelles Rendern von Seiten auf Ihrer Website verhindern, sowie personalisierte Empfehlungen zur separaten Verbesserung der Leistung von E-Commerce-Websites auf Mobilgeräten und Desktops.
Sie können auch nach wettbewerbsfähigen Händlern suchen. Wenn Sie wissen, was mit der Leistung der Website nicht stimmt, können Sie vermeiden, dass Sie dieselben Fehler machen.
Merchant Spotlight: Merchologie
Merchology, der führende Anbieter von Markenkleidung und Accessoires für Unternehmen, stellte fest, dass die meisten Besucher mobiler Websites nach Durchsicht der Analysedaten keine Conversions durchführen. Es wurde schnell klar, dass das Unternehmen seine E-Commerce-Website neu gestalten muss, um ein Kundenerlebnis zu bieten, bei dem mobile Geräte Vorrang haben.
„Wäre es nicht großartig, wenn die Bestellung von einem mobilen Gerät so schnell und einfach wäre wie die Bestellung von einem Desktop oder Tablet?“ Er fragte den Vizepräsidenten für Marketing, Nolan Goodman.
Das Unternehmen hat viel Zeit damit verbracht, die Daten zu analysieren, bevor es über UX nachdachte. Das Merchology-Team untersuchte, wie Benutzer zwischen Mobile und Desktop wechseln, und verwendete Daten, um eine Story zur Unterstützung des Mobile-First-Site-Designs zu erstellen.
Zwei Monate nach dem Start der neu gestalteten mobilen Website im September 2016 feierte Merchology einige beeindruckende Ergebnisse:
Jährliche Umsatzsteigerung von 340% pro Mobilgerät
Steigerung der mobilen Conversion-Raten um 40%
„Einfachheit steigert den Umsatz unabhängig vom Gerät. Unabhängig davon, ob der Kunde einen Desktop-Computer, ein Tablet oder ein mobiles Gerät verwendet, haben wir die Bestellung und den Kauf vereinfacht.“
Nolan Goodman, Vizepräsident für Marketing Merchology
(B) Testen Sie dann die Geschwindigkeit der Desktopseite
PageSpeed Insights bietet Ihnen auch einen Desktop-Bericht mit ähnlichen Vorschlägen. Stellen Sie erneut sicher, dass Sie die Leistung Ihrer eigenen Website mit der Leistung Ihrer besten Konkurrenten vergleichen.
Denken Sie daran, der einzige Wettbewerbsvorteil beträgt 0,25 Sekunden.
(C) Machen Sie sich kumulative Notizen
GTMetrix kombiniert Yslow- und PageSpeed Insights-Daten, um Ihrer Website eine Geschwindigkeit von A bis F in Bezug auf die Geschwindigkeit zu verleihen. Es enthält auch einen Leistungsbericht, mit dem Sie wichtige Probleme analysieren können, die optimiert werden müssen.
(D) Bewerten Sie die Leistung Ihrer Site bei verbleibenden Optimierungen
Pingdom.com sollte Ihr letzter Test sein. Die Leistung Ihrer Website wird bewertet (zwischen 0% und 100%).
Es verfügt außerdem über eine nützliche Funktion zur „Wasserfallanalyse“, mit der Sie andere wichtige Problembereiche und deren Bedeutung für die Optimierung identifizieren können. Diese zeilenweise Bewertung ist unglaublich wertvoll, um sie zu testen, während Sie die verbleibenden Schritte in dieser Liste ausführen.
Jetzt, da Sie wissen, was schief gelaufen ist und was Sie beheben müssen, ist es Zeit, sich wiederholende Geschwindigkeitsverletzungen zu beseitigen. Schauen wir uns einige Optimierungen an, die für Shopify Plus spezifisch sind.
Verbesserung der Geschwindigkeit in Shopify Plus
Für den E-Commerce von Unternehmen ist es eine Herausforderung, ein umfassendes, individuelles und personalisiertes Einkaufserlebnis mit einer hervorragenden Website-Leistung zu kombinieren.
Die folgenden Tipps wurden speziell für Shopify Plus-Händler von Merchant Success Manager Jonathan Sinclair erstellt.
Tools von Drittanbietern wie GTMetrix und PageSpeed sind jeweils unterschiedlich konfiguriert. Tools, die das Timing für das Laden von Seiten bereitstellen, müssen in ihren Ergebnissen eine bestimmte Zeitmarke auswählen, z. B. „Zeit bis zum ersten Byte“ (TTFB).
Allerdings wählen nicht alle denselben Endpunkt. Während ein Tool 5,14 Sekunden anzeigen kann, kann das andere 11,80 Sekunden anzeigen. Daher ist es sehr wichtig, eine Vielzahl von Messungen durchzuführen.
Diese Tools sind auch nicht speziell für das Durchsuchen und Analysieren einer Shopify-Site konzipiert.
Schauen wir uns einige der häufigsten Probleme mit der Seitengeschwindigkeit in Shopify-Stores genauer an und diskutieren, wie sie behoben werden können:
5. Verwenden Sie Popup-Schnellansichtsfenster sparsam
Der springende Punkt bei der Verbesserung der Seitengeschwindigkeitsleistung besteht darin, zeitaufwändigen und ungeduldigen Kunden zu helfen, schnell das zu finden und zu kaufen, was sie benötigen.
Anstatt von den Besuchern Ihrer E-Commerce-Website zu verlangen, dass sie sich zu einer Produktdetailseite durchklicken, erscheint es möglicherweise vernünftig, ein Popup-Schnellansichtsfenster bereitzustellen, in dem ein bestimmtes Produkt direkt auf einer Produktlistenseite angezeigt wird.
Theoretisch sollte die Entscheidung, ob sie wirklich an einem bestimmten Produkt interessiert sind, Zeit sparen.
Die Herausforderung bei diesem Ansatz besteht darin, dass er das Kundenerlebnis auf Ihrer E-Commerce-Website erheblich beeinträchtigen kann:
Fügt der Reise des Kunden einen zusätzlichen Schritt hinzu
Versehentliches Klicken, was für den Benutzer frustrierend ist
Kann durch eine verwirrende Produktseite verwirrt werden
Noch wichtiger ist, dass dies die Ladezeit Ihrer Seite erheblich verlangsamen kann.
Popup-Apps für die Schnellansicht (entweder in das Thema integriert oder aus einer App) laden häufig alle Informationen auf der gesamten Produktseite vor, falls ein Besucher auf die Schaltfläche „Schnellansicht“ klickt.
Dies ist eine große Datenmenge, die geladen werden muss, insbesondere auf einer Sammlungsseite, auf der möglicherweise 20 oder 30 Produktminiaturen vorhanden sind.
Sie können testen, ob Ihre Kunden das Schnellansichtsfenster überhaupt verwenden, indem Sie auf die Zuordnung klicken. Einige Apps, die Ihnen dabei helfen können, sind:
Nachsicht
Sumo
Hotjar
Lucky Orange wird ebenfalls empfohlen. Beachten Sie jedoch, dass die Seitengeschwindigkeit bei Verwendung für diesen Zweck verlangsamt werden kann.
Wenn Sie feststellen, dass Kunden das Tool nicht häufig verwenden und es keinen anderen kritischen Grund für die Aktivierung der Schnellansicht gibt, empfehlen wir, es zu deinstallieren.
Identifizierung
Es sollte leicht zu erkennen sein, ob die Schaltfläche Schnellansicht auf den Miniaturansichten Ihres Präsentationsprodukts angezeigt wird. Überprüfen Sie daher zunächst Ihren Design-Customizer auf die Option zum Aktivieren / Deaktivieren dieser Funktionalität.
Wenn diese Option im Design-Customizer nicht angezeigt wird, überprüfen Sie, ob sie von einer App stammt. In diesem Fall sollte das Entfernen sehr intuitiv sein.
Wenn sich herausstellt, dass die ersten beiden Schritte leer sind, wird sie wahrscheinlich im Thema selbst gebacken, sodass ein Entwickler sie definieren und entfernen muss.
Lösung
Verwenden Sie AJAX, um Produktinformationen abzurufen, wenn der Besucher auf die Dropdown-Schaltfläche Schnellansicht klickt, oder
Speichern Sie einen begrenzten Satz Firmware als Datenattribute im Produkthandbuch, rendern Sie dann den HTML-Code und öffnen Sie ihn dynamisch mit JavaScript
Etwas weniger ideal als die Deinstallation von Quick View, da die Firmware für jedes Produkt noch installiert werden muss. Es ist jedoch besser, als alle Produktbilder und Links herunterzuladen.
6. Vorsicht vor übermäßigen Flüssigkeitskreisläufen
Liquid ist eine von Shopify geschützte Sprache, die sich als sehr leistungsfähig erwiesen hat. Es gibt jedoch einige Funktionen, bei denen Sie die Kompromisse sowie die zusätzlichen Vorteile berücksichtigen sollten.
Die Rekursion für den Zyklus ist ein Beispiel, das sich auf Shopify Plus-Verkäufer auswirken kann. Tritt auf, wenn das System alle Produkte in einer Sammlung für eine bestimmte Bedingung (Tag, Preis usw.) schleifen (oder scannen oder durchsuchen) muss.
Wenn Sie einen großen Produktkatalog wie viele Großverkäufer haben, wird dieser Zyklus lange dauern.
Dieses Problem tritt normalerweise in zwei Situationen auf:
Erweiterte Sammlungsfilter- und Mega-Navigationsanwendungen, da sie verschachtelte Schleifen verwenden, um alle Produkte zu durchsuchen und geeignete zu finden
Farbfelder für jedes Produkt auf der Sammlungsseite, da der Code alle Varianten und dann alle Bilder durchläuft und dann die spezifische Farbe trennen muss, der das Bild zugeordnet ist
Diese Funktionen können in bestimmten Situationen hilfreich sein, z. B. beim Ausdrucken von Bildern oder Sortimenten, und wenn Sie weniger Produkte auf einer Sammlungsseite haben.
Beachten Sie daher erneut, wie sie verwendet werden und wie sie sich auf die Ladezeiten auswirken.
Lösung
Der erste Schritt besteht darin, sicherzustellen, dass Ihr Code so effizient wie möglich ist. Beispielsweise können verschachtelte Schleifen Probleme verursachen und eine Optimierung erfordern.
Als Nächstes entdeckte der Shopify Plus-Technologiepartner Findify Möglichkeiten, eine erweiterte Rollup-Filterung anzubieten, ohne die Ladezeiten zu beeinträchtigen.
Das Unternehmen erzielte eine Conversion-Steigerung von 20% für Shopify Plus-Kunden, indem es die Ladezeit seiner 30.000 Produktkollektionen von 15 Sekunden auf 2,5 Sekunden reduzierte:
Entwickler berechnen alle Filter im Shopify-Backend vor
Wenn eine Sammlung geladen wird, wird zunächst nur eine Teilmenge der Produkte zurückgegeben
Die angezeigten Produkte werden personalisiert, wenn Kunden Filter durchsuchen oder verwenden
Alle Filter sind dynamisch, dh Sie erhalten nur Filteroptionen für die Produkte in dieser bestimmten Sammlung.
Das Ausdrucken von Farbfeldern kann problematisch sein. Es ist üblich, dieses Dokument beim Drucken von Farbmustern zu verwenden. Bitte beachten Sie, dass es derzeit aktualisiert wird.
Im obigen Screenshot passiert, dass das System alle Produktoptionen durchläuft und dann den Index für die Farboption (falls vorhanden) findet. Anschließend werden alle Varianten durchlaufen und die Farboption für diese Variante extrahiert, jedoch nur, wenn sie noch nicht ausgegeben wurde.
Das sind zu viele bewegliche Teile!
Eine bessere Lösung ist die Verwendung einer einfachen product.options_with_values-Schleife. Weitere Informationen zur Vorlagensprache von Shopify und zur Funktionsweise von Fluidschleifen finden Sie in diesem Beitrag oder beim Shopify Plus Merchant Success Team.
7. Reduzieren Sie die Miniaturbildgröße
Wenn Sie auf Ihrer Startseite eine Schleifenfunktion für „Bestseller-Produkte“ verwenden, werden Informationen von Ihren Produktseiten abgerufen und in Miniaturansicht angezeigt.
Das Problem tritt auf, wenn ein Produktbild in einer größeren Größe als erforderlich aufgenommen wird, wodurch der Browser des Benutzers es verkleinert.
Es ist, als würde man eine sehr große Jacke für sich kaufen und sie jedes Mal, wenn man sie trägt, zu einem Schneider bringen.
Lösung
Themen sollten die in Shopify integrierten Bildgrößenparameter nutzen, um das kleinstmögliche Bild herunterzuladen und gleichzeitig die Qualität zu erhalten. Es fragt Shopify nach der genauen anzuzeigenden Bildgröße, reduziert die vom CDN heruntergeladene Dateigröße und reduziert die erforderliche browserbasierte Skalierung.
Alle von Shopify erstellten Designs sind jetzt so eingestellt, dass sie je nach Geräteansicht die entsprechenden Bildgrößen bieten.
Erweiterte Optionen
Ihr Thema kann auch wie folgt eingestellt werden:
srcset zieht die entsprechende Bildgröße entsprechend der Bildschirmauflösung
Lazy Load, um zuerst Bilder mit niedriger Auflösung aufzunehmen und sie dann durch hochauflösende Versionen zu ersetzen, sobald der Seiteninhalt geladen ist
8. Machen Sie Home Hero Slides einfach
Betrachten Sie die Diashows mit mehreren Bildern sorgfältig, bevor Sie sie Ihrer Site hinzufügen. Die Größe und Qualität, die ein Master-Slider benötigt, um gut auszusehen, kann die Ladezeiten schnell verlängern, insbesondere wenn Sie vier bis fünf Slides haben:
Lösung
Der einfachste Weg, um dieses Problem zu beheben, besteht darin, die Anzahl der Homepage-Folien zu verringern oder sie ganz zu beseitigen. Das Bild eines einzelnen, hochqualitativen, gut durchdachten Helden mit einem klaren Aufruf zum Handeln erwies sich als sehr effektiv.
Kesinlikle bir kaydırıcı kullanmanız gerekiyorsa, bunlardan olabildiğince fazla fayda sağlamak için UX en iyi uygulamalarını takip ettiğinizden emin olun, bunu en fazla iki ila üç slayta kadar tutun ve tümünü yakalama olarak srcset veya Lazy Load kullanın.
9. Başka Bir Uygulama Yüklemenin Yararlarını Tartın
Shopify Plus Yöneticisi kullanılarak indirilen uygulamalar için komut dosyası / CSS dosyalarının çoğu,
content_for_header içindeki theme.liquid dosyanızın.
Sonuç olarak, uygulama içeriği sayfaya ilk yüklenecek içeriklerden bazıları olacaktır.
Sorun, bazen bir uygulamanın, sayfanın daha alt kısımlarından içerik yüklemeye devam etmeden önce (yani, resimler ve metin) sayfanın kodu (çoğunlukla JavaScript ve CSS) yüklemesini gerektirecek şekilde oluşturulmuş olmasıdır.
Bazen bir uygulamanın düzgün çalışması için aşağıdaki kod yüklenmeden önce oluşturulması gerekir.
Jason Bowman fotoğrafı
Shopify Plus’ta Çözüm Mühendisi ve APAC Ekip Lideri Jason Bowman, „Daha hızlı yükleme ile uygulamaların deneyimsel ve satış değeri arasındaki bu gerilimde gezinme“ diyor, „bu nedenle Script Tag API ile eklenen komut dosyalarını eşzamansız yükleyerek sayfa yüklemesi yok t durdu.
„Ancak,
Yüklediğiniz her uygulama söz konusu olduğunda kendinize sormanız gereken ana soru şudur: Bu uygulamanın katma değeri, yükleme hızının olası yavaşlamasından daha ağır basacak mı?
Çözüm
Mağazanızda 20’den fazla uygulamanız varsa, muhtemelen hepsini kullanmıyorsunuzdur. Belki onları bir deneme olarak yüklediniz, sonra kaldırmayı unuttunuz.
Bu arada, uygulama arka planda sessizce çalışıyor ve e-ticaret sitenizin performansına zarar veriyor.
Kullanmadığınız tüm uygulamaları gözden geçirin ve kaldırın. Ardından, GTmetrix veya PageSpeed Insights gibi araçları kullanarak sayfa hızı testleri veya hatta Chrome’un Geliştirici araçlarını kullanarak manuel bir test çalıştırın – „Ağ“ sekmesini tıklamanız ve sayfayı yeniden yüklemeniz yeterlidir.
Plus Merchant Success ekibi, hayati olmayan ve rahatsız edici uygulamayı bulup kaldırmak için bir geliştiriciden yardım almanızı şiddetle tavsiye eder.
10. Resimleri Sıkıştırın ve Küçültün
Görseller, web sayfalarınızın toplam ağırlığının% 50 ila% 75’ini oluşturur. Resimleriniz ne kadar yüksek kaliteli olursa ve her ürün sayfasında ne kadar çok barındırırsanız, sayı o kadar artar. Kayıpsız sıkıştırma, kaliteyi düşürmeden görüntü boyutunu en aza indirir:
Yeni görüntüler için …
Shopify geliştiricileri ayrıca bu görev için TinyJPG veya TinyPNG kullanmanızı önerir.
Fazla görüntü için …
Bir sayfada kullandığınız her görüntünün yeni bir HTTP isteği oluşturduğunu unutmayın. Sayfa hızını düzene koymanın yanı sıra, resim sayısını kırpmak, daha azıyla daha fazlasını yapmanıza ve daha fazlasını söylemenize yardımcı olur.
Ayrıca, kodunuzdaki boş görüntü kaynaklarına da dikkat edin. Bunlar, tarayıcının sunucularınıza başka bir istek daha göndermesi için aşırı bir yüke neden olur.
Kullanabileceğiniz basit bir çözüm, simgeler gibi birden çok görüntüyü tek bir görüntüde birleştiren, sunucunun tek tek görüntü isteklerini sınırlayan ve sayfa hızınızı artıran „hareketli görüntü“ olarak adlandırılır. Görsellerinizi SpritePad gibi ücretsiz bir araca yüklemek, hızlı bir şekilde hareketli resimler oluşturacak ve kodu sizin için işleyecektir.
11. Kodunuzu Küçültün
Web sayfanızdaki kötü kodlanmış HTML, CSS ve JavaScript, sitenizin performansını ciddi şekilde yavaşlatabilir.
Kolay bir düzeltme için, Google Developers „küçültme“ olarak bilinen bir süreç oluşturdu ve yardımcı olacak HTML, CSS ve JavaScript’e özgü kaynakların bir listesini sundu. GitHub’da kangax / HTML-minifier tarafından daha ayrıntılı rehberlik sağlanmaktadır:
Not: Shopify, SCSS.liquid küçültmeyi otomatik olarak işler. Tema geliştiricilerinin işlenmiş HTML’deki bazı şişkinlikleri kaldırmasına yardımcı olmak için boşluk kontrol etiketleri de sunuyoruz.
12. Yönlendirmeleri ve Bozuk Bağlantıları Azaltın
Ek performans sorunlarına çok fazla yeniden yönlendirme ve bozuk bağlantı neden olabilir. Bunları minimumda tutmak için arada sırada biraz ev temizliği yapın.
Yönlendirmeler için …
Yönlendirmeler, ziyaretçileri yeni URL’lere göndermeye yardımcı olsa da, tutumlu bir şekilde kullanılmalıdır. Bir sayfanın geçici olarak taşındığını belirten 302 yeniden yönlendirmesi, SEO’nuza zarar verebilir, ek HTTP isteklerini tetikleyebilir ve veri aktarımlarını geciktirebilir. Bunun yerine, Gezinme panelinde „önbelleğe alınabilir yönlendirme“ veya Shopify’ın yerleşik yeniden yönlendirmeler işlevini (varsayılan olarak 301’dir) kullanın.
Yakın zamanda URL’leri taşımış veya yeniden yapılandırmış büyük ve / veya daha eski bir siteniz varsa, URL’leri asla kendileri yeniden yönlendiren sayfalara yeniden yönlendirmeyin. Apaçık geliyor ama oluyor.
Kırık bağlantılar için …
Yine, kırık bağlantılar veya resimler, CSS ve JS dosyaları gibi sayfa öğeleri için yanlış bağlantılar HTTP isteklerini artırır ve sitenizin hızını artırır. Broken Link Checker gibi bir araç kullanırsanız, bunları kaldırmak kolay bir kazançtır.
Siteniz için yanlışlıkla yanlış bir URL giren ziyaretçilere yardımcı olmak için özel bir 404 hata sayfası oluşturmak da en iyi uygulamadır.
Bu optimizasyonların çoğunu kendiniz yapabileceksiniz.
Shopify web sitenizin işlevselliğini etkilemeyecektir. https://www.shopifywebexpert.com/shopify-page-speed-optimization.aspx
No Comments