Découvrez comment la nouvelle métrique INP affecte l'expérience des sites créés à l'aide de frameworks et de bibliothèques JavaScript.
Chrome a récemment lancé une nouvelle métrique expérimentale de réactivité dans le rapport d'expérience utilisateur Chrome. Cette métrique, désormais appelée Interaction to Next Paint (INP), mesure la réactivité globale aux interactions des utilisateurs sur la page. Aujourd'hui, nous souhaitons vous donner des informations sur la position des sites Web créés à l'aide de frameworks JavaScript modernes par rapport à cette métrique. Nous allons vous expliquer pourquoi l'INP est pertinent pour les frameworks et comment Aurora et les frameworks travaillent pour optimiser la réactivité.
Contexte
Chrome utilise le délai avant la première entrée (FID) dans les 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 associés à l'interaction. Elle 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 de la page, car les utilisateurs passent environ 90% du temps sur une page après son chargement.
La métrique INP mesure le temps nécessaire à une page Web pour répondre aux interactions des utilisateurs, du moment où l'utilisateur commence l'interaction jusqu'au moment où le frame suivant est peint à l'écran. Avec l'INP, nous espérons pouvoir mesurer de manière globale la latence perçue de toutes les interactions au cours du cycle de vie de la page. Nous pensons que l'INP fournira une estimation plus précise de la charge et de la réactivité des pages Web au moment de l'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 métrique CWV. Les sites, en particulier ceux qui présentent un niveau d'interactivité élevé, devront donc s'efforcer de bien faire pour obtenir un bon score sur cette métrique.
Rôle des frameworks
Étant donné que de nombreux sites Web s'appuient sur JavaScript pour fournir de l'interactivité, le score INP est principalement affecté par la quantité de code JavaScript traitée sur le thread principal. Les frameworks JavaScript constituent une partie essentielle du développement Web front-end moderne. Ils fournissent aux développeurs des abstractions précieuses 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 le FID des sites Web plus tôt. Toutefois, il doit maintenant analyser les données de métrique de réactivité disponibles et s'efforcer de combler les lacunes identifiées. En général, les taux de réussite des INP sont inférieurs, et la différence dans le processus de mesure nécessite une optimisation supplémentaire du code. Le tableau suivant récapitule les raisons.
L'équipe Aurora de Chrome travaille avec des frameworks Web Open Source pour aider les développeurs à améliorer différents aspects de l'expérience utilisateur, y compris les performances et les métriques CWV. Avec l'introduction de l'INP, nous souhaitons nous préparer au changement 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 de réactivité expérimentale dans les rapports CrUX. Nous vous communiquerons des insights et des actions à entreprendre pour faciliter la transition vers la métrique INP pour les sites Web basés sur un framework.
Données de métrique de réactivité expérimentale
Un INP inférieur ou égal à 200 ms 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é des frameworks JavaScript populaires.
Le tableau indique le pourcentage d'origines sur chaque framework avec un bon score de réactivité. Ces chiffres sont encourageants, mais nous indiquent qu'il y a encore beaucoup à faire.
En quoi JavaScript affecte-t-il l'INP ?
Les valeurs INP sur le terrain sont bien corrélées au temps de blocage total (TBT) observé en laboratoire. Cela pourrait impliquer que tout script qui bloque le thread principal pendant une longue durée serait mauvais pour l'INP. Une exécution JavaScript intensive après une interaction peut bloquer le thread principal pendant une longue période et retarder la réponse à cette interaction. Voici quelques-unes des causes courantes de blocage des scripts:
JavaScript non optimisé:le code redondant ou les stratégies de fractionnement et de chargement du code inefficaces peuvent entraîner un gonflement du code JavaScript et bloquer le thread principal pendant de longues périodes. Le fractionnement du code, le chargement progressif et le fractionnement des tâches longues peuvent considérablement améliorer les temps de réponse.
Scripts tiers:les scripts tiers, qui ne sont parfois pas nécessaires pour traiter une interaction (par exemple, les scripts d'annonces), peuvent bloquer le thread principal et entraîner des retards inutiles. Prioriser les scripts essentiels peut contribuer à 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 entraîner de longs délais. Certaines de ces tâches peuvent être non essentielles et peuvent être planifiées sur un worker Web ou lorsque le navigateur est inactif.
Surcharge du framework sur la gestion des événements:les frameworks peuvent disposer de fonctionnalités/syntaxes supplémentaires pour la gestion des événements. Par exemple, Vue utilise v-on pour associer des écouteurs d'événements à des éléments, tandis qu'Angular encapsule les gestionnaires d'événements utilisateur. L'implémentation de ces fonctionnalités nécessite du code de framework supplémentaire en plus du code JavaScript standard.
Hydratation:lorsqu'un framework JavaScript est utilisé, il n'est pas rare qu'un serveur génère le code HTML initial d'une page, qui doit ensuite être complété par des gestionnaires d'événements et l'état de l'application afin qu'elle puisse être interactive dans un navigateur Web. Ce processus est appelé "hydratation". Ce processus peut être lourd lors du chargement, en fonction du temps de chargement du code JavaScript et de l'hydratation. Cela peut également donner l'impression que les pages sont interactives alors qu'elles ne le sont pas. L'hydratation se produit souvent automatiquement lors du chargement de la page ou de manière paresseuse (par exemple, lors de l'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 exploiter
useTransitionpour qu'une partie du rendu d'un composant se trouve dans le frame suivant et que les effets secondaires plus coûteux soient laissés aux futurs frames. Par conséquent, les mises à jour en transition qui donnent lieu à des mises à jour plus urgentes, comme les clics, peuvent être un bon modèle pour l'INP.Préchargement:le préchargement agressif des ressources nécessaires aux navigations ultérieures peut améliorer les performances si vous le faites correctement. Toutefois, si vous préchargez et affichez les routes SPA de manière synchrone, vous risquez d'avoir un impact négatif sur l'INP, car tout ce rendu coûteux tente d'être effectué dans un seul frame. Comparez cela à l'absence de préchargement de votre parcours et au lancement du travail nécessaire (par exemple,
fetch()) et au déblocage de la peinture. Nous vous recommandons de réexaminer si l'approche de préchargement de votre framework offre une expérience utilisateur optimale et comment (le cas échéant) cela peut avoir un impact 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 de taille de chaque mise à jour de render(). Cela concerne les scripts propriétaires et tiers.
Comment Aurora et les frameworks résolvent-ils les problèmes d'INP ?
Aurora fonctionne avec des frameworks en intégrant les bonnes pratiques pour fournir des solutions intégrées aux problèmes courants. Nous avons travaillé avec Next.js, Nuxt.js, Gatsby et Angular sur des solutions qui offrent des valeurs par défaut solides dans le framework pour optimiser les performances. Voici les points forts de notre travail dans ce contexte:
React et Next.js:le composant Script Next.js permet de résoudre les problèmes causés par un chargement inefficace des scripts tiers. Le segmentation granulaire a été introduit dans Next.js pour permettre de créer des blocs plus petits pour le code partagé. Cela permet de réduire la quantité de code commun inutilisé téléchargé sur toutes les pages. Nous collaborons également avec Next.js pour mettre à disposition les données INP dans le cadre de son service Analytics.
Angular:Aurora collabore avec l'équipe Angular pour explorer les améliorations du rendu côté serveur et de l'hydratation. Nous prévoyons également d'améliorer la gestion des événements et la détection des modifications pour améliorer l'INP.
Vue et Nuxt.js:nous explorons des pistes de collaboration, principalement en ce qui concerne le chargement et l'affichage des scripts.
Comment les frameworks envisagent-ils d'améliorer l'INP ?
React et Next.js
Le fractionnement temporel 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 est effectué en petits segments qui peuvent être interrompus à tout moment.
Cela devrait améliorer l'INP et vous permettre de répondre plus rapidement aux frappes, aux effets de survol pendant la transition et aux clics. Il permet également de maintenir la réactivité des applications React, même pour de grandes transitions 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 route. Cela permet aux propriétaires de sites Next.js d'adopter le découpage temporel React et d'améliorer la réactivité des transitions de route.
Angular
L'équipe Angular explore plusieurs idées qui devraient également aider à résoudre les problèmes d'INP:
- Sans zone:réduit la taille de l'app bundle initial et le code requis qui doit être chargé avant qu'une application puisse afficher quoi que ce soit.
- Hydratation:hydratation par îlots pour limiter la partie de l'application qui doit être réveillée pour l'interaction.
- Réduire les coûts liés à la gestion des versions:par exemple, rendre la détection des modifications moins coûteuse, trouver des moyens de vérifier moins de l'application et exploiter les signaux réactifs sur les modifications.
- Division du code plus précise:réduisez la taille du bundle initial.
- Meilleure prise en charge des indicateurs de chargement : par exemple, lors du rendu de SSR, de la navigation par itinéraire et des opérations de chargement différé.
- Outils de profilage:meilleurs outils de développement pour comprendre le coût des interactions, en particulier 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 entraînent une mauvaise réactivité et une mauvaise 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 nous attendons à ce que le score INP permette aux sites Web d'améliorer leur réactivité et leurs performances à l'avenir. Nous nous appuierons sur notre guide existant sur les INP pour fournir des conseils plus pratiques aux développeurs de frameworks en 2023. Pour y parvenir, nous allons:
- Créer des canaux pour un accès facile aux données de terrain sur l'INP pour les frameworks et les développeurs Web.
- Utilisez des frameworks pour créer des fonctionnalités qui amélioreront l'INP par défaut.
Nous accueillons les commentaires des utilisateurs du framework lorsqu'ils commencent leur parcours d'optimisation des fiches produit.