Vitalfunktionen: INP und CWV beherrschen
Die wichtigsten Web-Vitals ändern sich. Google kümmert sich um die Interaktion mit Next Paint. Wie wir Haupt-Thread-Blockierungsaufgaben profilieren und optimieren.
Die Core Web Vitals (CWV) von Google sind die maßgebliche Messgröße für die Gesundheit des Webs. Im Jahr 2025 hat sich der Fokus vollständig auf INP (Interaction to Next Paint) verlagert. FID (First Input Delay) ist tot.
Was ist INP?
INP misst die Reaktionsfähigkeit Ihrer Website nachdem sie geladen wurde. Wie viele Millisekunden vergehen, bis sich das Menü tatsächlich bewegt, wenn der Benutzer auf „Menü öffnen“ klickt? Wenn die CPU damit beschäftigt ist, ein 2-MB-Tracking-Skript zu analysieren, wird das Menü nicht verschoben. Der Benutzer spürt eine „Verzögerung“.
Optimierungsstrategien
1. Dem Hauptthread nachgeben
Wir unterteilen lange Aufgaben mit „scheduler.yield()“ oder „setTimeout“. Anstatt 1.000 Produkte in einer Schleife zu verarbeiten (wodurch die Benutzeroberfläche 500 ms lang blockiert wird), verarbeiten wir sie in 50er-Blöcken, sodass der Browser dazwischen Frames malen kann.
2. Entprellen und Drosseln
Scroll-Listener und Größenänderungsereignisse werden hunderte Male pro Sekunde ausgelöst. Wir verpacken diese in „Entprellungs“-Funktionen, um sicherzustellen, dass sie erst ausgeführt werden, nachdem der Benutzer aufhört, sich zu bewegen.
3. CSS für Animation
Wir erzwingen strikt Nur für Compositor-Eigenschaften für Animationen („transform“ und „opacity“). Das Animieren von „Höhe“ oder „Links“ zwingt den Browser dazu, das Layout der gesamten Seite neu zu berechnen (Reflow), was die Leistung auf Mobilgeräten beeinträchtigt.
Das Werkzeug
Wir verwenden Lighthouse CI in unserer GitHub Actions Pipeline. Ein Entwickler kann eine Pull-Anfrage nicht zusammenführen, wenn dadurch der Leuchtturm-Score unter 90 sinkt. Die Leistung wird durch Code und nicht durch Versprechen bestimmt.