Performance & Caching

Schneller erster Aufruf, schnelle Wiederbesuche und Effekte, die zum Gerät passen

Frontend-Performance läuft auf drei Dinge hinaus: weniger Code senden, bereits Gesendetes cachen und kein Gerät mehr tun lassen, als es kann. Wir setzen Performance-Budgets in der CI, cachen auf jeder Ebene vom CDN bis zum Browser und skalieren visuelle Effekte nach der Leistungsfähigkeit jedes Geräts.

Frontend-Architektur-Review buchen

Zuletzt aktualisiert: November 2026

Ziele für Core Web Vitals

Wir bauen auf Googles „gute“ Schwellenwerte beim 75. Perzentil realer Nutzer hin:

Metrik	Misst	Ziel
Largest Contentful Paint (LCP)	Wie schnell der Hauptinhalt erscheint	2,5 s oder weniger
Interaction to Next Paint (INP)	Wie schnell die Seite auf Eingaben reagiert	200 ms oder weniger
Cumulative Layout Shift (CLS)	Wie stark das Layout beim Laden springt	0,1 oder weniger

Real-User-Monitoring verfolgt diese Werte nach dem Launch, und Bundle-Size-Budgets in der CI fangen Verschlechterungen vor dem Merge ab.

Caching auf jeder Ebene

Ebene	Was wir cachen	Wie es aktuell bleibt
CDN-Edge	Statische Assets, gerendertes HTML	Dateinamen mit Content-Hash; stale-while-revalidate für HTML
HTTP-Cache	Assets im Browser der Nutzer	Langlebige immutable-Header für gehashte Dateien
Service Worker	App-Hülle, wichtige Routen, Bilder	Versionierte Caches, die beim Deployment ersetzt werden
In-App-Datencache	API-Antworten	Aktualitätsregeln pro Query und gezielte Invalidierung
IndexedDB	Offline benötigte Daten	Synchronisierung mit dem Server, sobald online
Server-Cache	Gerenderte Seiten und API-Ergebnisse	Revalidierung bei Inhaltsänderungen

Jede Ebene hat eine festgelegte Invalidierungsregel. Nutzer bleiben nicht an veralteten Preisen hängen, und der Server baut nichts neu, was sich nicht geändert hat.

Visuelle Effekte, die sich dem Gerät anpassen

Durchscheinende Glasflächen (wie Apples Liquid-Glass-Stil), starke Unschärfe, Schatten und große Animationen sehen auf neuer Hardware gut aus und ruckeln auf älteren Geräten. Wir bauen Effekte in Stufen:

1
Voll
Der volle Effekt auf leistungsfähigen Geräten.
2
Leichter
Eine leichtere Version (weniger Unschärfe, weniger Ebenen), wenn die Frame-Zeiten steigen.
3
Massiv
Eine massive, statische Ausweichlösung für einfache Geräte und für Nutzer, die prefers-reduced-transparency oder prefers-reduced-motion eingestellt haben.

Die Seite misst sich selbst und wechselt zwischen den Stufen, sodass jeder die beste Version erhält, die sein Gerät flüssig darstellen kann.

Kleinere Assets

Bilder werden als AVIF oder WebP in der passenden Größe für jeden Bildschirm ausgeliefert. Schriften werden auf die genutzten Zeichen reduziert. Skripte von Drittanbietern laden nach dem Hauptinhalt – oder erst, wenn sie gebraucht werden.

FAQ

Häufig gestellte Fragen

01Unser Lighthouse-Score ist gut. Warum beschweren sich Nutzer trotzdem?

Lighthouse läuft auf einem Laborgerät. Reale Nutzer haben langsamere Smartphones und Netzwerke. Wir betrachten Felddaten Ihrer tatsächlichen Nutzer, um die Lücke zu finden.

Nächster Schritt

Beginnen Sie mit einem Review des Bestehenden

Senden Sie uns Ihr Repository oder einen Staging-Link. Wir melden uns mit den drei Änderungen, die den größten Unterschied für Ihre Release-Geschwindigkeit, Performance und Zuverlässigkeit machen würden.