Core Web Vitals: Die Millisekundenökonomie

Früher hat Google Websites anhand von Schlüsselwörtern und Backlinks bewertet. Im Jahr 2021 führten sie das Page Experience Update ein. Sie haben den Algorithmus geändert, um Websites herauszufiltern, die „nervig“ sind.

• Ärgerlich = Langsam (LCP).
• Ärgerlich = nervös (CLS).
• Ärgerlich = Keine Reaktion (INP).

Wenn Sie diese Core Web Vitals (CWV) nicht erfüllen, verärgern Sie nicht nur die Benutzer; Sie verlieren organischen Traffic. Bei Maison Code Paris betrachten wir Leistung als Merkmal. Eine langsame Luxusseite ist ein Widerspruch in sich.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

1. Größter Contentful Paint (LCP): Die 2,5-Sekunden-Frist

LCP misst die Ladeleistung. Es stoppt die Uhr, wenn das größte sichtbare Element (normalerweise das Heldenbild oder der H1-Blockierungstext) gerendert wird. Ziel: < 2,5 Sekunden.

Die Physik von LCP

LCP ist ein Wettlauf gegen vier Unterteile:

1. TTFB (Time to First Byte): Antwortzeit des Servers.
2. Ressourcenladeverzögerung: Zeit, bis der Browser die Bild-URL erkennt.
3. Ressourcenladezeit: Zeit zum Herunterladen des Bildes.
4. Element-Render-Verzögerung: Zeit zum Malen von Pixeln.

So beheben Sie das Problem (Next.js-Strategie)

1. Laden Sie den Helden nicht faul Entwickler lieben „loading=“lazy”`. Wenn Sie es jedoch auf dem Hero Image platzieren, wartet der Browser, bis er das „“-Tag analysiert, um mit dem Herunterladen zu beginnen. Sie müssen den LCP-Kandidaten Eager Load.

„tsx // Schlecht

// Gut (Next.js) „

2. Kritische Ressourcen vorab laden Teilen Sie dem Browser im „“ mit: „Sie benötigen diese Schriftart und dieses Bild sofort.“

<link rel="preload" href="/hero.webp" as="image" />
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />
„

**3. Verwenden Sie das AVIF-Format**
WebP ist gut. AVIF ist besser (20 % kleiner).
Stellen Sie sicher, dass Ihr CDN die Inhaltsaushandlung unterstützt.

## 2. Cumulative Layout Shift (CLS): Der Stabilitätsindex

CLS misst **Sehstabilität**.
Es berechnet, wie viele Inhalte sich unerwartet verschieben.
**Ziel**: < 0,1.

**Szenario**: Der Benutzer versucht, auf „Zur Kasse gehen“ zu klicken. Über der Schaltfläche wird eine Anzeige geladen. Der Inhalt drängt nach unten. Der Benutzer klickt stattdessen auf „Abbrechen“.
Dies ist ein dunkles Muster, auch wenn es zufällig ist.

### Das Problem: Seitenverhältnisse
Wenn Sie ein Bild ohne Abmessungen einfügen:
`<img src="photo.jpg" />`
Der Browser kennt die Höhe erst, wenn das Bild heruntergeladen wird. Es rendert eine Höhe von 0 Pixel und springt dann auf 500 Pixel.

**Fix**: Immer Platz reservieren.
CSS „aspect-ratio“ ist dein Freund.
„css
.hero-wrapper {
  Seitenverhältnis: 16 / 9;
  Hintergrund: #f0f0f0; /* Platzhalterfarbe */
}
„

### Die Schriftartverschiebung (FOIT/FOUT)
Das Laden benutzerdefinierter Schriftarten dauert einige Zeit.
Wenn der Browser den Text verbirgt, bis die Schriftart geladen wird (FOIT), wird ein Flash angezeigt.
Wenn der Browser die Ersatzschrift (Arial) und dann die Schriftart (Inter) anzeigt, ändert sich die Breite. Zeilenumbrüche ändern sich. Layoutverschiebungen.

**Fix**: Verwenden Sie „font-display: optional“ oder passen Sie Metriken an.
Wir verwenden „@next/font“, das Fallback-Schriftartenmetriken automatisch anpasst, um Layoutverschiebungen zu verhindern.

## 3. Die Kosten schwerer Schriftarten

Designer lieben Schriftarten. Ingenieure haben Angst vor ihnen.
Eine einzelne Gewichtung von *Circular Std* beträgt 30 KB (WOFF2).
Wenn Sie Normal, Fett, Kursiv, Schwarz -> 120 KB laden.
Dadurch wird die Textwiedergabe (FOIT) blockiert.
**Strategie**:
1. **Teilmenge**: Sie benötigen keine griechischen/kyrillischen Zeichen. Teilmenge zu Latin-1. (Spart 50 %).
2. **Variable Schriftarten**: Verwenden Sie eine Datei („Inter-Variable.woff2“), die alle Gewichte enthält. Es verarbeitet Animationen besser.
3. **Selbsthosting**: Beseitigen Sie den TLS-Handshake zu „fonts.googleapis.com“.

## 4. Nicht kritisches CSS zurückstellen

Tailwind ist großartig, weil es klein ist (10 KB).
Aber alte Sass-Projekte haben oft „main.css“ (500 KB).
Der Browser hält das Rendern an, bis „main.css“ heruntergeladen wurde.
**Fix**: Extrahieren Sie „Critical CSS“ (Stile für den Header/Hero) und integrieren Sie es in „<head>“.
Den Rest asynchron laden:
`<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">`
Dieser Trick erhöht den LCP in 3G-Netzwerken um ca. 1 Sekunde.

## 5. Interaktion mit Next Paint (INP): Die Reaktionsfähigkeit

*Hinweis: INP ersetzte FID (First Input Delay) im März 2024.*

INP misst die **Ereignislatenz**.
„Wie viele Millisekunden dauert es, bis das Menü tatsächlich geöffnet wird, wenn ich auf die Schaltfläche „Menü“ klicke?
**Ziel**: < 200 Millisekunden.

Der Schuldige ist fast immer **Der Hauptthread**.
JavaScript ist Single-Threaded.
Wenn der Browser damit beschäftigt ist, ein riesiges 5-MB-Trinkpaket zu analysieren, und Sie auf „Menü“ klicken, sagt der Browser: „Warten Sie, ich bin beschäftigt.“
Die Benutzeroberfläche friert ein.

### Strategien zur Behebung von INP

**1. Nachgeben zum Hauptthread**
Teilen Sie lange Aufgaben auf.
Wenn Sie mehr als 10.000 Elemente iterieren, tun Sie dies in Blöcken.

„Javascript
// Blockieren
items.forEach(process);

// Nicht blockierend (nachgebend)
asynchrone Funktion ProcessAsync() {
  for (const item of items) {
    Warten Sie auf Scheduler.postTask(() => Process(item));
  }
}
„

**2. Reagieren Sie auf useTransition**
Verwenden Sie in React 18 „useTransition“, um Updates als nicht dringend zu markieren.
Dadurch wird React mitgeteilt: „Wenn der Benutzer klickt, unterbrechen Sie diese Renderarbeit, um den Klick zu verarbeiten.“

„tsx
const [isPending, startTransition] = useTransition();

Funktion selectTab(nextTab) {
  startTransition(() => {
    setTab(nextTab);
  });
}
„

## 4. Messung: Felddaten vs. Labordaten

Entwickler leben in **Lab Data** (Leuchtturm auf einem schnellen MacBook).
Google lebt in **Felddaten** (CrUX – Chrome User Experience Report).
CrUX sammelt echte Daten von echten Benutzern (häufig auf langsamen Android-Telefonen).

Ihr Lighthouse-Score könnte 100 sein.
Wenn Ihr P75-Benutzer (75. Perzentil) jedoch eine langsame Verbindung hat, ist Ihr CrUX-Score möglicherweise „Schlecht“.
**Immer für den P75-Benutzer auf 4G optimieren.**

## 5. Auswirkungen Dritter

Wer tötet Ihre Web Vitals?
Normalerweise:
1. **Chat-Widgets** (Intercom/Drift): Riesige Pakete.
2. **Tracking-Pixel**: Blockieren des Hauptthreads.
3. **A/B-Testtools** (Optimizely): Ausblenden von Textinhalten für ein „flimmerfreies“ Erlebnis (vernichtet LCP).

**Lösung**: Verschieben Sie sie mit **Partytown** zu Web Workers. (Siehe [Bundle-Größe](/de/blog/tech-bundle-size-de)).

## 6. Die Speculation Rules API (Prerendering)

Dies ist die nukleare Option für Geschwindigkeit.
Sie können Chrome anweisen, **die nächste Seite im Hintergrund zu rendern**, bevor der Benutzer darauf klickt.
Laden Sie nicht nur den HTML-Code herunter. *Führen Sie JS aus und malen Sie die Pixel*.
Wenn sie klicken, beträgt der Übergang **0 ms**. Sofort.

„json
{
  „prerender“: [
    {
      „Quelle“: „Liste“,
      "urls": ["/next-page", "/cart"]
    }
  ]
}
„
Wir verwenden dies für den Ablauf „In den Warenkorb“ -> „Zur Kasse“. Es fühlt sich an wie eine native App.

## 7. Weiche Navigationen und CWV

In einer Single-Page-App (Next.js) ist die Navigation von der Startseite zur Produktseite eine **Soft Navigation**.
Bisher wurden diese von Core Web Vitals weitgehend ignoriert.
Im Jahr 2024 aktualisierte Google die Metriken, um „INP on Soft Navigations“ zu verfolgen.
Wenn Ihr JS-Übergang 500 ms benötigt, um JSON abzurufen und die neue Seite zu rendern, versagen Sie bei LCP/INP.
**Fix**: Optimistische Benutzeroberfläche verwenden.
Zeigen Sie sofort ein Skelett. Warten Sie nicht, bis „await fetch()“ abgeschlossen ist, bevor Sie die URL ändern.

## 9. Real User Monitoring (RUM)

Lighthouse ist ein „Labortest“. Es läuft in einer sauberen Umgebung.
Bei echten Nutzern läuft Spotify im Hintergrund und es sind 50 Tabs geöffnet.
Du brauchst **RUM**.
Wir verwenden Vercel Analytics (oder SpeedCurve).
Es verfolgt die Vitalwerte für *tatsächliche* Besucher.
Wenn Ihr LCP auf dem iPhone 15 1,2 Sekunden, auf dem iPhone 11 jedoch 4,5 Sekunden beträgt, teilt Ihnen RUM mit.
Labordaten lügen. Felddaten erkennen Einnahmeverluste.

## 10. Warum Maison Code?

Bei **Maison Code** sind wir Performance-Extremisten.
Wir „minimieren CSS“ nicht nur.
Wir entwerfen für **Zero-Layout-Shift** und **Instant-Interaction**.
Wir wissen, dass für Luxusmarken „langsam“ = „billig“ ist.
Wir prüfen Ihren gesamten Stack, vom Edge CDN bis zur React Hydration.
Wir liefern Websites, die sich heimisch anfühlen, selbst in 4G-Netzwerken der Dritten Welt.
Denn 100 ms Latenz = 1 % Umsatzrückgang (Amazon-Studie).

## 12. Der Unterschied zwischen TBT und INP

Die Gesamtblockierungszeit (TBT) ist eine Labormetrik.
Die Interaktion mit Next Paint (INP) ist eine Feldmetrik.
TBT sagt INP voraus.
Wenn Ihr TBT hoch ist (>200 ms), ist Ihr INP wahrscheinlich schlecht.
**Optimierungsschleife**:
1. Führen Sie Lighthouse aus (TBT messen).
2. Optimieren Sie die Flüssigkeitszufuhr.
3. Bereitstellen.
4. Warten Sie 28 Tage auf CrUX-Daten (INP messen).
5. Wiederholen.
Warten Sie nicht 28 Tage, um zu erfahren, ob Sie das Problem behoben haben. Verwenden Sie TBT als Ihren Proxy.

## 13. Fazit

Core Web Vitals sind nicht nur Metriken. Sie sind Stellvertreter des Respekts.
Respektieren Sie die Zeit Ihres Benutzers. Respektieren Sie den Akku Ihres Geräts.
Google erzwingt lediglich gute Manieren.
Wenn Sie den Nutzer gut behandeln, behandelt Google Sie gut.


<hr style="margin: 1rem 0" />

### Ist Ihre Website langsam?
Zeigt Ihre Search Console „Schlechte URLs“ an?
Wir führen Deep-Dive-Leistungsaudits durch, um das Problem mit der Flüssigkeitszufuhr zu lösen.
**[Beauftragen Sie unsere Architekten](/contact)**.