Quoi de neuf avec Aurora ?

Kara Erickson
Kara Erickson
X

L'initiative Aurora de Chrome est le fruit d'une collaboration entre Chrome et des frameworks et outils JavaScript Open Source afin d'améliorer l'expérience utilisateur sur le Web. Si Aurora est nouvelle pour vous, consultez notre post de présentation pour en savoir plus sur notre mission et notre méthodologie.

Étant donné que nous n'avons publié aucune feuille de route depuis 2021, nous souhaitons partager avec vous ce que nous avons accompli et quelques projets passionnants que nous vous avons préparés pour 2023.

Temps forts du projet récent

Ces dernières années, nous collaborons avec des frameworks tels que Next.js, Angular et Nuxt pour optimiser le rapport Core Web Vitals. Voici quelques points importants depuis notre dernière mise à jour.

Images

Les images sont souvent à l'origine de problèmes de performances. Vous trouverez ci-dessous quelques-unes des méthodes que nous avons utilisées avec les personnes concernées en ce qui concerne le framework pour nous assurer que les bonnes pratiques sont immédiatement disponibles, afin que les développeurs fournissent des images de manière optimale par défaut lorsqu'ils utilisent les frameworks avec lesquels nous travaillons.

Directive sur les images Angular

Nous avons publié une directive d'image stable pour le framework Angular, disponible dans Angular 15 et spécialement rétroportée vers les versions 13.4 et 14.3. Cette directive active le chargement différé natif par défaut, ajoute des indices fetchpriority aux images prioritaires et génère automatiquement les attributs srcset appropriés pour les images responsives.

L'impact: des tests en laboratoire Lighthouse ont été effectués dans l'environnement de contrôle qualité de Land's End avant et après l'utilisation de la directive sur les images. Sur les ordinateurs, le LCP (Largest Contentful Paint) médian est passé de 12 s à 3 s, soit une amélioration de 75% du LCP.

Comparaison de la pellicule: site Web 1 avec des balises d'image natives et site Web 2 avec la directive d'image Angular.

Pour en savoir plus sur cette directive, consultez notre article de blog Optimiser les images avec la directive d'images Angular.

Nouvelle version de next/image

Nous avons également collaboré avec l'équipe Next.js pour mettre à jour le composant image afin d'utiliser de nouvelles fonctionnalités du navigateur telles que le chargement différé natif et l'attribut HTML fetchpriority. La nouvelle version est disponible par défaut à partir de Next 13.

L'impact : notre partenaire Leboncoin a pu améliorer le LCP de certaines pages jusqu'à 60% en passant à la nouvelle version de next/image.

Polices Web

L'optimisation des polices Web peut s'avérer délicate, car la réduction de la taille de transfert des ressources de police implique davantage de travail. Les polices Web peuvent également contribuer de manière significative à la métrique CLS (Cumulative Layout Shift) d'une page. Réduire les décalages de mise en page dus aux changements de polices demande des efforts considérables. Heureusement, nous nous sommes associés à des frameworks pour que les développeurs Web puissent effectuer cette tâche encore plus facilement.

Outils pour améliorer les remplacements de police dans Next.js, Nuxt et Vite

Nous avons lancé une fonctionnalité dans Next 13 qui permet d'ajuster les dimensions de la police de remplacement d'une page pour mieux s'aligner sur la police Web lors de son chargement. Cela réduit le CLS lié aux polices. Nous avons partagé notre méthodologie avec l'équipe Nuxt, qui est devenue une source d'inspiration pour le module nuxtjs/fontaine et le plug-in fontaine Vite, qui utilisent tous deux le même algorithme sous-jacent.

L'impact: notre partenaire Vox Media a pu réduire le CLS de The Verge à zéro en production sur certaines pages utilisant cette fonctionnalité.

Pour en savoir plus, consultez nos articles de blog sur la génération de nouvelles polices de remplacement améliorées et les outils de framework de police de remplacement.

Module "nuxtjs/google-fonts"

Nous avons collaboré avec l'équipe Nuxt pour publier un module permettant d'optimiser les performances de Google Font. Le module télécharge et héberge automatiquement les polices Google afin d'éviter un aller-retour supplémentaire sur le serveur et prend également en charge les options d'intégration des polices.

Scripts tiers

Le code JavaScript tiers peut être une source potentielle de problèmes de performances et peut affecter des métriques telles que Interaction to Next Paint (INP), car le travail de planification de ces scripts peut retarder l'exécution des interactions des utilisateurs.

Composant next/script pour les scripts tiers

Nous avons créé un composant de script pour Next 12 et versions ultérieures qui charge par défaut les scripts après l'hydratation afin d'éviter de bloquer le chemin critique pendant le chargement. Il comporte également un mode worker Web qui intègre Partytown pour déplacer les scripts hors du thread principal.

L'impact: lors des tests de laboratoire Lighthouse, CareerKarma a constaté une réduction de 24% du LCP en utilisant le next/script component avec le mode Nœud de calcul activé.

Comparaison de bandes de films montrant l'amélioration du LCP

Pour en savoir plus, consultez notre article de blog Optimiser le chargement de scripts tiers dans Next.js.

Divers

Nos partenariats avec les développeurs de frameworks ne se limitent pas à améliorer les métriques Core Web Vitals. Nous nous efforçons également de tirer parti d'un plus grand nombre de nouveautés et de permettre aux développeurs d'utiliser encore plus facilement les fonctionnalités de pointe de la plate-forme Web.

Polyfill des requêtes de conteneur

Nous avons mis à jour le polyfill des requêtes de conteneur pour prendre en charge un plus grand nombre de fonctionnalités CSS et améliorer ses performances, dans le but de proposer la version 1.0.

Pour en savoir plus, consultez notre article de blog Inside the Container Query Polyfill (Au cœur du polyfill de requête du conteneur).

Quelle est la suite pour Aurora ?

En 2023-2024, nous allons lancer un certain nombre de projets passionnants afin d'optimiser les métriques Core Web Vitals pour les développeurs de frameworks.

Au cours de l'année à venir, nous allons nous concentrer sur les points suivants:

  • Composants wrapper tiers pour Next.js et Nuxt: les composants Wrapper peuvent faciliter le chargement des bibliothèques tierces populaires de manière optimale pour LCP et INP. Glissez une balise de composant dans le DOM pour charger votre tiers plutôt qu'un tag de script. Le framework sélectionnera alors la meilleure stratégie de chargement. Pour plus d'informations, consultez le document RFC.

  • Expérience de développement de la restauration rapide et de l'hydratation sur Angular: nous avons travaillé en étroite collaboration avec l'équipe Angular sur le projet dédié à l'hydratation et à la restauration rapide. Nous nous sommes concentrés sur la mise à niveau de l'expérience des développeurs lors de l'utilisation de la technologie SSR, afin de permettre à davantage d'applications de bénéficier des avantages du LCP. Nous vous communiquerons prochainement un RFC officiel sur les fonctionnalités de manipulation DOM SSR.

  • Directive d'image Angular et fonctionnalités nuxt/image: un certain nombre de fonctionnalités intéressantes sont prévues pour Angular, telles que la génération automatique d'indices de préconnexion, des outils de migration pour faciliter la transition depuis les éléments <img> de base, la compatibilité avec les éléments <picture> et les espaces réservés. Nous allons également consulter l'équipe Nuxt au sujet d'un certain nombre de nouvelles fonctionnalités de nuxt/image.

  • Étude sur l'INP (cross-framework): étant donné qu'Interaction to Next Paint (INP) remplacera le First Input Delay (FID) en 2024, nous étendons notre assistance à l'amélioration de l'INP dans les frameworks. Cela impliquera une analyse des causes racines des problèmes d'INP dans les cadres et la création de solutions intégrées pour les utilisateurs du cadre dans la mesure du possible.

  • Speedomètre 3: nous contribuons également à implémenter la nouvelle génération de l'outil d'analyse comparative Speedomètre pour représenter le paysage du framework Web moderne de 2023.

Tenez-vous informé

Ajoutez notre page de destination à vos favoris pour rester informé des dernières actualités, discussions techniques et articles de blog de l'équipe Aurora. Vous pouvez également nous suivre sur Twitter: