Amélioration des performances du site du New York Times grâce à la mise à niveau vers React 18

• Les ingénieurs du NYT accordent une grande importance aux performances des pages, au SEO et au maintien d’une pile technologique à jour
• En menant la mise à niveau vers React 18, ils ont résolu plusieurs problèmes et obtenu un gain de performances important
• Principaux avantages de React 18 : rendu plus fluide grâce au Concurrent Mode, batching automatique et transitions, rendu côté serveur et mises à jour en streaming, etc.
• Ils s’attendaient à améliorer le score INP (Interaction to Next Paint), l’indicateur qui mesure la réactivité des pages

Processus de migration

• Remplacement de la bibliothèque de test Enzyme, désormais obsolète, par @testing-library/react
• Mise à niveau des principales dépendances, des types et des tests pour React 18 afin d’intégrer en toute sécurité les nouvelles fonctionnalités de React 18
• Adoption des nouvelles API createRoot et hydrateRoot pour appliquer les fonctionnalités de React 18
• Après le premier déploiement, des problèmes inattendus sont apparus dans les « interactifs embarqués » personnalisés
  • React 18 est plus sensible aux écarts d’hydratation que les versions précédentes ; il a donc fallu choisir entre corriger ces écarts ou remonter côté client les interactifs embarqués lorsqu’un écart d’hydratation se produit
  • Corriger de manière sûre tous les écarts d’hydratation s’est révélé difficile

Extraction et exécution manuelles des scripts d’interactifs embarqués

• Pour des raisons de sécurité du navigateur, les balises de script ajoutées via la prop innerHTML ne s’exécutent pas automatiquement
• Pour exécuter correctement les balises de script, il a fallu les extraire et les supprimer du HTML interactif, puis les réinsérer au bon endroit lors du rerender du composant
• Certains scripts interactifs devaient être rechargés dans le bon ordre lors de leur réinsertion
  1. Ajouter d’abord le script manifeste contenant les données statiques
  2. Exécuter de manière asynchrone les scripts disposant d’un attribut src
  3. Enfin, ajouter et exécuter les scripts dont innerHTML contient du JavaScript vanilla

Améliorations immédiates des performances

• Après avoir intégré un contrôle fin du code des interactifs embarqués, ils ont pu déployer React 18 en toute sécurité
• Après le déploiement, ils ont constaté une amélioration presque immédiate des performances, avec notamment une baisse d’environ 30 % du score INP
• Grâce au batching automatique et aux fonctionnalités de concurrence de React 18, le nombre de rerenders pendant le chargement des pages a été réduit d’environ moitié

Orientation pour la suite

• L’accent sera mis sur l’exploration des bénéfices potentiels de nouvelles fonctionnalités comme startTransition et React Server Components
• L’objectif principal est de continuer à faire baisser le score INP et d’améliorer les fonctionnalités globales
• La priorité absolue reste de garantir des performances stables et fiables avec la version de React actuellement utilisée
• Sur la base des résultats obtenus sur le site d’actualités, l’équipe cherche des gains de performances similaires sur d’autres sites
• Avant la modification de l’algorithme SEO de Google, ils ont réussi à faire sortir le score INP de la zone « médiocre », sans conséquence SEO négative