La structure Pagespeed de Google, à laquelle nous sommes habitués depuis des années, vise à garantir que les sites Web se chargent et sont servis rapidement. En produisant des paramètres mesurables et en exploitant les données anonymes collectées sur la part de marché de Chrome, Google utilise ces métriques comme indicateurs de référencement. Avec l’introduction d’Interaction to Next Paint (INP) en 2022, l’accent est passé de la simple vitesse de chargement des pages à une perspective plus large de performances Web. INP mesure non seulement la rapidité de chargement d'une page, mais également la rapidité avec laquelle les interactions des utilisateurs sur la page sont traitées. Essentiellement, cela transforme l'expérience de navigation sur le site en une métrique Pagespeed.
Sur le blog de Kerem, le terme « General Interaction Delay » est suggéré comme un bon choix pour ce concept, que Google explique également bien dans sa propre vidéo. Cependant, pour bien comprendre cette métrique, nous approfondirons le sujet dans les sections suivantes.
Quelle est l’explication de la durée INP ?
La durée de l'INP comprend :
- Le temps entre l'interaction de l'utilisateur avec la page et l'exécution du gestionnaire d'événements.
- Le temps d'exécution du script.
- Le temps écoulé entre l'exécution du code et l'affichage de la sortie à l'utilisateur.
Ces processus se produisent généralement en quelques millisecondes, mais sur les appareils mobiles, en particulier les téléphones Android plus anciens dotés d'une faible puissance de processeur, de tels retards (latence) peuvent souvent être perceptibles. Il convient de noter que les données INP, comme les autres données Lighthouse, sont collectées de manière anonyme et évaluées sur la base des 75e centile. L’objectif est donc de créer des applications qui fonctionnent bien sur les appareils moyens plutôt que uniquement sur les appareils haut de gamme.
Exemples concrets de durée INP
Voici quelques exemples concrets tirés des pages Internet que nous visitons quotidiennement pour expliquer ce concept :
Saisir une adresse sur un site de commerce électronique
Lorsque vous magasinez sur un site de commerce électronique et que vous saisissez l'adresse d'expédition, vous sélectionnez d'abord la province. Ensuite, lorsque vous cliquez sur la case de sélection pour choisir le district, vous attendez un moment que le résultat Ajax se charge, et après un certain temps, les informations du district sont chargées. C'est un bon exemple d'INP. Améliorer l'expérience utilisateur dans cet exemple pourrait impliquer l'ajout d'un « indicateur de chargement » pour informer l'utilisateur du processus Ajax.
Sélection de tri
Lors de l'utilisation de filtres sur les pages de liste de produits, si les produits filtrés ne sont pas gérés correctement après avoir cliqué sur une case à cocher, cela augmentera l'INP. L'utilisation de JS moins complexes et la prise en compte de l'expérience utilisateur lors des opérations de filtrage peuvent aider à maintenir la valeur INP aussi élevée que possible.
Galeries de photos de produits
Le temps pendant lequel les utilisateurs attendent que la galerie de photos se charge après avoir cliqué sur une photo de produit sur les pages de détails du produit peut potentiellement affecter l'INP.
Bouton de réservation
Le délai d'interaction entre le clic sur le bouton « Faire une réservation » et la page suivante est un exemple d'INP.
Bouton Ajouter au panier
Les millisecondes de délai lorsque l'on clique sur le bouton "Ajouter au panier" et que l'on se demande si l'article a été ajouté au panier ou non définit parfaitement INP.
Comme le montrent ces exemples, les pièges INP sont présents dans des scénarios affectant à la fois le référencement et les taux de conversion directe.
Comment améliorer l'INP ?
- Utilisez les bibliothèques frontales JS à jour : Améliorer les performances en utilisant des bibliothèques frontales JS modernes telles que Vue, React et Angular est bénéfique car elles offrent des avantages en termes de performances et de réutilisabilité.
- Minimisez la complexité des bibliothèques JS : Il est conseillé d'utiliser des bibliothèques JS moins complexes. Personnellement, je recommande d'éviter autant que possible jQuery.
Niveaux métriques INP acceptables
Les valeurs seuils pour Les niveaux d'INP bons, moyens et mauvais sont de 200 millisecondes et 500 millisecondes.. Maintenir l'INP en dessous de ces seuils est crucial pour maintenir une bonne expérience utilisateur et des performances Web globales.
