Comprenez comment la nouvelle métrique INP affecte l'expérience des sites conçus à l'aide de frameworks et de bibliothèques JavaScript.
Chrome a récemment ajouté une nouvelle métrique de réactivité expérimentale dans le rapport d'expérience utilisateur Chrome. Cette métrique, désormais connue sous le nom d'Interaction to Next Paint (INP), mesure la réactivité globale aux interactions des utilisateurs sur la page. Aujourd'hui, nous souhaitons vous indiquer où se situent les sites Web créés à l'aide de frameworks JavaScript modernes par rapport à cette métrique. Nous souhaitons expliquer pourquoi INP est pertinent pour les frameworks, et comment Aurora et les frameworks travaillent-ils pour optimiser la réactivité.
Contexte
Chrome utilise le FID (First Input Delay) dans le cadre des Core Web Vitals (CWV) pour mesurer la réactivité de chargement des sites Web. Le FID mesure le temps d'attente entre la première interaction de l'utilisateur et le moment où le navigateur est en mesure de traiter les gestionnaires d'événements connectés à l'interaction. Il n'inclut pas le temps nécessaire pour traiter les gestionnaires d'événements, traiter les interactions ultérieures sur la même page ni peindre le frame suivant après l'exécution des rappels d'événement. Cependant, la réactivité est cruciale pour l'expérience utilisateur tout au long du cycle de vie d'une page, car les utilisateurs passent environ 90% de leur temps sur une page après son chargement.
INP mesure le temps nécessaire à une page Web pour répondre aux interactions de l'utilisateur entre le moment où celui-ci commence l'interaction et le moment où le cadre suivant est affiché à l'écran. Avec INP, nous espérons permettre une mesure globale de la latence perçue de toutes les interactions au cours du cycle de vie d'une page. Nous pensons qu'INP fournira une estimation plus précise des performances des pages Web et la réactivité de l'environnement d'exécution.
Étant donné que le FID ne mesure que le délai d'entrée de la première interaction, il est probable que les développeurs Web n'aient pas optimisé de manière proactive les interactions ultérieures dans le cadre de leur processus d'amélioration de la VWV. Les sites, en particulier ceux qui présentent un degré élevé d'interactivité, devraient donc commencer à travailler dur pour obtenir de bons résultats sur cette métrique.
Le rôle des cadres
Étant donné que de nombreux sites Web s'appuient sur JavaScript pour assurer l'interactivité, le score INP serait principalement affecté par la quantité de JavaScript traitée sur le thread principal. Les frameworks JavaScript sont un élément essentiel du développement Web front-end moderne. Ils fournissent aux développeurs des abstractions utiles pour le routage, la gestion des événements et la compartimentation du code JavaScript. Ils jouent donc un rôle central dans l'optimisation de la réactivité et de l'expérience utilisateur des sites Web qui les utilisent.
Les frameworks peuvent avoir pris des mesures pour améliorer la réactivité en améliorant plus tôt le FID des sites Web. Cependant, elle doit maintenant analyser les données disponibles sur les métriques de réactivité et s’efforcer de combler les lacunes identifiées. En général, INP a tendance à avoir des taux de réussite inférieurs et la différence dans le processus de mesure nécessite une optimisation du code supplémentaire. Le tableau suivant résume pourquoi.
L'équipe Aurora pour Chrome utilise des frameworks Web Open Source pour aider les développeurs à améliorer différents aspects de l'expérience utilisateur, y compris les métriques de performances et de CWV. Avec le lancement d'INP, nous voulons nous préparer à l'évolution des métriques CWV pour les sites Web basés sur des frameworks. Nous avons collecté des données basées sur la métrique expérimentale de réactivité dans les rapports d'expérience utilisateur Chrome. Nous partagerons des informations et des mesures à prendre pour faciliter la transition vers la métrique INP pour les sites Web basés sur un framework.
Données de métriques de réactivité expérimentales
Un INP inférieur ou égal à 200 millisecondes indique une bonne réactivité. Les données du rapport CrUX et le rapport sur la technologie CWV de juin 2023 nous fournissent les informations suivantes sur la réactivité dans les frameworks JavaScript courants.
Le tableau indique le pourcentage d'origines ayant un bon score de réactivité pour chaque framework. Les chiffres sont encourageants, mais ils peuvent être améliorés.
Comment JavaScript affecte-t-il INP ?
Les valeurs INP dans le champ correspondent bien au temps total de blocage observé dans l'atelier. Cela peut impliquer que tout script qui bloque le thread principal pendant une longue durée serait mauvais pour INP. Une exécution intensive de JavaScript après n'importe quelle interaction peut bloquer le thread principal pendant une période prolongée et retarder la réponse à cette interaction. Voici quelques-unes des causes les plus courantes de blocage des scripts:
JavaScript non optimisé:du code redondant ou de mauvaises stratégies de division et de chargement du code peuvent surcharger JavaScript et bloquer le thread principal pendant de longues périodes. La division du code, le chargement progressif et la scission des longues tâches peuvent améliorer considérablement les temps de réponse.
Scripts tiers:les scripts tiers, qui ne sont parfois pas nécessaires au traitement d'une interaction (par exemple, les scripts d'annonces), peuvent bloquer le thread principal et provoquer des retards inutiles. En donnant la priorité aux scripts essentiels, vous pouvez réduire l'impact négatif des scripts tiers.
Plusieurs gestionnaires d'événements:plusieurs gestionnaires d'événements associés à chaque interaction, chacun exécutant un script différent, peuvent interférer les uns avec les autres et s'additionner, ce qui peut entraîner de longs délais. Certaines de ces tâches peuvent ne pas être essentielles et être planifiées sur un nœud de calcul Web ou lorsque le navigateur est inactif.
Surcharge du framework pour la gestion des événements:les frameworks peuvent comporter des fonctionnalités ou une syntaxe supplémentaires pour la gestion des événements. Par exemple, Vue utilise v-on pour associer des écouteurs d'événements aux éléments, tandis qu'Angular encapsule les gestionnaires d'événements utilisateur. L'implémentation de ces fonctionnalités nécessite un code de framework supplémentaire par rapport à vanilla JavaScript.
Hydation:lorsqu'un framework JavaScript est utilisé, il n'est pas rare qu'un serveur génère le code HTML initial d'une page. Il faut ensuite y ajouter des gestionnaires d'événements et l'état de l'application afin qu'elle puisse être interactive dans un navigateur Web. C'est ce que nous appelons l'hydratation du processus. Ce processus peut être lourd lors du chargement, en fonction du temps que met JavaScript à charger et du temps nécessaire à l'hydratation pour se terminer. Cela peut également conduire à des pages qui semblent interactives alors qu'elles ne le sont pas. Souvent, l'hydratation se produit automatiquement lors du chargement de la page ou de manière différée (par exemple, lors d'une interaction de l'utilisateur) et peut avoir un impact sur l'INP ou le temps de traitement en raison de la planification des tâches. Dans des bibliothèques telles que React, vous pouvez utiliser
useTransitionpour qu'une partie du rendu d'un composant se trouve dans l'image suivante et que tous les effets secondaires plus coûteux soient laissés aux futurs frames. Par conséquent, les mises à jour lors d'une transition qui donnent lieu à des mises à jour plus urgentes comme les clics peuvent être une bonne tendance pour INP.Préchargement:le préchargement agressif des ressources nécessaires pour les navigations suivantes peut améliorer les performances s'il est correctement effectué. Toutefois, si vous préchargez et affichez les routes SPA de manière synchrone, vous risquez d'avoir un impact négatif sur INP, car tout ce rendu coûteux tente de s'effectuer dans une seule image. Comparez cela au fait de ne pas précharger votre itinéraire, mais plutôt de lancer le travail nécessaire (par exemple,
fetch()) et de débloquer la peinture. Nous vous recommandons de vérifier à nouveau si l'approche de votre framework en matière de préchargement permet d'optimiser l'expérience utilisateur et l'impact (le cas échéant) sur l'INP.
Désormais, pour obtenir un bon score INP, les développeurs devront se concentrer sur l'examen du code qui s'exécute après chaque interaction sur la page et optimiser leurs stratégies de fragmentation, de réhydratation, de chargement et la taille de chaque mise à jour de get() pour les scripts propriétaires et tiers.
Comment Aurora et les frameworks traitent-ils les problèmes INP ?
Aurora utilise des frameworks en intégrant les bonnes pratiques pour fournir des solutions intégrées aux problèmes courants. Nous avons collaboré avec Next.js, Nuxt.js, Gatsby et Angular sur des solutions offrant d'excellentes valeurs par défaut dans le framework pour optimiser les performances. Voici les points clés de notre travail dans ce contexte:
React et Next.js:le composant de script Next.js permet de résoudre les problèmes causés par le chargement inefficace des scripts tiers. La segmentation précise a été introduite dans Next.js pour permettre l'utilisation de fragments plus petits pour le code partagé. Cela permet de réduire la quantité de code commun inutilisé téléchargé sur l'ensemble des pages. Nous collaborons également avec Next.js pour que les données INP soient disponibles dans le service Analytics.
Angular:Aurora s'associe à l'équipe Angular pour explorer les améliorations apportées au rendu côté serveur et à l'hydratation. Nous prévoyons également d'affiner le traitement des événements et la détection des modifications afin d'améliorer INP.
Vue et Nuxt.js:nous étudions des possibilités de collaboration, principalement pour le chargement et l'affichage de scripts.
Comment les cadres envisagent-ils d'améliorer l'INP ?
React et Next.js
Le segment temporel de React.js, implémenté via startTransition et Suspense, vous permet d'activer l'hydratation sélective ou progressive. Cela signifie que l'hydratation n'est pas un bloc synchrone. Il se fait par petites tranches qui
peuvent être interrompues à tout moment.
Cela devrait contribuer à améliorer INP et vous permettre de réagir plus rapidement aux frappes au clavier, aux effets de survol pendant la transition et aux clics. Il est également utile de faire en sorte que les applications React restent réactives même pour les transitions de grande envergure telles que la saisie semi-automatique.
Next.js a implémenté un nouveau framework de routage qui utilise startTransition par défaut pour les transitions de routes. Cela permet aux propriétaires de sites Next.js d'adopter la fonctionnalité de découpage temporelle React et d'améliorer la réactivité des transitions de routes.
Angular
L'équipe Angular étudie plusieurs idées qui devraient également aider à INP:
- Sans zone:réduit la taille du bundle initial et le code requis qui doit se charger pour qu'une application puisse afficher quoi que ce soit.
- Hydratation:hydratation de type insulaire afin de limiter l'activation de l'application pour permettre une interaction.
- Réduction des frais généraux liés à la CD:par exemple, réduisez le coût de la détection des modifications, trouvez des moyens de réduire le niveau de vérification de l'application et exploitez des signaux réactifs concernant les modifications apportées.
- Division du code plus précise:réduisez la taille du groupe initial.
- Meilleure compatibilité avec les indicateurs de chargement : par exemple, lors du réaffichage du rendu côté serveur, pendant la navigation sur l'itinéraire et lors des opérations de chargement différé.
- Outils de profilage:meilleurs outils de développement pour comprendre les coûts d'interaction, en particulier concernant le coût de détection des modifications pour des interactions spécifiques.
Grâce à ces améliorations, nous pouvons résoudre différents problèmes qui nuisent à la réactivité et à l'expérience utilisateur, et améliorer les métriques CWV et la nouvelle métrique INP pour les sites Web basés sur des frameworks.
Conclusion
Nous espérons que le score INP fournira une meilleure boussole pour les sites Web afin d’améliorer la réactivité et les performances à l’avenir. Nous nous appuierons sur notre guide INP existant pour fournir des conseils plus pratiques aux développeurs de framework en 2023. Pour y parvenir, nous espérons:
- Création de canaux pour un accès facile aux données du terrain sur INP pour les frameworks et les développeurs Web.
- Travailler avec des frameworks pour créer des fonctionnalités qui amélioreront INP par défaut.
N'hésitez pas à nous faire part de commentaires des utilisateurs du framework lorsqu'ils commencent leur parcours d'optimisation INP.