Reakt beschleunigen: 6 bewährte Tipps zur Optimierung der Core Web Vitals

In diesem Text präsentieren wir einige Optimierungstechniken zur Verbesserung der Core Web Vitals von Websites, die auf React basieren. Unser Fokus liegt auf Interaction to Next Paint (INP), also der Reaktionsgeschwindigkeit auf Interaktionen.

Die Optimierung der Geschwindigkeit von React-basierten Websites besteht darin, lange Aufgaben in JavaScript zu optimieren (messbar durch die Metrik JS Long Tasks (JSLT)), die eng mit der internen Funktionsweise von React verbunden sind und sich unter anderem in der Metrik TBT zeigen.

Ist eine React-Website automatisch schnell? Ein Irrtum#

React verwendet intern mehrere clevere Techniken, die zur Geschwindigkeit von Websites oder Webanwendungen beitragen.

Es aktualisiert und rendert effektiv nur die Komponenten, bei denen sich Daten ändern. Das Hooks-System schützt die Website teilweise vor unerwünschten Layout-Neuberechnungen und dem sogenannten Layout-Thrashing.

Bedeutet das, dass eine auf React basierende Website automatisch schnell ist? Die Antwort ist einfach: NEIN.

Deklarative Komponenten machen den Code zwar vorhersehbarer und leichter verständlich, aber unvorsichtiger Umgang mit dem Zustand oder der Anzahl der Komponenten führt fast sicher zu langsamer Interaktivität.

Es ist ein Werkzeug wie jedes andere, und es hängt immer davon ab, wie gut der Entwickler es kennt.

Lassen Sie uns nun die Tipps zur Optimierung von React anschauen, die wir Ihnen basierend auf unserer Arbeit für Kunden empfehlen. Wie behält man React-Code unter Kontrolle?

1) Verringern Sie die Größe des DOM#

Die Größe des DOM und dessen Optimierung sind grundlegend. Was nicht im DOM ist, muss nicht gerendert werden, und der Browser kann durchatmen.

In React gilt diese Wahrheit doppelt. Weniger Elemente bedeuten weniger Komponenten, was weniger JavaScript zum Herunterladen und Verarbeiten bedeutet.

Im Fall von SSR (Server-Side-Rendering) wird auch die Zeit zur Erstellung der ersten HTML-Antwort optimiert. Diese hat zudem eine kleinere Datenmenge. Einfach ein Gewinn für alle Seiten.

Entfernen Sie Komponenten, die für SEO nicht wichtig sind, vollständig aus dem DOM und laden Sie sie mit Lazy Loading:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

2) Erstellen Sie zwei Versionen von Komponenten: einfach und vollwertig#

Auch wenn eine Komponente oder deren Inhalt für SEO oder Zugänglichkeit wichtig ist, bedeutet das nicht, dass sie beim ersten Rendern in voller visueller Qualität vorhanden sein muss. Besonders, wenn die Komponente nicht im ersten Viewport sichtbar ist.

Die Optimierung durch Aufteilen in einfache und reichhaltige Komponenten ist besonders effektiv bei Elementen, die sich auf der Seite mehrfach wiederholen. Das sind typischerweise Navigationsseiten, Produktlisten oder andere Angebote, wie auf dem Bild zu sehen:

Beispiel einer Komponente, die beim Laden der Seite nur für SEO wichtige Daten bereitstellt. Dieser Zustand ist für den Benutzer visuell verborgen. Die „Rich-Variante“ wird beim Anzeigen der Komponente im Viewport aktiviert.

3) Verwenden Sie <Suspense>#

Das Tag <Suspense> wird in React primär verwendet, um Platzhalterinhalte während des Ladens von Lazy Components anzuzeigen.

Weniger bekannt ist jedoch, dass seine versteckte Superkraft darin besteht, das konkurrierende Rendering zu aktivieren. Die Seite und ihre Komponenten können somit in wichtige und weniger wichtige Teile aufgeteilt werden.

Komponentenbaum, der mit dem Tag <Suspense> aufgeteilt wurde. Rote Komponenten sind als weniger wichtig markiert.

Im Fall von SSR (Server-Side-Rendering) ist die Wirkung des <Suspense>-Tags absolut entscheidend.

Hydration, also das „Wiederbeleben“ der Seite, ist der Moment, in dem der serverseitig generierte Code auf der Clientseite im Browser zum Leben erweckt wird. Dies ist fast immer eine lange JavaScript-Aufgabe, daher hilft die Verwendung von <Suspense>.

Aber Vorsicht! Umschließen Sie niemals große Blöcke mit diesem Tag, sondern nur kleinere Teile. Verwenden Sie <Suspense> sparsam bei Elementen, die im ersten Viewport sichtbar sind, da es sonst kontraproduktiv sein kann.

4) Achten Sie auf Hydrationsfehler#

Am Ende der Hydration erfolgt eine Überprüfung, ob der resultierende Elementbaum (DOM) dem Serverzustand entspricht. Falls nicht, tritt ein Fehler auf und es erscheint eine Meldung:

Anzeige eines Hydrationsfehlers in der Browserkonsole.

In diesem Moment invalidiert React alle Komponenten auf der Seite und es erfolgt ein Update durch clientseitiges JavaScript, was die Leistung verschlechtert und die LCP-Metrik unangenehm verzögern kann.

5) Seien Sie vorsichtig mit useEffect()#

useEffect ist nicht immer asynchron. Wenn ein Benutzer eine Eingabe auslöst (zum Beispiel klickt), wird der gesamte React-Code synchron ausgeführt, einschließlich der „Effect Hooks“.

Wenn der Hook verwendet wird, um eine Aufgabe in den nächsten Render-Zyklus zu verschieben, muss setTimeout oder eine andere Methode verwendet werden.

useEffect(() => {
	// Arbeit in eine separate Aufgabe verschieben:
	setTimeout(() => {
		sendAnalytics();
	}, 0);
}, []);

6) Serverkomponenten#

Serverkomponenten sind eine relativ neue Funktion in React. Sie ermöglichen es, Komponenten zu schreiben, die im Client-JavaScript nicht verfügbar sind, sondern nur auf dem Server.

Das bedeutet, dass der Client bereits gerenderten Inhalt erhält und kein JavaScript erneut ausführen muss, um den Inhalt anzuzeigen oder zu „beleben“.

Fazit#

React ist nur ein Werkzeug. Der Schlüssel ist, es gut zu kennen. In dieser Hinsicht empfehlen wir sehr die Artikelserie React Internals Deep Dive.

Sehen Sie sich weitere Methoden zur Optimierung von INP an.