Es ist harte Arbeit, die Ladezeiten Ihrer E-Commerce-Website innerhalb von weniger als einer Sekunde zu gewährleisten. Bei Layer0 haben wir versucht, diesen Prozess zu vereinfachen, und Layer0 hilft Ihnen dabei, diesen Meilenstein zu erreichen. Wir haben hier eine Checkliste erstellt, die Sie befolgen können, um sicherzustellen, dass Ihr Produktionsstandort blitzschnell ist und Sie so wenig Zeit damit verbringen.
Lassen Sie uns zunächst darüber sprechen, wie wir die Geschwindigkeit messen:
Leistungsmessung
** In diesem Fall haben wir SpeedCurve (SC) verwendet, aber Sie können WebPageTest oder jedes andere Produkt verwenden
Wir konzentrieren uns auf LCP-Metriken für unsere Messungen. Unsere Ziele sind:
- Homepage <1,5 s
- PLP-zu-PDP-Navigation: 0,5 s
Es ist auch wichtig, die folgenden 3 Fälle zu berücksichtigen, da sie die Verbrauchererfahrung beeinflussen, wenn A) durch den organischen Suchverkehr direkt an PLPs/PDPs gehen und (b) bei der Navigation zu Warenkorb-/Bestellseiten – für unsere Kunden aus geschäftlicher Sicht von entscheidender Bedeutung:
- PLP als Landing-Page
- PDP als Landing-Page
- PWA -> Herkunft/Legacy (z. B. zum Warenkorb/zur Kasse)
Beginnen wir mit einigen grundlegenden Überprüfungen, die uns helfen könnten, größere Geschwindigkeitssteigerungen zu erzielen
- Stellen Sie sicher, dass Skelette verwendet werden und das Layout stabil ist.
- Meldung „Warten auf…“ (oder ähnliche) im Browserfenster (ein bekanntes Problem in WebPageTest, das SC verwendet): Überprüfen Sie die Wasserfallbilder, um festzustellen, ob dies die einzige Ursache für die Verschlechterung der Metriken ist.
- Der Wechsel zwischen niedrig auflösenden Bildern und hochauflösenden Bildern kann auch zu einer Verschlechterung der Messwerte in SC führen. Überprüfen Sie die Wasserfallbilder, um festzustellen, ob dies die einzige Ursache ist.
- Artefakte aus benutzerdefinierten Komponenten (im Vergleich zu nativen RSF-Komponenten, die unter Berücksichtigung der Best Practices erstellt wurden) – Styling/Elemente, die dazu führen, dass die Komponenten übermäßig neu gerendert werden. Überprüfen Sie erneut die Wasserfallbilder, um zu sehen, ob Artefakte sichtbar sind (z. B. Bild mit niedriger Auflösung –> Bildkarussell auf PLP->PDP-Übergang).
PLP-zu-PDP-Navigation
Die Navigation von den PLP-Seiten (Suchergebnisse oder Kategorie-/Markenseiten) zu den PDP-Seiten ist das wichtigste Navigationselement der gesamten Customer Journey. Für jeden getätigten Kauf navigiert ein durchschnittlicher Benutzer zu 8,8 PDP-Seiten. Selbst eine geringfügige Verlangsamung der Seiten bei solch hoher Frequenz kann sich stark nachteilig auf die Benutzererfahrung auswirken. Hier sind einige Dinge, die Sie befolgen können, um eine perfekte Benutzererfahrung von PLP zu PDP zu gewährleisten:
- Verwenden Sie ein Skelett für die über dem Falz liegende Seite, und stellen Sie sicher, dass das Layout stabil ist
- Stellen Sie sicher, dass der Inhalt über dem Falz mit der Höhe des Bildschirms des Geräts des Benutzers übereinstimmt.
- Stellen Sie sicher, dass das Caching ordnungsgemäß konfiguriert ist. Dies bedeutet, dass generische Seitendaten gecacht werden und keine benutzerspezifischen Datenpunkte gecacht werden. (Weitere Informationen finden Sie in unserem Leitfaden zum Caching.)
- Verwenden Sie Prefetching (weitere Informationen finden Sie in unserem Leitfaden zum Prefetching)
- Verwenden Sie überall dieselbe Instanz von Miniaturbildern, um ein Flimmern mit der Komponente ForwardThumbnail zu vermeiden
- Übergeben Sie so viele Informationen von PLP an PDP in den Seitenprops, um diese Informationen auf PDP anzuzeigen
Laden Der Homepage
Homepage ist in der Regel die erste Interaktion eines Benutzers mit der Website. Ein guter Start in die Reise ist entscheidend, um einen zufriedenen Nutzerablauf bis zur Kasse und Bestellung zu gewährleisten. Im Folgenden finden Sie einige der Dinge, die Sie befolgen können, um ein großartiges Erlebnis auf der Homepage zu gewährleisten:
- Stellen Sie sicher, dass das Caching ordnungsgemäß konfiguriert ist. Dies bedeutet, dass generische Seitendaten zwischengespeichert werden und keine benutzerspezifischen Datenpunkte zwischengespeichert werden.
- Lazy Load unterhalb des Falzinhalts
- Verwenden Sie das Pre-Connect-Tag
- Optimieren Sie Bilder
- Verzögern Sie die Hydration, bis die Seite vollständig geladen ist
- Weitere Verbesserungen
PDP-Seitenladen
Die Optimierung der Homepage und der PLP-zu-PDP-Navigation wäre wertlos, wenn der Benutzer keine gute Erfahrung auf der PDP-Seite selbst hat. Um das Laden von PDP-Seiten zu optimieren, müssen Sie sicherstellen, dass dem Benutzer die wichtigsten Informationen so schnell wie möglich zur Verfügung stehen und Objekte, die nicht sofort sichtbar oder umsetzbar sind, verzögern. Im Folgenden sind einige der Punkte aufgeführt, die Sie bei der Optimierung von PDP-Seiten beachten sollten:
- Cache generischer Assets und Daten, einschließlich API-Antworten, um einen sofortigen Datenabruf zu gewährleisten und Engpässe auf Back-End-Systemen zu reduzieren.
- Lazy Load Content unterhalb der Falz
- Verwenden Sie ein optimiertes erstes Bild, um die Ladezeiten zu verkürzen.
- Verwenden Sie separate Miniaturansichten sowie Bilder mit dem Zoomen und Ziehen und Ziehen, und laden Sie Bilder nur auf Anfrage.
PLP-Seitenladen
- Laden Sie PDP-Bilder vorab, um Ergebnisse über dem Falz zu erhalten.
- Lazy Load Content unterhalb der Falz
- Reduzieren oder vermeiden Sie Anforderungen zur Bestimmung von PLP-Seitenänderungen, z. B. für Änderungen der Hintergrundfarbe oder andere visuelle Elemente.
Einige weitere Hinweise
Die oben genannten Methoden decken die meisten Dinge ab, mit denen ein Benutzer während der Reise interagiert. Aber es gibt mehr an einer Plattform als das sichtbare. Der nächste Schritt, den wir machen müssen, ist, dass die internen Funktionen der Plattform optimiert werden. Im Folgenden sind einige Punkte aufgeführt, die überprüft werden müssen, um zusätzliche Leistungssteigerungen abzurufen:
- TTL: Prüfen Sie die Paketgröße mit Analyze=true npm Run Build
- FCP: Wenn ein Kunde sich für die Verwendung einer WebFont entscheidet, kann es zu einem Rückgang der LH-Punktzahl kommen.
- Geschwindigkeitsindex: wenn Popups auf dem Bildschirm angezeigt werden, wird der Geschwindigkeitsindex der Seite reduziert
- Vermeiden Sie lange Ausführungsaufgaben im Modulbereich, d. h. clientseitig.
- React Haken neigen zu unnötigem Rendering. Obwohl es unwahrscheinlich ist, die Kennzahlen zu beeinflussen, sorgen sie für eine träge Website.
- Verwenden Sie PSI-Scores, um die Auswirkungen von Codeänderungen zu verstehen, anstatt lokale LH-Scores und/oder SpeedCurve-Ergebnisse der Maschine. Verwenden Sie den 4G-Modus bei der Produktion, um realistische LH-Werte zu erhalten.
