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.
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.
| Metrisch | Name | Gutes Ziel | Was es misst |
|---|---|---|---|
| LCP | Größte Contentful Paint | < 2,5s | Ladegeschwindigkeit |
| INP | Interaktion mit Next Paint | < 200ms | Reaktionsfähigkeit |
| CLS | Kumulative Layoutverschiebung | < 0,1 | Visuelle 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.