MAISON CODE .
/ Performance · Edge · CWV · Latency

Die Millisekundenökonomie: Engineering Web Performance

Core Web Vitals sind Finanzkennzahlen. Wie wir Time to First Byte (TTFB) und Interaction to Next Paint (INP) mithilfe von Edge Caching optimieren.

AB
Alex B.
Die Millisekundenökonomie: Engineering Web Performance

Amazon hat herausgefunden, dass jede 100 ms Latenz sie 1 % Umsatz kostet. Walmart hat herausgefunden, dass die Konvertierung eines Besuchers 2 Sekunden weniger Ladezeit dauerte als die eines Nichtkäufers. Leistung ist kein „nice to have“. Es ist die Grundlage des Umsatzes.

Die wichtigen Kennzahlen (Core Web Vitals)

Google misst Ihre Website anhand von drei Schlüsselkennzahlen. Wenn Sie diese nicht erfüllen, verlieren Sie den SEO-Rang.

MetrischNameGutes ZielWas es misst
LCPGrößte Contentful Paint< 2,5sLadegeschwindigkeit
INPInteraktion mit Next Paint< 200msReaktionsfähigkeit
CLSKumulative Layoutverschiebung< 0,1Visuelle Stabilität

Die Lösung: Edge Computing

Die Lichtgeschwindigkeit ist eine harte Einschränkung. Wenn sich Ihr Server in Virginia (Shopify US) und Ihr Kunde in Paris befindet, muss das Signal den Atlantik überqueren. Das braucht Zeit. Wir verlagern die Rechenleistung zum Benutzer.

Sauerstoff und Wolkenflare

Shopify Oxygen läuft im Netzwerk von Cloudflare. Wenn ein Benutzer eine Seite anfordert, bearbeitet der ihm am nächsten gelegene „Server“ (z. B. der CDG-Airport-Knoten) die Anfrage.

„Meerjungfrau Diagramm TD Benutzer[Benutzer in Paris] ->|5ms| Kante[Edge-Knoten (CDG)]

Unterabschnitt „Die Magie“
Edge -->|Wird HTML zwischengespeichert?| Cache{Stale-While-Revalidate}
Cache -->|Ja| Kante
Cache -->|Nein| Herkunft[Shopify Virginia]
Ende

Ursprung ->|300ms| Kante
Kante ->|Stream| Benutzer

Optimierungs-Checkliste

1. Bildoptimierung (AVIF)

Hören Sie auf, PNGs zu verwenden. Wir implementieren eine automatische Bildpipeline, die alles in AVIF (50 % kleiner als JPEG) konvertiert. „tsx <Bild data={product.image} Breiten={[300, 600, 900]} formats={[‘avif’, ‘webp’]} /> „


2. Skripte von Drittanbietern zurückstellen

Klaviyo, Gorgias und Meta Pixel zerstören die Main-Thread-Leistung (INP). Wir verschieben sie nach Partytown (Laufen auf einem Web Worker) oder verschieben sie einfach bis nach der Interaktion. Benutzer können nicht kaufen, wenn der Hauptthread durch das Laden eines Chat-Widgets blockiert wird.

3. Vorausschauendes Prefetching

Wenn ein Benutzer mit der Maus über eine Produktkarte fährt, vermuten wir, dass er darauf klickt. Wir beginnen mit dem Abrufen der Produktdaten im JSON-Format, bevor sie darauf klicken. Wenn sich der Finger von der Maus löst, sind die Daten bereits vorhanden. Sofortige Navigation.

Fallstudie: Geschwindigkeit vs. Umsatz

Wir haben eine Client-Site optimiert und den LCP von 4,2 Sekunden auf 1,8 Sekunden reduziert.

  • Absprungrate: Um 15 % gesunken.
  • Conversion-Rate: Um 8 % erhöht.
  • Umsatz: +40.000 $/Monat.

Ist Ihre Website langsam?

Führen Sie eine Leuchtturmprüfung durch. Wenn Sie Rot sehen, verbrennen Sie Geld. Beauftragen Sie unsere Architekten.