Quoi de neuf avec Aurora ?

Kara Erickson
Kara Erickson
X

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

Nous n'avons pas publié de feuille de route depuis 2021. Nous souhaitons donc vous faire part de nos activités et de certains projets passionnants que nous avons prévus pour 2023.

Temps forts récents des projets

Depuis quelques années, nous collaborons avec des frameworks comme Next.js, Angular et Nuxt pour optimiser les Core Web Vitals. Voici quelques-unes des nouveautés depuis notre dernière mise à jour.

Images

Les images sont souvent une source de problèmes de performances. Voici quelques-unes des méthodes que nous avons mises en œuvre avec les personnes concernées par les frameworks pour nous assurer que les bonnes pratiques sont disponibles dès le départ, afin que les développeurs fournissent des images optimales par défaut lorsqu'ils utilisent les frameworks avec lesquels nous collaborons.

Directive d'image angulaire

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.

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

Comparaison de la pellicule: site Web 1 avec des balises d'image natives par rapport au 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'image Angular.

next/image remanié

Nous avons également travaillé avec l'équipe Next.js pour mettre à jour le composant Image afin qu'il utilise de nouvelles fonctionnalités de navigateur, comme le chargement paresseux natif et l'attribut HTML fetchpriority. La nouvelle version est disponible par défaut à partir de Next 13.

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 être difficile à mettre en œuvre, car elle implique plus que la réduction de la taille de transfert des ressources de police. Les polices Web peuvent également contribuer de manière significative à la métrique CLS (Cumulative Layout Shift) d'une page. La minimisation des décalages de mise en page dus aux changements de police nécessite des efforts considérables. Heureusement, nous avons établi des partenariats avec des frameworks pour faciliter encore plus cette tâche pour les développeurs Web.

Outils pour améliorer les polices de remplacement dans Next.js, Nuxt et Vite

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

Impact: Notre partenaire Vox Media a pu réduire le CLS sur The Verge à 0 en production sur certaines pages grâce à cette fonctionnalité.

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

Module "nuxtjs/google-fonts"

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

Scripts tiers

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

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 pour éviter de bloquer le chemin critique lors du chargement. Il propose également un mode de worker Web qui intègre Partytown pour déplacer complètement les scripts du thread principal.

Impact: Lors des tests en laboratoire Lighthouse, CareerKarma a constaté une réduction de 24% du LCP en utilisant next/script component avec le mode worker activé.

Comparaison de pellicules montrant une 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 à l'amélioration des Core Web Vitals. Nous nous efforçons également de tirer davantage parti des nouveautés et de permettre aux développeurs de commencer à utiliser les fonctionnalités de pointe de la plate-forme Web encore plus facilement.

Polyfill des requêtes de conteneur

Nous avons mis à jour le polyfill des requêtes de conteneur pour qu'il prenne en charge un plus grand nombre de fonctionnalités CSS et amélioré ses performances, en vue de sa version 1.0.

Pour en savoir plus, consultez notre article de blog Inside the Container Query Polyfill (Prise en charge de la requête de conteneur).

Quel est l'avenir d'Aurora ?

En 2023-2024, nous allons lancer plusieurs projets passionnants visant à optimiser les métriques Core Web Vitals pour les développeurs de frameworks.

L'année prochaine, nous allons nous concentrer sur les points suivants:

  • Composants de wrapper tiers pour Next.js et Nuxt: les composants de wrapper peuvent faciliter le chargement de bibliothèques tierces populaires de manière optimale pour le LCP et l'INP. Déposez une balise de composant dans le DOM pour charger votre tiers au lieu d'une balise de script. Le framework sélectionnera la meilleure stratégie de chargement. Pour en savoir plus, consultez la RFC.

  • Expérience de développement du SSR et de l'hydratation Angular: nous avons travaillé en étroite collaboration avec l'équipe Angular sur le projet SSR et hydratation. Notre objectif a été d'améliorer l'expérience des développeurs qui utilisent le SSR, afin de permettre à davantage d'applications de profiter des avantages du LCP. Nous vous tiendrons informé d'un RFC officiel concernant les fonctionnalités de manipulation du DOM SSR.

  • Directive d'image Angular et fonctionnalités nuxt/image: nous avons prévu un certain nombre de fonctionnalités intéressantes 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 prise en charge des éléments <picture> et les espaces réservés. Nous allons également consulter l'équipe Nuxt sur un certain nombre de nouvelles fonctionnalités pour nuxt/image.

  • Recherches sur l'INP (multi-framework): comme l'Interaction to Next Paint (INP) remplacera le First Input Delay (FID) en 2024, nous renforçons notre assistance pour améliorer l'INP dans les frameworks. Cela implique d'analyser les causes profondes des problèmes d'INP dans les frameworks et de créer des solutions intégrées pour les utilisateurs de ces frameworks, si possible.

  • Speedometer 3: nous aidons également à implémenter la prochaine génération de l'outil de benchmarking Speedometer pour représenter le paysage des frameworks Web modernes en 2023.

Tenez-vous au courant

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