Interaction avec Next Paint : qu’est-ce que c’est et comment le faire ?

Avez-vous déjà rencontré un site Web ou une application lent et qui ne répond pas ?

Peut-être avez-vous cliqué sur un bouton et il a fallu beaucoup de temps pour que quelque chose apparaisse à l'écran. C'est une expérience frustrante, n'est-ce pas ?

C’est exactement ce qu’est «Interaction avec Next Paint» (INP).

L'interaction avec Next Paint (INP) est une mesure émergente que Google utilise pour évaluer la rapidité avec laquelle votre site Web répond aux entrées des utilisateurs. Le 12 mars 2024, il est devenu l'un des critères Core Web Vitals qui ont un impact sur les classements Google.

Pourquoi est-ce important ?

À l’ère numérique d’aujourd’hui, les gens s’attendent à ce que les choses se produisent instantanément. Si un site Web ou une application ne répond pas rapidement à vos actions, vous deviendrez probablement insatisfait et quitterez. De nos jours, personne n’a le temps d’utiliser des applications lentes !

L'optimisation de l'INP est cruciale pour offrir une expérience utilisateur transparente et agréable qui maintient les utilisateurs engagés et satisfaits. Plus l’INP est bas, plus les performances perçues de votre site Web ou de votre application sont élevées.

Examinons l'INP en profondeur et explorons comment le mesurer pour améliorer votre score existant.

Qu’est-ce que l’interaction avec Next Paint (INP) ?

L'interaction avec Next Paint (INP) est une mesure de performances Web qui compte le temps entre une interaction utilisateur (comme un clic, une pression ou un défilement) et la prochaine fois que des pixels sont peints sur l'écran à la suite de cette interaction.

En termes simples, INP mesure la rapidité avec laquelle une page Web ou une application répond visiblement à l'interaction de l'utilisateur. Un nombre INP inférieur indique une expérience plus réactive, tandis qu'une valeur INP plus élevée indique un délai notable entre l'action de l'utilisateur et la mise à jour visuelle à l'écran.

Pour la plupart des interactions utilisateur, la valeur INP suggérée est inférieure à 200 millisecondes (ms). Une valeur INP supérieure à 300 ms est considérée comme faible et sera considérée comme lente par les utilisateurs

Interaction avec Next Paint en tant qu'élément essentiel du Web

L'interaction avec Next Paint a été introduite comme l'une des trois m��triques Google Core Web Vitals le 12 mars 2024. Elle a remplacé la précédente métrique First Input Delay.

En tant que métrique Core Web Vitals, une mauvaise interaction avec Next Paint peut influencer votre classement dans les recherches Google.

En quoi l'interaction avec la peinture suivante diffère-t-elle du premier délai d'entrée ?

INP est la mesure qui succède au First Input Delay (FID). Les deux sont des mesures de réactivité.

FID et INP varient de deux manières :

• FID ne mesure que le premier délai de traitement, tandis que INP mesure toute la durée entre la saisie de l'utilisateur et la mise à jour de l'interface utilisateur.
• FID compte simplement l'interaction initiale de l'utilisateur sur une page, mais INP considère (approximativement) la plus grande latence.

Le délai de première entrée estime le temps nécessaire au navigateur pour commencer à traiter les entrées de l'utilisateur. Le temps réel passé à répondre aux événements ou à modifier l'interface utilisateur n'est pas inclus.

Comme son nom l'indique, FID analyse uniquement l'interaction initiale de l'utilisateur avec le site Web. Ce premier contact peut ne pas refléter fidèlement l'expérience utilisateur globale, en particulier pour les sites qui restent ouverts pendant une période prolongée, comme les applications d'une seule page.

L'interaction avec Next Paint évalue généralement la pire latence d'entrée sur la page. Cependant, s'il y a beaucoup de rencontres d'utilisateurs, les valeurs aberrantes seront ignorées et Google évaluera le 98e percentile pour le délai d'interaction.

Ainsi, si l’INP d’une page est de 250 millisecondes, 2 % des interactions utilisateur ont eu une latence supérieure à cela.

Comment fonctionne l'interaction avec Next Paint (INP) ?

INP est une métrique de réactivité qui se concentre sur le temps écoulé entre les interactions des utilisateurs. Il mesure la rapidité avec laquelle un élément de page Web répond lorsqu'une action spécifique est effectuée sur celui-ci.

Voici comment fonctionne INP :

• Un utilisateur interagit avec une page Web en cliquant sur un bouton.
• Le navigateur demande du nouveau contenu au serveur Web.
• Le serveur Web fournit du nouveau contenu au navigateur.
• Le navigateur affiche le nouveau contenu sur la page.
• Le navigateur calcule le temps nécessaire pour créer le nouveau contenu et le rapporte sous forme de score INP.

Une note INP faible indique que la page est extrêmement réactive aux entrées de l'utilisateur. Dans le cadre de Core Web Vitals, INP est important pour les raisons suivantes :

• Amélioration de l'expérience utilisateur :Un score INP élevé indique que les visiteurs doivent attendre longtemps avant que la page Web réponde à leurs activités, ce qui peut être ennuyeux.

• SEO (optimisation des moteurs de recherche) :INP et d’autres Core Web Vitals font partie des signaux d’expérience de page de Google, qui influencent le classement d’un site Web sur les pages de résultats de recherche. Cela souligne l'importance de l'INPMétrique SEO.

• Réduisez le taux de rebond :Des temps de chargement lents peuvent amener les clients à quitter la page, réduisant ainsi les résultats de votre entreprise.

Comment l’INP est-il mesuré ?

INP surveille le temps qui s'écoule entre les entrées de l'utilisateur, telles que les clics et les frappes au clavier, et la prochaine mise à jour de l'interface utilisateur. Ce délai comporte trois composantes :

un. Retard d'entrée

En attente d'opérations en arrière-plan sur le site Web pour empêcher l'exécution du gestionnaire d'événements.

b. Temps de traitement

Exécution de gestionnaires d'événements en JavaScript.

c. Délai de présentation

Gérer les autres opérations en attente, recalculer la mise en page et peindre le contenu de la page. Les INP sont mesurés en millisecondes (ms). Un bon benchmark est inférieur à 200 ms, et tout ce qui se situe entre cela et 500 ms est considéré comme nécessitant une amélioration. Une latence de 500 ms ou plus est considérée comme faible.

Plusieurs variables peuvent influencer une valeur INP, notamment la taille et la complexité d'une page Web, ainsi que le nombre de fichiers JavaScript et CSS chargés.

Vous pouvez utiliser de nombreux outils pour évaluer l'interaction avec Next Paint, tels que :

• Test de vitesse du site Web de DebugBear
• Informations sur la vitesse des pages Google
• Notre extension Chrome pour la vitesse du site
• Débogueur INP
• Console de recherche Google
• La bibliothèque Web Vitals

Les outils de test de vitesse de site Web peuvent vous aider à déterminer la valeur INP d’un site Web. Ce type d'application peut fournir des informations sur les performances de vos métriques Core Web Vitals et offrir des conseils sur la façon de les optimiser.

Google PageSpeed ​​Insights est un outil populaire pour analyser INP etperformances du site Web. Il évaluera un site et fera des recommandations sur les meilleures pratiques à appliquer. Vous pouvez également examiner la vitesse de chargement de votre site Web sur les appareils mobiles et de bureau.

PageSpeed ​​Insights présente deux types de résultats. La partie supérieure affiche les métriques Core Web Vitals d'un site issues du rapport Chrome UX, un ensemble de métriques de performances réelles provenant des utilisateurs de Chrome.

Les valeurs indiquées dans le rapport ci-dessous proviennent d'un laboratoire contrôlé qui utilise Google Lighthouse. Ces données peuvent être utilisées pour tester de nouvelles fonctionnalités avant leur mise en ligne.

Si les données INP du site ne sont pas disponibles, examinez son temps de blocage total (TBT). Cette métrique évalue une nouvelle forme de réactivité. Il se concentre sur la durée pendant laquelle un site Web ne peut pas répondre à l’interaction de l’utilisateur lors du chargement.

Vers le bas, vous trouverez des idées sur la manière d'améliorer les métriques Core Web Vitals, comme suit :

Comment optimiser l'interaction avec Next Paint (INP) ?

Ainsi, pour optimiser INP, vous souhaitez simplifier et hiérarchiser autant que possible la liste de tâches pour le thread principal. Voici quelques stratégies et moyens d'optimisation majeurs pour améliorer les valeurs d'interaction avec la peinture suivante (INP) et augmenter la réactivité :

un. Améliorer les performances JavaScript

JavaScriptest un élément clé de nombreux sites Web. Il propose de nombreux éléments interactifs ; cependant, cela peut également ralentir la vitesse du site.

Lorsque JavaScript est exécuté, il s'exécute sur le thread principal, responsable du rendu d'une page Web. Si le code est inefficace, le fil de discussion peut s'arrêter et empêcher le site Web de répondre aux entrées de l'utilisateur.

Pour améliorer la réactivité, optimisez votre JavaScript. Vous pouvez y parvenir en :

• Réduire les fichiers JavaScriptréduit la quantité de JavaScript, lui permettant de charger davantagerapidement.

• Activez la compression GZip.Une autre façon courante de compresser les fichiers et les données d’un site Web.

• Utilisation d'un framework JavaScript.Cet outil peut vous aider à organiser votre code JavaScript et à le rendre plus efficace. AngularJS et jQuery en sont des exemples bien connus.

• Utilisation du CDN.Cette technologie, connue sous le nom de réseau de diffusion de contenu, distribuera vos fichiers JavaScript à partir de serveurs situés à proximité de votre public cible, ce qui entraînera des temps de chargement plus rapides.

Un JavaScript inefficace peut bloquer le thread principal, entraînant des retards de rendu. Le fractionnement du code, le chargement paresseux, l'utilisation de Web Workers et l'évitement des opérations de longue durée sur le thread principal sont autant d'options permettant de réduire le délai JavaScript.

b. Utiliser des Web Workers

Les Web Workers sont un service qui permet à JavaScript de s'exécuter indépendamment du thread principal. Ils sont pratiques pour exécuter des tâches compliquées en arrière-plan.

Supposons que vous ayez un site Web WordPress chargé de photos, de vidéos et de données. Les travailleurs Web peuvent déplacer ces opérations JavaScript coûteuses vers un thread d'arrière-plan, empêchant ainsi votre interface de se bloquer.

Une autre façon d'éviter que le thread principal ne s'arrête consiste à diviser les tâches JavaScript volumineuses en tâches plus petites.

c. Rompre les tâches longues

La division des tâches volumineuses permet au navigateur Web de les gérer en petites parties à la fois. En conséquence, le fil principal est libre d’effectuer des tâches plus importantes.

Comme vous le savez, les tâches longues bloquent le thread principal, empêchant le navigateur d'effectuer des événements d'interaction. Àaméliorer la réactivité de votre site, réduisez la pression sur le thread principal et essayez de diviser les opérations volumineuses.

En décomposant les activités volumineuses en éléments plus petits, le thread principal peut effectuer d'autres tâches et répondre plus rapidement aux interactions des utilisateurs.

De plus, la division des tâches longues permet de minimiser l'effet «jank», dans lequel les animations et les transitions sur le site Web deviennent saccadées ou saccadées à cause deà un thread principal surchargé. En garantissant que chaque activité est réalisée dans un délai plus court, le site Web peut offrir une expérience visuelle plus fluide à l'utilisateur.

d. Donner la priorité à la préparation aux entrées

La préparation à la saisie fait référence à la capacité d'une page Web à répondre à l'interaction de l'utilisateur. Lorsque ce n’est pas le cas, cela signifie généralement que le fil principal du navigateur est occupé à d’autres tâches.

Voici comment prioriser la préparation à la saisie et augmenter l'INP :

1. Le JavaScript non critique sera différé

Certains JavaScript ne sont pas requis pour le chargement initial de la page et peuvent être exécutés après leprincipal. contenu. Cela permet au fil de discussion principal de prioriser les interactions des utilisateurs et d'augmenter la réactivité globale de la page.

2. Limitation

Cette stratégie détermine la fréquence à laquelle une fonction est exécutée. Par exemple, lorsqu'un utilisateur fait défiler vers le bas, le même code peut être exécuté des centaines de fois par seconde. La limitation lui permet de ne s'exécuter qu'une fois par milliseconde environ, quel que soit le nombre de fois où l'événement est déclenché.

3. Anti-rebond

Cela interdit à une fonction de s'exécuter à nouveau jusqu'à ce qu'une certaine période soit écoulée. Par exemple, lorsque les utilisateurs redimensionnent la fenêtre de leur navigateur, cet événement peut lancer la même procédure plusieurs fois. L'anti-rebond peut être utilisé pour différer l'exécution jusqu'à ce que l'utilisateur arrête le redimensionnement pendant une période prédéterminée.

4. Écouteurs d'événements qui ne participent pas activement

Les écouteurs d'événements sont des constructions informatiques qui détectent certains événements, tels que le défilement et le tapotement. Les rendre passifs indique au navigateur de ne pas attendre la fin d'une fonction spécifique et de poursuivre d'autres activités.

e. Fournir des commentaires immédiats

Certaines activités, comme remplir un formulaire avec plusieurs saisies de données, peuvent entraîner des délais de réponse importants.

C’est là qu’intervient le retour instantané. Cette stratégie fournit aux clients une indication visible que le site Web a reçu et traite leur demande.

Les utilisateurs ne se demanderont pas si le site Web a enregistré leurs commentaires s’ils reçoivent un retour rapide. Cela peut donner l’impression de performances plus rapides, même si cela ne réduit pas réellement le temps de traitement.

Découvrez ces exemples de retours rapides :

1. Indicateurs de charge

Affichez une double flèche ou une barre de progression lorsqu'un processus est en cours d'exécution, notamment lors de la présentation de données ou du passage à une nouvelle page.

2. Messages d'accusé de réception contextuels

C'est une bonne idée d'afficher un message confirmant qu'une opération, comme l'ajout d'un article à un panier, a été effectuée avec succès.

3. Validation des champs du formulaire

Par exemple, si un utilisateur saisit une adresse e-mail mal formée, affichez immédiatement un avis d'erreur plutôt que d'attendre que le formulaire soit soumis.

Conclusion

En fin de journée, présentation d'unexcellente expérience utilisateursur le web se résume à une chose : la réactivité. La vitesse à laquelle votre site Web ou votre application répond aux événements des utilisateurs, tels que les clics, les tapotements et la navigation, peut déterminer s'il s'agit d'une expérience agréable ou d'une lenteur frustrante.

C'est pourquoi il est si important d'optimiser le temps d'interaction avec la peinture suivante (INP). INP surveille les minutes importantes entre le moment où quelqu'un interagit avec votre site Web et le moment où il reçoit la confirmation visuelle sur son écran. Plus l’INP est bas, plus tout semble rapide et réactif.

Alors n’hésitez plus et débloquez la puissance de l’INP optimisé !

Découvrez la réactivité rapide qui distingue les sites Web moyens de ceux qui semblent luxueusement rapides et fluides. La satisfaction de vos utilisateurs et le succès de vos expériences digitales en dépendent tous deux.

FAQ