Performance messen: Lighthouse und Core Web Vitals

Lighthouse ist das Standardtool zur Messung der Web-Performance. Führen Sie es in den Chrome DevTools (Lighthouse-Tab) oder über die CLI aus (npx lighthouse https://yoursite.com). Wenn Sie die Islands Architecture bewerten, führen Sie Lighthouse auf repräsentativen Seiten vor und nach der Migration aus, um die Verbesserungen objektiv zu quantifizieren.

LCP misst, wann das größte sichtbare Inhaltselement vollständig gerendert ist. Die Islands Architecture verbessert LCP, weil der Server sofort vollständig gerendertes HTML sendet – der Browser muss nicht auf JavaScript warten, um Inhalte zu rendern. Ein Hero-Bild oder eine Überschrift, die als LCP-Element erfasst würde, wird bereits aus der anfänglichen HTML-Antwort dargestellt.

In einer React-SPA wird LCP häufig verzögert, weil der Browser JavaScript herunterladen und ausführen muss, bevor React das LCP-Element rendert. Bei der Islands Architecture befindet sich der LCP-Inhalt bereits im initialen HTML, sodass die JavaScript-Ausführung LCP nicht blockiert. Dies ist einer der wichtigsten messbaren Vorteile.

Die Total Blocking Time misst, wie lange der Hauptthread durch JavaScript-Aufgaben blockiert ist, die länger als 50 ms dauern. Die Hydration einer großen React-SPA kann mehrere hundert Millisekunden TBT verursachen. Islands Architecture reduziert TBT drastisch, da die ausgeführte JavaScript-Menge proportional zur Anzahl der Islands und nicht zur Seitengröße ist.

Cumulative Layout Shift misst die visuelle Stabilität – also, ob sich Elemente beim Laden der Seite verschieben. JavaScript-gerenderte Inhalte können Layoutverschiebungen verursachen, wenn React rendert und Abmessungen ändert. Serverseitig gerendertes HTML aus der Islands Architecture vermeidet durch Hydration bedingte Layoutverschiebungen, da das anfängliche Layout aus statischem HTML stammt, das sich bei der Hydration nicht ändert.

First Input Delay (heute durch Interaction to Next Paint, INP, ersetzt) misst, wie schnell die Seite auf Benutzerinteraktionen reagiert. Islands Architecture verbessert INP, da jedes Island ein kleines, fokussiertes JavaScript-Bundle besitzt. Interaktionen innerhalb eines Islands werden schnell ausgeführt, weil kein großer React-Baum vorhanden ist, durch den Arbeit eingeplant werden muss.

Eine typische Gegenüberstellung für eine Blogseite: Eine vollständige React-SPA erreicht auf dem mobilen Lighthouse möglicherweise 45–65 Punkte (TBT: 800 ms, LCP: 3,2 s). Derselbe Inhalt als Astro-Website mit einem React-Island erreicht möglicherweise 90–98 Punkte (TBT: 80 ms, LCP: 1,1 s). Die Vorteile fallen auf inhaltsreichen Seiten mit wenig Interaktivität am deutlichsten aus.

Islands Architecture ist nicht die richtige Wahl für hochinteraktive Anwendungen wie Dashboards, Code-Editoren oder kollaborative Tools. In diesen Anwendungen gibt es Komponenten, die ihren Zustand ständig gemeinsam nutzen und zusammen neu rendern – der Overhead der Kommunikation zwischen Islands würde die Performancegewinne zunichtemachen und zusätzliche architektonische Komplexität verursachen.

Islands Architecture eignet sich hervorragend für inhaltsreiche Websites mit punktueller Interaktivität: Blogs (Inhalte lesen, gelegentlich liken oder kommentieren), Dokumentation (Dokumentation lesen, gelegentlich suchen oder eine Schaltfläche zum Kopieren von Code verwenden), Landingpages (größtenteils statisch, mit einem Newsletter-Formular als Island) und E-Commerce-Produktseiten (Bilder und Beschreibung statisch, mit einem Add-to-Cart-Island).

Google verwendet die Core Web Vitals (LCP, INP, CLS) als Ranking-Signale. Die Verbesserung dieser Messwerte mit Islands Architecture wirkt sich direkt positiv auf Suchrankings aus. Eine Website, die ihren mobilen Lighthouse-Score durch die Einführung von Islands Architecture von 55 auf 92 verbessert, profitiert gleichzeitig von einer besseren Benutzererfahrung und besseren SEO.

Teams, die für Marketing- und Dokumentationswebsites von Next.js React SPA zu Astro migrieren, berichten von konsistenten Mustern: JavaScript-Payloads sinken um 70–90 %, mobile Performance-Scores steigen um 20–40 Punkte und die Serverhostingkosten sinken, weil statische Dateien ohne den Overhead des serverseitigen Renderings pro Anfrage von einem CDN ausgeliefert werden.

Warum reduziert Islands Architecture die Total Blocking Time (TBT) so drastisch?

Islands Architecture verbessert alle Core Web Vitals: LCP profitiert von serverseitig gerendertem HTML, TBT sinkt, weil die JavaScript-Menge proportional zur Interaktivität ist, CLS wird durch stabile serverseitig gerenderte Layouts reduziert und INP verbessert sich durch kleine, fokussierte Island-Bundles. Lighthouse-Scores inhaltsreicher Seiten verbessern sich drastisch. Das Muster eignet sich nicht für hochinteraktive Anwendungen, ist aber hervorragend für Blogs, Dokumentationsseiten, Landingpages und E-Commerce geeignet.