Google publie un didacticiel sur l'identification des problèmes INP

Google a publié un didacticiel vidéo sur l'identification et la résolution des problèmes d'interaction avec Next Paint (INP) sur les sites Web.

Le didacticiel arrive à point nommé car INP a récemment remplacé le First Input Delay (FID) en tant que Core Web Vital, signalant un changement dans la façon dont Google évalue l'expérience utilisateur.

Évaluation et optimisation des performances INP

Le didacticiel conseille d'évaluer les performances INP actuelles de votre site Web à l'aide d'outils tels que PageSpeed Insights et le rapport sur l'expérience utilisateur de Chrome.

Il serait préférable de viser le seuil « bon », qui représente les performances au 75e percentile des chargements de pages.

Les développeurs peuvent améliorer les scores INP d'un site Web en diagnostiquant et en résolvant des problèmes tels que des tâches JavaScript de longue durée, une activité excessive du thread principal ou des structures DOM trop complexes.

Procédure pas à pas du didacticiel

La vidéo explique aux spectateurs l'utilisation de Chrome DevTools pour identifier les problèmes INP.

Voici une description détaillée des étapes couvertes dans le didacticiel :

1. Ouvrez Chrome DevTools : Commencez par ouvrir le panneau Chrome DevTools dans votre navigateur. Vous pouvez le faire en cliquant avec le bouton droit sur la page et en sélectionnant « Inspecter » ou en utilisant le raccourci clavier Ctrl+Shift+I (Windows) ou Cmd+Option+I (Mac).
2. Simuler un appareil mobile plus lent : Dans le panneau DevTools, cliquez sur l'icône « Device Toggle » (qui ressemble à un téléphone et une tablette) pour activer l'émulation d'affichage mobile.
   1. Ensuite, cliquez sur l'onglet « Réseau » et sélectionnez « Mobile de niveau intermédiaire » dans le menu déroulant de limitation pour simuler une connexion mobile plus lente.
3. Enregistrer les interactions utilisateur : accédez à l'onglet "Performances" dans DevTools et cliquez sur le bouton "Enregistrer" (le cercle noir plein).
   1. Interagissez avec le site Web comme le ferait un utilisateur, en cliquant sur des boutons ou des liens qui déclenchent des actions.
   2. Une fois l'interaction terminée, cliquez sur le bouton « Stop » (le cercle rouge plein) pour mettre fin à l'enregistrement.
4. Analyser les performances : Après avoir arrêté l'enregistrement, vous verrez un graphique de performances. Cliquez sur la piste « Interactions » pour la développer. Cette piste marque le temps écoulé entre le moment où vous avez cliqué et le moment où une réponse s'est affichée à l'écran.
   1. Alignez l'interaction avec l'activité du thread « Principal » pour identifier les tâches longues provoquant des interactions lentes.
5. Identifier le code problématique : Dans le volet « Résumé », vous trouverez un lien vers la source de la page. En cliquant sur ce lien, vous accéderez au code responsable de l'interaction lente. À partir de là, vous pouvez commencer à diagnostiquer et à résoudre le problème.

Implications pour les professionnels du référencement

Le timing de ce tutoriel est pertinent, car l'adoption de l'INP en tant que Core Web Vital a des implications pour le référencement.

La décision de Google de publier ce didacticiel souligne l'importance de s'adapter à la transition INP.

Alors que le moteur de recherche continue d’affiner ses méthodes d’évaluation de l’expérience utilisateur, les professionnels du référencement et les développeurs Web peuvent garantir leur succès en restant informés des derniers outils et des meilleures pratiques.

Connexe : Préparez-vous pour la métrique INP de Google avec ces 5 outils

En résumé

Le nouveau didacticiel vidéo de Google sur l'identification des problèmes INP est précieux pour les professionnels du référencement et les développeurs Web qui cherchent à naviguer dans cette transition et à créer des sites Web optimisés.

Suivre les étapes décrites dans le didacticiel et rester informé des derniers développements peut vous aider à garantir que votre site Web reste compétitif et offre une expérience utilisateur optimale.

---

---

Image en vedette : RYO Alexandre/Shutterstock