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: