MAISON CODE .
/ Performance · Core Web Vitals · INP · React

Webleistung: Die 100-ms-Regel und die neue INP-Metrik

Google hat die Regeln mit INP (Interaction to Next Paint) geändert. Optimierung für React Hydration und Edge Caching.

AB
Alex B.
Webleistung: Die 100-ms-Regel und die neue INP-Metrik

Geschwindigkeit ist kein „nice to have“. Geschwindigkeit ist das einzige Merkmal, das jeder Benutzer erlebt. Amazon hat herausgefunden, dass jede 100 ms Latenz 1 % Umsatz kostet. Walmart hat herausgefunden, dass eine Verbesserung der Ladezeit um 1 Sekunde die Conversions um 2 % steigerte. Im Jahr 2025 liegt die Messlatte höher. Die Core Web Vitals von Google haben den Fokus von LCP (Laden) auf INP (Interaktion mit nächster Farbe) verlagert. Es reicht nicht mehr aus, schnell zu laden. Sie müssen schnell reagieren.

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.

Warum Maison Code über 100 ms besessen ist

Geschwindigkeit ist unsere Marke. Wir optimieren nicht nur Bilder. Wir gestalten die gesamte Lieferpipeline neu.

  • Infrastruktur: Wir stellen es am Edge (Vercel/Cloudflare) bereit, um innerhalb von 50 ms vom Benutzer entfernt zu sein.
  • Hydratation: Wir verwenden selektive Hydration, um den „Kaufen-Button“ interaktiv zu machen, bevor die Fußzeile überhaupt geladen wird.
  • Ergebnis: Unsere Kunden bestehen durchweg die Core Web Vitals, was zu einem gemessenen SEO-Uplift von 15–20 % führt. Wir behandeln Leistungsbudgets wie Finanzbudgets. Zu viel Geld auszugeben ist keine Option.

Die Spekulationsregel-API

Die schnellste Netzwerkanfrage ist die, die Sie nicht stellen. Im Jahr 2025 verwenden wir die Spekulationsregeln-API, um Seiten vorab zu rendern, bevor der Benutzer darauf klickt. Dies ist kein standardmäßiger „Prefetch“. Chrome erstellt das DOM buchstäblich in einer Hintergrundregisterkarte. Wenn der Benutzer klickt, beträgt der Übergang 0 ms. Sofort.

<!-- Spekulationsregeln einführen -->
<script type="spekulationsregeln">
{
  „prerender“: [
    {
      „Quelle“: „Dokument“,
      „wo“: {
        „und“: [
          { "href_matches": "/products/*" },
          { "selector_matches": "a:hover" }
        ]
      }
    }
  ]
}
</script>
„

### Sicherheit und Datennutzung
Ein Problem bei Spekulationen ist die Datennutzung. Wenn wir 10 Seiten vorab rendern und der Benutzer 0 besucht, verschwenden wir Bandbreite.
Der Browser ist intelligent. Es wird nur spekuliert, ob:
1. Der Benutzer ist im WLAN (nicht im Datensparmodus).
2. Das Gerät verfügt über ausreichend Speicher.
Für eine E-Commerce-Website ist die „nächste Aktion“ jedoch äußerst vorhersehbar. Auf einer PDP (Produktdetailseite) ist die nächste Aktion entweder „In den Warenkorb“ oder „Zurück zur Sammlung“. Die Spekulation dieser beiden Routen ergibt eine Trefferquote von 90 %.

## INP: Der Reaktionskiller?
INP misst die Zeit vom „Klick“ bis zum „Malen“.
Reacts Hydration ist der Feind von INP.
Wenn ein Benutzer auf „In den Warenkorb hinzufügen“ klickt, während React die Fußzeile hydriert, wird der Hauptthread blockiert. Die Schaltfläche ignoriert den Klick.
Der INP-Wert beträgt 400 ms (schlecht). Google bestraft Ihre SEO.

### INP in Headless optimieren
1. **Selektive Flüssigkeitszufuhr**: Befeuchten Sie nur die sichtbaren Bestandteile. (Informationen zur Komponentenisolierung finden Sie unter [Atomic Design](/de/blog/tech-atomic-design-de).
2. **Web Worker**: Verschieben Sie umfangreiche Logik (Analytics, GTM) über Partytown zu einem Web Worker.
3. **Übergangs-API**: Verwenden Sie „useTransition“, um nicht dringende Updates zu markieren.

„tsx
// React 19 useTransition-Implementierung
import { useTransition } from 'react';

Funktion AddToCart({ id }) {
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    // Dringend: UI sofort aktualisieren
    setOptimisticCartCount(c => c + 1);
    
    // Nicht dringend: Netzwerkanforderung/Statusaktualisierung
    startTransition(() => {
      addToCart(id);
    });
  };

  zurück (
    <button onClick={handleClick} deaktiviert={isPending}>
      {isPending ? 'Hinzufügen...': 'Zur Tasche hinzufügen'}
    </button>
  );
}
„

## The Edge: Geographie ist wichtig
Wenn sich Ihr Server in Virginia (us-east-1) und Ihr Kunde in Paris befindet, erfordert die Lichtgeschwindigkeit eine Strafe von 100 ms.
Sie können die Physik nicht schlagen.
Sie müssen die Berechnung verschieben.
**Edge Rendering** (Oxygen/Vercel) führt die SSR-Logik in einem Rechenzentrum aus, das dem Benutzer am nächsten liegt.

### Stale-While-Revalidate (SWR)
Wir möchten nicht bei jeder Anfrage den Ursprung erreichen.
Wir verwenden die SWR-Cache-Strategie, einen Kernvorteil der [Headless Architecture](/de/blog/tech-hydrogen-vs-liquid-de).
1. Benutzer A besucht „/products/shoe“.
2. Edge stellt die veraltete Version (Instant) bereit.
3. Edge ruft die neue Version im Hintergrund ab.
4. Benutzer B erhält die Fresh-Version.

In Remix/Hydrogen-Headern:
„Typoskript
Funktionsheader exportieren() {
  zurück {
    'Cache-Control': 'public, max-age=60, s-maxage=3600, stale-while-revalidate=86400',
  };
}
„

## Bildoptimierung: AVIF ist König
Vergessen Sie WebP. **AVIF** ist der Standard.
Es ist 30 % kleiner als WebP und unterstützt HDR-Farbskalen (wichtig für Mode).
Das CDN von Shopify unterstützt die automatische AVIF-Formatierung.
Erzwingen Sie immer „format=auto“ in Ihrem Bild-Loader.

### Die „LQIP“-Strategie
Platzhalter für Bilder von geringer Qualität.
Während das hochauflösende Bild geladen wird, zeigen Sie eine unscharfe 10-Pixel-Version an.
Dies verhindert „Layout Shift“ (CLS) und vermittelt den Eindruck von Geschwindigkeit.
Wir generieren LQIPs zur Build-Zeit oder über eine serverlose Funktion.

## Skripte von Drittanbietern: The Silent Killer
Agenturen lieben es, Skripte zu installieren.
Hotjar, Klaviyo, Yotpo, Facebook Pixel, TikTok Pixel, Snap Pixel.
Jeder verbraucht 50 ms Haupt-Thread-Zeit.
Gesamt = 300 ms Blockade.

### Das Problem mit „Async“
Entwickler glauben, dass „Async“ „Nicht blockierend“ bedeutet.
Es bedeutet „Nicht blockierender Abruf“.
Aber die **Ausführung** blockiert.
Wenn das Facebook-Pixel ausgeführt wird, friert es den Hauptthread ein, um das DOM zu durchsuchen.

### Lösung: Serverseitiges GTM
Verschieben Sie die Pixel auf den Server.
1. Der Browser sendet EIN Ereignis an Ihren Server (z. B. „POST /api/events“).
2. Ihr Server (GTM Server Container) empfängt es.
3. Ihr Server verteilt es an Facebook, TikTok und Google Ads.
Keine Auswirkungen auf den Kunden.
Bonus: Es umgeht AdBlocker, da die Anfrage an Ihre eigene Domain geht.

### Lösung: Partytown
Wenn Sie clientseitige Skripte ausführen MÜSSEN (wie Hotjar, das das DOM benötigt), führen Sie sie in einem **Web Worker** aus.
**Partytown** ist eine Bibliothek, die DOM-Mutationen von einem Worker an den Haupt-Thread weiterleitet.
Es erstellt eine Sandbox, in der umfangreiche Skripts von Drittanbietern ausgeführt werden können, ohne dass die Benutzeroberfläche einfriert.

```html
<script type="text/partytown" src="https://connect.facebook.net/en_US/fbevents.js"></script>
„

## Strategien zum Laden von Schriftarten
Die Typografie ist überraschend schwer.
Eine benutzerdefinierte Schriftartdatei (WOFF2) ist ca. 50 KB groß.
Wenn Sie das Rendern blockieren, bis die Schriftart geladen ist (FOIT – Flash of Invisible Text), starrt der Benutzer auf einen leeren Bildschirm.
Wenn Sie eine Ersatzschriftart (FOUT – Flash of Unstyled Text) anzeigen, verschiebt sich das Layout.

### Der perfekte Stapel zum Laden von Schriftarten
1. **Teilmenge**: Fügen Sie nur die Zeichen ein, die Sie benötigen (Latin-1).
2. **Vorladen**: Verwenden Sie „<link rel="preload">` für die kritische Schriftart (Überschrift).
3. **Swap**: Verwenden Sie „font-display: swap“. Zeigen Sie den Text sofort in Helvetica an und wechseln Sie dann zu Ihrer Schriftart.
4. **Größenanpassung**: Verwenden Sie CSS „Größenanpassung“, damit die Ersatzschriftart genau denselben Platz einnimmt wie die benutzerdefinierte Schriftart. Dadurch wird eine Layoutverschiebung vermieden.

„css
@font-face {
  Schriftfamilie: „Bodoni Fallback“;
  src: local('Times New Roman');
  Aufstiegs-Override: 90 %;
  Abstiegsüberschreibung: 20 %;
  Größenanpassung: 140 %;
}
„

## RUM vs. Labordaten
Lighthouse (Lab Data) ist eine Simulation.
Es wird ein Motorola G4 im 3G-Netzwerk vorausgesetzt.
**RUM (Real User Monitoring)** ist Realität.
Es misst, was tatsächliche Benutzer erleben.
Sie haben vielleicht einen Lighthouse-Score von 100, aber wenn Ihre echten Benutzer mit alten iPhones in einer U-Bahn unterwegs sind, zeigen Ihre RUM-Daten 3s LCP an.
Wir integrieren **Vercel Analytics** oder **Datadog RUM**, um den p75 (75. Perzentil) realer Erlebnisse zu verfolgen.
Wenn Ihr p75 grün ist, sind Sie gut. Wenn Ihr Leuchtturm 100 ist, aber P75 rot ist, haben Sie versagt.

## Fazit
Leistung ist eine Ingenieurskultur.
Sie müssen über ein **Leistungsbudget** verfügen.
„Wenn diese PR das Paket um 10 KB erweitert, muss etwas anderes gehen.“
Halten Sie sich an die 100-ms-Regel. Wenn es länger als 100 ms dauert, fühlt es sich kaputt an.
Die schnellsten E-Commerce-Websites fühlen sich nicht nur schnell an. Sie fühlen sich unsichtbar. Die Schnittstelle verschwindet und zurück bleiben nur der Wunsch und das Produkt.



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

**[Beauftragen Sie unsere Architekten](/contact)**.