Découvrez comment la nouvelle métrique INP affecte l'expérience des sites créés à l'aide de bibliothèques et de frameworks JavaScript.
Chrome a récemment lancé une nouvelle métrique de réactivité expérimentale dans le rapport UX 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 partager des insights sur la position des sites Web créés à l'aide de frameworks JavaScript modernes par rapport à cette métrique. Nous allons voir en quoi INP est pertinent pour les frameworks, et comment Aurora et les frameworks optimisent la réactivité.
Contexte
Chrome utilise le FID (First Input Delay) dans le cadre des Core Web Vitals (CWV) pour mesurer la réactivité au 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 ou peindre le frame suivant après l'exécution des rappels d'événements. Cependant, la réactivité est essentielle pour l'expérience utilisateur tout au long du cycle de vie de la 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 frame suivant apparaît à l'écran. Avec INP, nous espérons permettre une mesure globale de la latence perçue de toutes les interactions dans le cycle de vie de la page. Nous pensons que INP fournira une estimation plus précise du chargement des pages Web et de leur réactivité 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é les interactions suivantes de manière proactive dans le cadre de leur processus d'amélioration des métriques Core Web Vitals. Les sites, en particulier ceux qui présentent un fort degré d'interactivité, devront donc s'efforcer d'obtenir de bons résultats pour 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 dans le thread principal. Les frameworks JavaScript sont un élément essentiel du développement Web d'interface 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 ont peut-être pris des mesures pour améliorer la réactivité en améliorant le FID pour les sites Web plus tôt. 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, l'INP a tendance à avoir des taux de réussite plus faibles, et la différence au niveau du processus de mesure nécessite une optimisation supplémentaire du code. Le tableau suivant résume pourquoi.
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 Core Web Vitals. Avec le lancement d'INP, nous souhaitons nous préparer à l'évolution des métriques CWV pour les sites Web basés sur un framework. Nous avons collecté des données basées sur la métrique de réactivité expérimentale dans les rapports CrUX. Nous partagerons des idées et des mesures à prendre pour faciliter la transition vers la métrique INP pour les sites Web basés sur des cadres.
Données expérimentales de métriques de réactivité
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é pour les frameworks JavaScript les plus courants.
Le tableau indique le pourcentage d'origines pour chaque framework ayant un bon score de réactivité. Les chiffres sont encourageants, mais indiquent qu'il y a beaucoup de marge de progression.
Comment JavaScript affecte-t-il INP ?
Les valeurs INP du champ correspondent bien au temps total de blocage (TBT) observé dans l'atelier. Cela peut signifier que tout script qui bloque le thread principal pendant une longue durée est nuisible à INP. Une exécution JavaScript intensive 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 qui peuvent entraîner le blocage de scripts:
JavaScript non optimisé:un code redondant ou de mauvaises stratégies de chargement et de division du code peuvent entraîner une surcharge du code JavaScript et bloquer le thread principal pendant de longues périodes. La division du code, le chargement progressif et la décomposition de longues tâches 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 fil de discussion principal et provoquer des retards inutiles. Donner la priorité aux scripts essentiels peut vous aider à 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, pourraient interférer les uns avec les autres et s'additionner et entraîner de longs retards. Il est possible que certaines de ces tâches ne soient pas essentielles et puissent être planifiées par un collaborateur Web ou lorsque le navigateur est inactif.
Frais liés au framework sur la gestion des événements:les frameworks peuvent comporter des fonctionnalités/syntaxes 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 au-dessus du code JavaScript vanilla.
Hydration:dans le cadre d'un framework JavaScript, il n'est pas rare qu'un serveur génère le code HTML initial d'une page. Vous devez ensuite l'ajouter à des gestionnaires d'événements et à l'état de l'application pour qu'elle puisse être interactive dans un navigateur Web. C'est ce que nous appelons l'hydratation. Ce processus peut être long lors du chargement, en fonction du temps de chargement de JavaScript et de l'hydratation. Cela peut également donner l'impression que les pages 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 les bibliothèques telles que React, vous pouvez exploiter
useTransitionpour qu'une partie du rendu d'un composant se trouve dans l'image suivante et que tout effet secondaire plus coûteux soit laissé aux images suivantes. C'est pourquoi les mises à jour lors d'une transition qui donnent lieu à des informations plus urgentes (clics, par exemple) peuvent être une bonne pratique pour l'INP.Préchargement:le préchargement agressif des ressources nécessaires pour les navigations ultérieures peut améliorer les performances lorsqu'il est bien effectué. Toutefois, si vous préchargez et affichez les routes SPA de manière synchrone, vous pouvez avoir un impact négatif sur l'INP, car toutes ces tentatives de rendu coûteuses sont effectuées dans une seule image. Par opposition, le fait de ne pas précharger votre itinéraire, mais de lancer le travail nécessaire (par exemple,
fetch()) et de débloquer le tableau. Nous vous recommandons de vérifier si l'approche de préchargement de votre framework offre une expérience utilisateur optimale et si cela peut avoir un impact sur l'INP (le cas échéant).
À partir de maintenant, 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 segmentation, de réhydratation, de chargement et la taille de chaque mise à jour render() pour les scripts propriétaires et tiers.
Comment Aurora et les cadres traitent-ils les problèmes liés à l'INP ?
Aurora fonctionne avec des cadres en intégrant les meilleures 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 qui offrent de solides valeurs par défaut dans le framework, permettant d'optimiser les performances. Voici les points clés 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. La segmentation précise a été introduite dans Next.js afin de permettre des fragments plus petits pour le code partagé. Cela permet de réduire la quantité de code commun inutilisé qui est téléchargé sur toutes les pages. Nous collaborons également avec Next.js pour rendre les données INP disponibles dans le cadre de son service Analytics.
Angular:Aurora collabore avec l'équipe Angular pour étudier les améliorations apportées au rendu côté serveur et à l'hydratation. Nous prévoyons également d'affiner la gestion des événements et la détection des modifications afin d'améliorer l'INP.
Vue et Nuxt.js:nous étudions de nouvelles possibilités de collaboration, principalement en ce qui concerne le chargement et l'affichage des scripts.
Comment les cadres envisagent-ils d'améliorer l'INP ?
React et Next.js
La tranche temporelle dans React.js, implémentée 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. Elle se fait en petites tranches
qui peuvent être interrompues à tout moment.
Cela devrait vous aider à améliorer INP et à réagir plus rapidement aux frappes de touches, aux effets de survol pendant la transition et aux clics. Cela permet également de maintenir la réactivité des applications React, même pour les transitions importantes, comme la saisie semi-automatique.
Next.js a implémenté un nouveau framework de routage qui utilise startTransition par défaut pour les transitions de routage. Les propriétaires de sites Next.js peuvent ainsi adopter la segmentation de temps dans React et améliorer la réactivité des transitions de routes.
Angular
L'équipe Angular étudie actuellement plusieurs idées qui devraient également aider INP:
- Sans zone:permet de réduire la taille initiale du bundle et le code requis qui doit se charger pour qu'une application puisse afficher quoi que ce soit.
- Hydration:utilisez ce mode d'hydratation de style insulaire afin de limiter le temps d'activation de l'application pour permettre l'interaction.
- Réduisez les 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 limiter les vérifications de l'application et exploitez des signaux réactifs sur les modifications apportées.
- Répartition plus précise du code:réduisez la taille du groupe initial.
- Meilleure compatibilité avec les indicateurs de chargement : par exemple, lors du rerendu SSR, pendant la navigation sur les itinéraires et lors des opérations de chargement différé.
- Outils de profilage:meilleurs outils de développement pour comprendre le coût des interactions, en particulier celui de la détection des modifications pour des interactions spécifiques.
Grâce à ces améliorations, nous pouvons résoudre différents problèmes entraînant une mauvaise réactivité et une mauvaise expérience utilisateur, et améliorer les métriques "Signaux Web essentiels" et la nouvelle métrique INP pour les sites Web basés sur des infrastructures.
Conclusion
Le score INP devrait permettre aux sites Web d'améliorer leur réactivité et leurs performances à l'avenir. Nous nous appuierons sur notre guide INP existant pour fournir des conseils plus pratiques aux développeurs de frameworks en 2023. Nous espérons y parvenir en:
- Création de canaux pour un accès facile aux données de 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 des commentaires des utilisateurs du framework au début de leur parcours d'optimisation INP.