Leistungssteigerung der Website der New York Times durch das Upgrade auf React 18

• Die NYT-Ingenieure legen großen Wert auf Seitenleistung, SEO und den Einsatz aktueller Technologien
• Beim Upgrade auf React 18 wurden mehrere auftretende Probleme gelöst und eine deutliche Leistungssteigerung erzielt
• Die wichtigsten Vorteile von React 18: flüssigeres Rendering durch Concurrent Mode, automatisches Batching und Transitions sowie Server-Side Rendering und Streaming-Updates
• Durch das Upgrade wurden Verbesserungen beim INP-Wert (Interaction to Next Paint), einer Kennzahl für die Reaktionsfähigkeit von Seiten, erwartet

Migrationsprozess

• Die veraltete Testing-Bibliothek Enzyme wurde durch @testing-library/react ersetzt
• Um die neuen Funktionen von React 18 sicher zu integrieren, wurden wichtige Abhängigkeiten, Typen und Tests auf React 18 aktualisiert
• Die neuen APIs createRoot und hydrateRoot wurden genutzt, um Funktionen von React 18 anzuwenden
• Nach dem ersten Deployment traten unerwartete Probleme bei benutzerdefinierten „Embedded Interactives“ auf
  • React 18 reagiert empfindlicher auf Hydration-Mismatches als frühere Versionen; daher musste zwischen dem Beheben dieser Mismatches oder dem erneuten Mounten der Embedded Interactives auf Client-Seite bei Auftreten eines Mismatches gewählt werden
  • Alle Hydration-Mismatches sicher zu beheben, erwies sich als schwierige Aufgabe

Manuelles Extrahieren und Ausführen von Embedded-Interactive-Skripten

• Aus Sicherheitsgründen im Browser werden Script-Tags, die über die innerHTML-Prop hinzugefügt werden, nicht automatisch ausgeführt
• Damit Script-Tags korrekt ausgeführt werden, müssen sie aus dem interaktiven HTML extrahiert und entfernt und beim erneuten Rendern der Komponente an der richtigen Stelle wieder eingefügt werden
• Einige interaktive Skripte müssen beim erneuten Einfügen in der richtigen Reihenfolge geladen werden
  1. Zuerst wird ein Manifest-Skript mit statischen Daten hinzugefügt
  2. Danach werden Skripte mit src-Attribut asynchron ausgeführt
  3. Zum Schluss werden Skripte hinzugefügt und ausgeführt, deren innerHTML Vanilla JavaScript enthält

Unmittelbare Leistungsverbesserung

• Nach der Integration einer fein granularen Steuerung des Embedded-Interactive-Codes konnte React 18 sicher ausgerollt werden
• Nach dem Rollout zeigte sich nahezu sofort eine Leistungsverbesserung; der INP-Wert sank um etwa 30 %
• Durch automatisches Batching und die Concurrency-Funktionen von React 18 verringerte sich die Zahl der Re-Renders während des Seitenladens ungefähr um die Hälfte

Ausblick

• Künftig soll der Fokus auf der Untersuchung potenzieller Vorteile neuer Funktionen wie startTransition und React Server Components liegen
• Die kontinuierliche Senkung des INP-Werts und die Verbesserung der Gesamtfunktionalität sind die Hauptziele
• Oberste Priorität bleibt die Gewährleistung einer stabilen und zuverlässigen Performance der derzeit eingesetzten React-Version
• Auf Basis der Ergebnisse auf der Nachrichtenseite werden ähnliche Leistungsverbesserungen auch auf anderen Websites angestrebt
• Vor der Änderung von Googles SEO-Algorithmus konnte der INP-Wert erfolgreich aus dem „schlechten“ Bereich herausgebracht werden; negative SEO-Auswirkungen traten nicht auf