Ratgeber
Core Web Vitals für Single Page Applications prüfen
Single Page Applications stellen besondere Anforderungen an die Performance: Clientseitiges Routing, umfangreiche JavaScript-Bundles und DOM-Manipulationen verändern die Messung der Core Web Vitals grundlegend.
Erfassen Sie echte Nutzerdaten über CrUX, beschleunigen Sie den ersten LCP durch serverseitiges Rendern (SSR), reduzieren Sie INP-Latenzen durch das Aufbrechen langer Aufgaben und reservieren Sie Container-Größen gegen CLS.
Unterschied zwischen Hard- und Soft-Navigations in SPAs
Die offiziellen Core Web Vitals von Google (LCP, INP, CLS) basieren auf initialen Dokument-Ladevorgängen. Wenn Nutzer innerhalb einer SPA über Router (wie React Router oder Vue Router) navigieren, erfolgt kein vollständiger Neuladevorgang. Nutzen Sie die experimentelle Soft-Navigations-Heuristik der web-vitals-Bibliothek, um Routenwechsel und Interaktionszeiten zuverlässig zu erfassen.
LCP-Engpässe in clientgerenderten Architekturen beheben
SPAs weisen häufig einen verzögerten Largest Contentful Paint auf, da der Browser zunächst umfangreiche Skripte herunterladen und ausführen muss, bevor das Hauptelement sichtbar wird. Setzen Sie auf Server-Side Rendering (SSR) oder Static Site Generation (SSG). Liefern Sie leichtgewichtiges Initial-HTML (< 150 KB) mit kritischem CSS und optimieren Sie LCP-Bilder mit fetchpriority='high'.
Interaction to Next Paint (INP) bei UI-Interaktionen optimieren
INP misst die Reaktionsgeschwindigkeit der Benutzeroberfläche bei Klicks, Berührungen und Tastatureingaben. In SPAs lösen Benutzeraktionen oft aufwendige Komponenten-Neuberechnungen aus, die den Haupt-Thread blockieren. Teilen Sie lange Aufgaben (> 50 ms) mittels scheduler.yield() oder requestIdleCallback() auf und verlagern Sie rechenintensive Prozesse in Web Worker.
Cumulative Layout Shift (CLS) während der Hydration vermeiden
Die clientseitige JavaScript-Hydration ist eine Hauptursache für unerwartete Layout-Verschiebungen. Wenn serverseitiges HTML und clientseitiger Komponentenstatus voneinander abweichen oder dynamische Inhalte nachgeladen werden, springt das Layout. Definieren Sie stets feste aspect-ratio- oder min-height-Werte für dynamische Container und Banner.
Labor- und Felddaten-Monitoring automatisieren
Synthetische Einzeltestergebnisse spiegeln weder schwache Mobilprozessoren noch gedrosselte Mobilfunknetze wider. Integrieren Sie Real User Monitoring (RUM) mit der web-vitals-Bibliothek, um den 75. Perzentilwert realer Nutzer zu überwachen. Etablieren Sie Performance-Budgets in CI/CD-Pipelines, um Skriptgewicht und Aufgabenblockaden vor dem Release abzufangen.
Performance: HTML-Auslieferung, Datenmenge und mögliche Render-Blocker.
Kostenlosen Audit starten →