Optimierung der UI-Performance

1) Was zählt „schnell“

TTFB (Time to First Byte) - Schnelle Antwort des Servers/CDN.
LCP (Largest Contentful Paint) - der „wichtigste“ Inhalt erschien schnell.
INP (Interaction to Next Paint) - Reaktionsfähigkeit bei der Interaktion.
CLS (Cumulative Layout Shift) - Kein „Jitter“ der Schnittstelle.
TTI (Time to Interactive) - wenn alles bereits reagiert.
Empfohlene Richtlinien: LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1 (für das 75. Perzentil der realen Nutzer).

2) Prozess: Messen → Engpässe finden → Budgets festlegen

1. Messen Sie: RUM (echte Benutzer, Perzentile nach Ländern/Netzwerken/Geräten) + Synthetik (Leuchtturm/Beobachter).
2. Suchen: Performance-Profiler (langwierige Aufgaben> 50 ms, Layout-Thrashing, überflüssige Renderings).
3. Fix: Budgets (Gewichtung von JS/CSS/Fonts, LCP/INP) und „rote Linien“ im CI.

3) Netzwerk und Download von Ressourcen

3. 1 HTTP und Prioritäten

Aktivieren Sie HTTP/2/3, Brotli-Komprimierung.
'preconnect' für kritische Domänen; 'dns-prefetch' für sekundäre Domänen.
'preload' für kritische Ressourcen (Heldenbild, Hauptschrift).
'fetchpriority =' high/low 'und' priority 'Hinweise, wo unterstützt.

3. 2 Zwischenspeicherung

Statik mit Datei-Hash: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML ist eine kurze TTL + stale-while-revalidate über CDN.
ETag/Last-Modified und Service Worker für Offline/Wiederholungsbesuche.

4) Code: kleiner, später, „glatter“

4. 1 Montage

Tree-shaking, minify (в т.ч. dead-code-elim).
Code-Splitting nach Routen/Widgets, dynamischer Import.
Vermeiden Sie „globale“ schwere Pakete im Basis-Bundle (Moment → Intl/Day. js).

4. 2 HTML-Rendering und -Lieferung

SSR/ISR/Streaming: Geben Sie zuerst den Rahmen und den Hauptinhalt her.
Partial/Inseln Hydration: Hydrieren Sie nur interaktive Bereiche.
Defer alles unkritisch:'<script type = „module“ defer>'.

4. 3 Reaktionsspezifität (wenn Sie React anwenden)

`React. lazy'+ 'Suspense' für faule Widgets.
'startTransition' und 'useDeferredValue' für schwere Filter/Suche.
RSC (Server Components) - Berechnungen auf dem Server, kleiner als JS auf dem Client.
Selektoren im Stapel (zustand/redux): Signieren Sie die Komponente in Fragmente, nicht den gesamten Stor.

5) Render und Zustand: wo „bremst“

5. 1 Isolierung der Render

Große Komponenten zerkleinern, memoisieren ('memo', 'useMemo', 'useCallback').
Listenschlüssel - stabil; Erstellen Sie keine neuen Funktionen/Objekte in Props unnötig.
Vermeiden Sie den „globalen“ Kontext für häufig wechselnde Daten - verwenden Sie Selektoren oder Ereignisbusse.

5. 2 Virtualisierung und große Listen

Arbeitsblätter/Tabellen → Virtualisierung (Render-Fenster).
Pagination/Infinit-Scrolling mit Backpressure (nicht 100k Zeilen auf einmal laden).
Verzögerte Initialisierung schwerer Widgets außerhalb des Viports.

5. 3 Layout & paint

content-visibility: auto; für versteckte Abschnitte (der Browser rendert nicht das Unsichtbare).
contain und 'contain-intrinsic-size' für vorhersagbare Größen.
Vermeiden Sie häufiges Lesen von Layout-Einträgen gemischt (Layout-Thrashing); Messgrößen gruppieren.
will-change dosiert verwenden (sonst zusätzlicher Speicher/Schichten).

6) Bilder und Grafiken

Formate: AVIF/WebP (Fallback auf PNG/JPEG).
Responsive-Ansatz: 'srcset' + 'sizes', density-based for retina.
'loading =' lazy 'für nicht-heroische Bilder; priority/preload - nur für LCP-Kandidaten.
Platzhalter mit festen Größen → keine CLS-Sprünge.
Canvas/Charts: Offscreen-Canvas und Web Worker für Berechnungen; batching Neuzeichnungen.

7) Schriftarten und Text

Ein oder zwei variable Schriftarten statt vieler Zeichen.
'font-display: swap '/' optional', preload für die Hauptdarstellung.
'size-adjust', um den „Sprung“ beim Ersetzen der Schriftart zu reduzieren.
Lokale Fallback-Schriftarten mit ähnlichen Metriken.

8) CSS und Animationen

Kritische CSS Inline (<14-20 kB), der Rest ist zu verschieben.
Nicht verwendete Stile löschen (Purge/CSSTree).
Animationen möglichst auf transform/opacity; „prefers-reduced-motion“ respektieren.
Vermeiden Sie tiefe Kaskaden und explodierende Selektoren.

9) Web-Arbeiter, Flow und schwere Aufgaben

Alle CPU-schweren sind im Worker (Parsen, Sortieren, Aggregieren, ML).
Streaming-APIs ('ReadableStream', 'Fetch' mit Streams) für lange Antworten.
Zerkleinern von Aufgaben in Chunks durch 'requestIdleCallback '/Mikrotasks, um reaktionsschnell zu bleiben.

10) Layoutstabilität (CLS)

Reservieren Sie einen Platz unter dem LCP-Element (Bild/Widget).
Legen Sie keine Banner/Bänder ohne feste Abmessungen ein.
Asymmetrische Tulpentypen/Toast - bewegen Sie den Inhalt nicht; Verwenden Sie Ebenen/Portale.

11) Beispiele für Snippets

Kritische Schriftart und LCP-Bild

html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">

Faule und sichere Widget-Initialisierung

js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}

Stabilisierung des Layouts

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) Regressionskontrolle und Budgets

Bundle-Budget: Gesamt-JS ≤ N kB, CSS ≤ M kB, initial-chunk ≤ K kB.
Web-Vitale in CI (emuliert) + RUM-Alerts (auf Perzentilen).
Bandle-Analyse: source-map-explorer/analyzer in PR.
Performance-Benchmarks der Komponenten (Rendering von 10k-Elementen, Reaktionszeit).

13) Anti-Muster

Laden Sie „alles auf einmal“: Diagramme, Editoren, Karten im ersten Bildschirm.
Ein riesiger globaler Staat → kaskadierende Rerendairs.
Bilder in 2-4 × der gewünschten Größe, ohne' srcset/sizes'.
Lange synchrone Zyklen auf dem Hauptstrom.
'outline: none' und benutzerdefinierte Tricks ohne Optimierung - stören die Renderindikatoren.
Animationen nach 'top/left' (brechen das Layout und rufen reflow auf).

14) Bildschirm-Checkliste

• LCP ≤ 2. 5 c auf 3G/Mobile-Verkehr, CLS ≤ 0. 1, INP ≤ 200 ms
• Kritische Ressourcen: preload/Prioritäten; der Rest ist defer/lazy
• Bandles: code-split, keine unnötigen Abhängigkeiten
• Virtualisierung von Listen/Tabellen, verzögerte Initialisierung von schweren Widgets
• Bilder: AVIF/WebP, „srcset/sizes“, „loading =“ lazy „“
• Schriftarten: variable + 'font-display', preload nur erforderlich
• CSS: critical inline, Purge, „content-visibility“ und „contain“, wo relevant
• Workers/idle für schwere Berechnungen
• Budgets und Web-Vitals sind mit Dashboards/Alerts verbunden

15) Implementierungsplan (3 Iterationen)

Iteration 1 - Schnelle Gewinne (1-2 Wochen)

Aktivieren Sie Brotli/HTTP-2/3, CDN. Kritische CSS und preload LCP Ressourcen.
Nehmen Sie schwere Widgets in dynamische Importe.
Bilder → AVIF/WebP + 'srcset'. Schriftarten: 'font-display: swap'.

Iteration 2 - Strukturelle Verbesserungen (3-4 Wochen)

Code-Split auf Routen, Bandanalyse, Entfernung von „schweren“ Libs.
Listen-Virtualisierung, Content-Visibility, Contain-Intrinsic-Size.
Implementieren Sie SSR/Streaming/Inseln (wo relevant).
RUM mit Web-Vitals, Budgets im CI.

Iteration 3 - Skalierung und Nachhaltigkeit (kontinuierlich)

Workers/offscreen-canvas, batching settlements, startTransition/deferredValue.
Regelmäßiges Perf-Audit, Regressions-Autodigest, Teamtraining.

16) Mini-FAQ

Was beschleunigt am meisten auf Mobile?
Reduzierung des ursprünglichen JS, SSR/Streaming und Optimierung des LCP-Bildes.

Brauchen Sie immer SSR?
Nein. Wenn die Seite dynamisch interaktiv ist und schlecht zwischengespeichert wird - islands/partial hydration könnte besser sein.

Warum ist INP bei einem „leichten“ Bundle schlecht?
Wahrscheinlich lange Aufgaben (Sortierung, Zeitpläne) auf dem Hauptstrom - nehmen Sie die Aufgaben in den Worker und teilen Sie sie auf.

Summe

Eine schnelle Benutzeroberfläche ist eine Sammlung von Disziplinen: Netzwerkprioritäten und Cache, kleinere und späte Bundles, vorhersagbares Rendern ohne Sprünge, sparsame Bilder und Schriftarten sowie die ständige Kontrolle von Metriken in der realen Welt. Geben Sie Budgets ein, automatisieren Sie Inspektionen und bringen Sie dem Team bei, bei jedem Schritt an Geschwindigkeit zu denken - so bleibt die Schnittstelle heute und in einem Jahr schnell.