Les éléments essentiels du Web pour l’expérience utilisateur sont les suivants :
Google recommande un score CLS de 0,1 ou moins.
Google a intégré Core Web Vitals dans plusieurs de ses meilleurs outils pour les développeurs et les webmasters, à commencer par le rapport sur l’expérience utilisateur de Chrome. Ce rapport collecte des données réelles auprès des utilisateurs lorsqu’ils naviguent sur le Web, puis les partage avec les développeurs via des outils tels que PageSpeed Insights et Google Search Console. PageSpeed Insights analyse les performances de votre page Web et fait des suggestions sur la façon d’augmenter sa vitesse. Il passe en revue les trois principaux Web Vitals sur les navigateurs mobiles et de bureau. Les données de champ font référence aux données utilisateur réelles du rapport d’expérience utilisateur Chrome. Dans Google Search Console, vous trouverez Core Web Vitals pour vos pages Web. La console de recherche Google utilise les données du rapport d’expérience utilisateur Chrome pour vous montrer les problèmes sur votre site Web. L’extension Chrome Web Vitals vous permet de voir Core Web Vitals lorsque vous naviguez sur le Web ou lorsque vous apportez des modifications à vos pages Web. L’extension peut également examiner les scores actuels de vos concurrents. Il utilise la bibliothèque Web-vitals ainsi que les données de terrain du rapport d’expérience utilisateur Chrome. Chacun de ces outils vous permet d’afficher le LCP, le FID et le CLS de votre site Web. Les sites Web avec trop peu de trafic peuvent manquer certaines métriques, notamment dans Google Search Console. Pour un examen rapide de vos Core Web Vitals, vous pouvez démarrer un projet pour votre site Web dans Semrush. À l’aide de l’outil d’audit de site, vous pouvez voir le LCP et le CLS pour 10 pages de votre choix : vous ne pourrez pas examiner votre FID avec l’outil d’audit de site, mais il suit une métrique similaire : temps de blocage total (TBT ). En savoir plus sur le fonctionnement de cette métrique avec le guide de Semrush pour mesurer la CWV avec l’outil d’audit de site. Recherchez et corrigez les erreurs de plan de site avec l’outil d’audit de site Vous pouvez afficher vos principaux Web Vitals pour les navigateurs de bureau et mobiles, mais vous devrez créer un projet pour chaque appareil. Lorsque vous réexécutez votre audit, l’outil renvoie toutes les modifications apportées à vos signes vitaux depuis le dernier audit. Cela peut être utile si vous mettez à jour plusieurs pages à la fois pour améliorer les performances.
Pourquoi les éléments essentiels du Web sont importants
Google a officiellement ajouté Core Web Vitals à son algorithme de recherche. Le déploiement complet de la mise à jour de l’expérience de la page devrait être terminé d’ici août 2021. L’amélioration de votre LCP, FID et CLS pourrait avoir un impact positif sur vos utilisateurs et votre classement sur les pages de résultats de recherche mobile. Une augmentation d’une seule position sur la première page des résultats de recherche peut entraîner une augmentation considérable du trafic. Il en va de même pour l’expérience utilisateur. Si vous pouvez améliorer l’expérience utilisateur, cela peut entraîner une augmentation considérable des affaires grâce à des références positives de bouche à oreille, des critiques et des affaires répétées. Fournir une mauvaise expérience utilisateur sous la forme d’un site Web à chargement lent peut entraîner une augmentation défavorable du taux de rebond. Un taux de rebond plus élevé peut signifier que les gens quittent votre site Web sans faire défiler, cliquer ou, plus important encore, convertir. Google a constaté que le taux de rebond d’une page Web dont le chargement prend une à cinq secondes augmente de 90 %.
Comment améliorer Core Web Vitals
Shopify, etc.) et de votre société d’hébergement Web.
Comment améliorer la plus grande peinture de contenu
il peut avoir des paramètres de mise en cache que vous pouvez configurer pour mettre en cache votre contenu
En établissant ces connexions à l’avance, votre page n’aura pas à s’arrêter sur le contenu principal partiellement chargé pour fournir des images ou d’autres ressources aux visiteurs de votre site Web. Vous pouvez également précharger des ressources externes telles que CSS et JavaScript avec le code suivant : href= »style.css »> Cela garantira qu’ils sont chargés au début et évitera d’empêcher le chargement complet du contenu. D’autres moyens d’optimiser CSS et JavaScript incluent la « minification » (suppression des caractères inutiles) des feuilles de style et des scripts, la suppression du code inutilisé et le déplacement du code non nécessaire pour le chargement initial de la page Web vers une ressource préchargée. Pour le code le plus critique, pensez à l’ajouter en ligne. Google recommande CSSnano et csso pour minifier CSS, et UglifyJS pour minifier JavaScript. Vous pouvez également minifier le HTML avec HTML Minifier. Google Chrome DevTools dispose d’une fonctionnalité de couverture qui analyse l’utilisation de CSS et de JavaScript sur votre page. Il peut identifier le code qui peut être déchargé vers une ressource préchargée, en supposant qu’il n’est pas utilisé par quelque chose dans votre pile technologique. Les échanges signés (SXG) permettent aux sites Web de certifier le contenu fourni à partir de leur domaine par l’intermédiaire d’un tiers. Google s’est associé à Cloudflare pour créer une URL réelle AMP, permettant aux éditeurs d’afficher l’URL d’origine de leur contenu sur le contenu AMP à partir des résultats de recherche Google. Les sites Web qui reçoivent du trafic provenant de la recherche verront une augmentation de LCP après la mise en œuvre des SXG. Vous pouvez également améliorer votre LCP en optimisant et en compressant tous les fichiers texte, images, vidéos et éléments de bloc utilisés sur vos pages Web. Considérez les images insérées dans le code HTML de la page ainsi que les images utilisées dans l’arrière-plan ou les éléments de conception de vos fichiers CSS ou de thème. Pour plus de détails techniques sur LCP, reportez-vous au rapport préliminaire du groupe communautaire W3C.
Comment améliorer le premier délai d’entrée
Google recommande UglifyJS pour minifier JavaScript. Vous pouvez également minifier le HTML avec HTML Minifier et CSS avec CSSnano et csso. Vous pouvez en savoir plus sur les détails techniques de l’API Event Timing qui analyse la latence des interactions des utilisateurs dans un rapport du groupe communautaire W3C.
Comment améliorer le décalage de mise en page cumulatif
Pour améliorer le score CLS de vos pages Web, vous devez indiquer au navigateur l’espace à donner aux éléments lors de leur chargement. Vous pouvez le faire en ajoutant des attributs de taille spécifiques aux images et aux vidéos. Alternativement, vous pouvez utiliser des boîtes de rapport d’aspect en CSS. Les deux atteindront l’objectif souhaité d’empêcher un changement inattendu de contenu lors du chargement de la page. L’utilisation d’indicateurs sur la page est également recommandée pour les éléments qui se déplaceront lorsqu’ils seront chargés après qu’un utilisateur interagit avec la page. Faire savoir à l’utilisateur que des éléments se chargent sur la page peut l’empêcher de cliquer sur des éléments de déplacement.
Dernières pensées
En savoir plus sur l’utilisation de l’outil d’audit de site pour améliorer Core Web Vitals dès aujourd’hui.
