Comment optimiser pour Google Core Web Vitals

Comment se préparer au déploiement de Core Web Vitals

Mis à jour le 15.10.2021

La correction des mauvaises expériences utilisateur sur le site d'une entreprise est passée en tête de nombreuses listes de priorités.

Une chose que nous savons déjà est que Google prévoit d'utiliser et de s'appuyer sur son nouveau rapport Google Search Console Core Web Vitals. Il est destiné à aider les entreprises à faire plus que simplement explorer et indexer leurs pages, il s'agit davantage de les rendre plus précieuses pour les utilisateurs.

Que sont les Google Core Web Vitals ?

Google Core Web Vitals est un ensemble de rapports ajoutés à la Google Search Console en 2019 qui comprennent un petit ensemble de mesures de base autour de la vitesse de chargement. Ils aident les spécialistes du marketing de recherche et les équipes de développement à savoir dans quelle mesure un site diffuse ses pages Web. Google note chaque page Web en fonction de sa capacité à offrir une expérience agréable aux visiteurs du site. Le rapport Core Web Vitals détaille les performances des pages Web en fonction des données d'utilisation réelles, également appelées données de champ.

Ces nouveaux facteurs de classement approchent à grands pas. Bien que chaque site bénéficie de l'ajout de types de balisage de schéma essentiels, utilisez l'imbrication et respectez ce qui est le plus important pour éviter le gonflement du code.

Le 5 octobre 2021, Google a mis en ligne des conseils utiles dans une présentation YouTube intitulée Comment améliorer la plus grande peinture de contenu pour une meilleure expérience de page .

Conseils de Google pour obtenir un meilleur score LCP (Largest Contentful Paint) :

Les images sont généralement la cause des problèmes avec Largest Contentful Paint. Chaque bouchée enregistrée peut accélérer le chargement de la page. Utilisez des formats d'image modernes comme AVIF et WebP. Il existe de nombreux cas extrêmes liés à la façon dont votre score LCP est calculé.

Qu'est-ce que l'expérience de la page Google ?

L'expérience de la page est un sous-ensemble de l'expérience utilisateur.

L'expérience de page se concentre sur les aspects techniques des produits Web qui influencent le plus souvent l'expérience utilisateur. Bien qu'il ne mesure pas et ne reflète pas les aspects de conception UX tels que la qualité du contenu ou la conception visuelle, tous les signaux d'expérience de page sont essentiellement sous le contrôle de l'équipe de développeurs qui crée le site Web. Ces signaux ont un effet direct sur l'expérience utilisateur globale.

L'initiative intentionnelle de Google de promouvoir l'expérience de page a l'intention d'avoir un impact positif sur le Web. Considérez-le comme un élément positif. Il est utile de disposer de ces mesures de performance supplémentaires en corrélation avec les mesures commerciales pour obtenir plus facilement l'adhésion des membres de l'équipe non techniques.

Revenons un peu en arrière et examinons comment nous en sommes arrivés là.

L'histoire de la vitesse du site et Google Core Web Vitals

Quel est le calendrier du déploiement de Google Page Experience ?

Le 10 novembre 2020, Google a annoncé : « Les signaux d'expérience de page dans le classement seront déployés en mai 2021. Les nouveaux signaux d'expérience de page combinent Core Web Vitals avec nos signaux de recherche existants, notamment la convivialité mobile, la navigation sécurisée, la sécurité HTTPS, et des lignes directrices interstitielles intrusives ».

Revenons en arrière et obtenons un aperçu clair. L'année 2010 a vu Google commencer à utiliser la vitesse de chargement d'une page Web sur un ordinateur de bureau comme signal de classement.

Google a fait de la convivialité mobile un signal de classement à partir de 2015. En 2018, le processus Mobile-First Index a été lancé de manière officielle. Les webmasters et les propriétaires de sites ont été avertis dans la console de recherche lorsque Google détermine qu'un site est prêt pour l'indexation mobile d'abord. Cela se produit lorsque Google évalue la version mobile de votre site Web au cours du processus d'évaluation à des fins de recherche ; vous ne pouvez pas le déclencher.

Début 2020, Google a présenté son nouvel ensemble d'outils au sein de sa console de recherche Google, appelé Core Web Vitals. Il a explicitement déclaré que les mesures de ces rapports deviendront des signaux de classement en 2021. Core Web Vitals développe les mesures de vitesse du site précédentes pour aider les entreprises à gérer le chargement de certaines pages Web, des publicités mobiles et des fichiers de support.

L'introduction de Web Core Vitals alerte tous les propriétaires de sites Web en difficulté qui ne se préoccupent pas de la convivialité mobile que cela compte clairement. Bien que la mise à jour de Mobilegeddon ait été un déploiement lent, il faut maintenant faire face à l'importance de faire d'un site une meilleure expérience pour les utilisateurs mobiles.

L'investissement de Google dans les outils et les rapports sur la vitesse du site et les mobiles signale aux propriétaires de sites Web qu'ils doivent rendre leurs sites Web plus faciles à utiliser ou qu'ils s'attendent à devenir uniquement une carte d'appel en ligne. Aujourd'hui, nous annonçons que les signaux d'expérience de page dans le classement seront déployés en mai 2021.

Quelles statistiques de base composent l'expérience de la page de recherche Google ?

Les trois principales mesures de l'expérience de la page de recherche Google expliquées :

• Chargement : LCP évalue le temps nécessaire pour que le plus grand élément de contenu (tel qu'une image vedette, une image principale ou un texte d'en-tête H1) sur une page Web spécifique devienne visible dans la fenêtre d'affichage d'un visiteur. Cherchez à obtenir un LCP de 1,2 seconde ou moins.
• Interactivité : FID (premier délai d'entrée) : l'horloge s'exécute à partir du moment où un utilisateur interagit pour la première fois avec votre page (comme lorsqu'un lien est cliqué, un bouton déclenché, etc.) jusqu'au moment où le navigateur répond à cette interaction. Cette mesure est dérivée de tout élément interactif sur lequel la personne clique en premier. Ceci est important sur les pages où le visiteur doit faire quelque chose car c'est à ce moment que la page est devenue interactive. Aussi appelés rapports TBT (dans GTmetrix); il représente le temps bloqué par les scripts appelés pendant le processus de chargement de la page. Cherchez à gagner un TBT de 150 millisecondes ou moins.
• Stabilité visuelle : CLS indique dans quelle mesure la mise en page d'une page change un visiteur lors du chargement de votre page. Recherchez un score CLS de 0,1 ou moins.

Pour auditer votre contenu afin de déterminer s'il atteint le seuil Core Web Vitals pour être étiqueté avec un badge Fast Page, utilisez les outils de développement de Google pour évaluer la vitesse de chargement. Pour vous aider dans ces tâches d'optimisation, GTmetrix est devenu plus sophistiqué. GTmetrix Reports a ajouté une nouvelle méthodologie de notation. Les anciens rapports PageSpeed ​​et YSlow ont été mis à jour avec une note GTmetrix globale. Propulsé par Lighthouse, les utilisateurs de GTmetrix obtiennent désormais un score de performance et de structure.

Qu'est-ce que le premier délai d'entrée (FID) ?

Le FID est un score qui évalue le temps qu'il a fallu au navigateur pour gérer d'autres tâches avant qu'il ne puisse traiter une personne prenant une action telle qu'un appui ou un clic. Cela indique à quel point l'expérience de l'interface utilisateur est réactive pour un utilisateur et mesure la charge du processeur avec le traitement JavaScript.

La façon dont une page exécute JavaScript, à la fois lors du chargement de la page et pendant le cycle de vie de la page, affecte directement le FID. Le temps nécessaire à l'exécution complète de JavaScript est important si les visiteurs tentent de terminer une action avant que l'application ne soit complètement prête.

Façons d'améliorer le premier délai d'entrée :

• Retarder ou éliminer les fichiers tiers ou les pixels de suivi.
• Reportez tous les scripts non essentiels.
• Améliorez l'exécution de JavaScript.

GTmetric et d'autres cascades font un excellent suivi des performances pour révéler où le temps de chargement est consommé de manière excessive. Une fois identifiés, ils peuvent être étudiés et résolus.

Qu'est-ce que l'indicateur d'expérience de la nouvelle page Google ?

Google montrera aux utilisateurs la qualité des Core Web Vitals d'une page Web avec son nouvel indicateur d'expérience de page. Cela s'affiche déjà dans certains SERPS. Sa taille et sa forme sont similaires à celles de l'icône AMP indiquant le statut d'une page mobile accélérée. Comme Google est doué pour tester et faire des intériations, cela peut sembler différent car il est plus largement adopté.

Bien que les métriques Core Web Vitals fournissent des informations plus détaillées que celles que nous avions auparavant dans les rapports de la Google Search Console, il est probable que de nombreux faux positifs apparaîtront après le déploiement complet.

Comment déterminer les tâches vitales du Web de base les plus importantes

Concentrez-vous d'abord sur les mesures de vitesse de chargement les plus efficaces avant d'entreprendre des optimisations plus approfondies des performances du site Web.

1. Résolvez d'abord tout ce qui est étiqueté "médiocre".

2. Ensuite, hiérarchisez votre liste de tâches en fonction des problèmes qui ont un impact négatif sur le plus d'URL ou des problèmes qui nuisent à vos URL les plus génératrices de revenus.

3. Les problèmes « à améliorer » sont désormais les prochains sur la liste des priorités.

La nécessité d'une amélioration drastique du changement de contenu de mise en page m'a assez surpris, mais cela contribue clairement à l'obtention des meilleurs résultats de référencement. La page n'a pas d'annonces à chargement tardif au-dessus du contenu, pas d'interstitiels intrusifs, et toutes les images ont leur largeur et leur hauteur correctement définies. Cependant, la taille de l'image d'origine était de 1280 par 860 pixels. Cela provoquait un problème de redimensionnement d'image ; lorsque les navigateurs le chargeaient, ils le redimensionnaient à 1200 par 800 pixels. Cela provoque un décalage de mise en page et un retard de chargement qui en résulte. Assurez-vous que vos images sont correctement dimensionnées pour le balisage du schéma JASON-LD.

Lorsque vous avez résolu un problème spécifique dans toutes vos URL, vous pouvez confirmer si vous avez résolu le problème pour toutes les URL. Cliquez sur Démarrer le suivi pour démarrer une session de surveillance de 28 jours afin de vérifier les instances de ce problème sur votre site. Si ce problème n'est présent dans aucune URL de votre site pendant la période de 28 jours, le problème est considéré comme résolu. La présence de ce problème dans n'importe quelle URL est suffisante pour marquer le problème comme non résolu ; cependant, l'état des URL individuelles reste en cours d'évaluation pendant 28 jours, quel que soit l'état du problème.

FAQ COMMUNE SUR CVW

Cela peut prendre beaucoup de temps pour apprendre, dépanner et tester/modifier de nombreuses options pour améliorer les scores CWV. Voici les réponses :

Comment calculer le score CLS ?

Le score CLS d'une page est calculé en multipliant la proportion de l'écran de l'utilisateur qui s'est décalé de manière inattendue lors du chargement par la distance parcourue. Les sites sont même parfois confrontés à la moitié de l'écran impactée par le changement de contenu. C'est ennuyeux pour les téléspectateurs. Simultanément, la distance que le contenu devait parcourir à l'écran est prise en compte. Par conséquent, pour calculer le score CLS, multipliez la zone d'écran impactée (0,5) par la distance parcourue (0,15) et vous pouvez obtenir un score utile.

Quelles sont les causes courantes des problèmes de décalage de la mise en page du contenu ?

• Supprimer les marges sur l'image en vedette : L'exécution de l'outil Lighthouse avec Chrome Dev Tools, sur un site Web, le code figure class="featured-media" s'est avéré être un problème. En ajoutant ce code CSS supplémentaire .featured-media { img display: none; } .featured-media { img display: none; } , le score de performance du bureau s'est immédiatement amélioré de deux points complets.
• Résoudre tous les problèmes de chargement des polices : certains concepteurs de sites Web préfèrent l'apparence de polices de titres Web fantaisistes ; cependant, la façon dont ils se chargent provoque souvent un changement de disposition. Testez pour découvrir s'il y a des problèmes potentiels de dilution du cache à résoudre ainsi que la façon dont la taille globale des polices est livrée. Nous avons constaté qu'en spécifiant fallback font-display, en ajoutant { font-display: fallback;} , nous pouvons améliorer le comportement de rendu des éléments à l'aide de l'instruction font face.
• Contenu injecté dynamiquement : cela se produit généralement lorsque des bannières ou des formulaires sont ajoutés dynamiquement à une page. De plus, les utilisateurs qui ne voient pas un « x » pour la désactivation d'une fenêtre contextuelle peuvent être frustrés. De plus, lorsque les éléments de la page sont utilisables, ils sont toujours à l'origine de la réorganisation et du "décalage" de la page.
• Absence de spécifications d'image : lorsque les images d'une page ont des dimensions d'image erronées, médiocres ou non spécifiées, les navigateurs ont ajouté du travail et du temps pour charger la page sans cette information, puis doivent se déplacer plus tard pour la calculer.
• Intégrations sur la page, publicités et iframes sans dimensions : en informant les navigateurs de l'espace de mise en page nécessaire pour ces éléments visuels sur la page, vous pouvez éviter que le navigateur n'ait à se déplacer une fois que chacun d'entre eux est visuellement en place.

Après avoir suivi les stratégies d'amélioration CLS ci-dessus, le score Cumulative Layout Shift du même site est désormais de 0,01. Cela contribue grandement à améliorer les résultats de recherche mobile d'un site.

Quelles métriques Core Web Vitals peuvent être améliorées en chargeant CSS Async ?

Parce que c'est ce que les gens voient en premier, les mesures calculées dans la section au-dessus de la ligne de flottaison garantissent que le contenu clé visible par l'utilisateur est vu rapidement. Certains fichiers de contenu et de support peuvent être chargés en arrière-plan jusqu'à ce que vous atteigniez "l'heure de chargement complet".

Selon Koray Tugberk GUBUR, propriétaire de Holistic SEO, "Dans la relation entre le chargement de fichiers CSS en tant qu'asynchrone et l'ouverture de pages Web plus tôt pour l'utilisateur, certaines métriques Pagespeed sont plus positivement affectées que d'autres. Un chargement plus rapide des fichiers CSS améliore particulièrement les mesures First Paint, First Contentful Paint, Largest Contentful Paint et Speed ​​Index ».

Placez votre contenu clé au-dessus du pli où il peut être facilement vu pour correspondre à l'intention des chercheurs. Ne faites pas attendre les visiteurs du site pour trouver des réponses à leurs questions.

Comment Google mesure-t-il la vitesse de chargement ?

Les suggestions d'amélioration et les diagnostics trouvés dans PageSpeed ​​Insights sont générés à partir de tests en laboratoire ; les mesures de performance sont plus précises lorsqu'elles sont tirées des résultats sur le terrain. Une fois que vous avez une idée générale de la façon d'améliorer PageSpeed, la logique de la façon dont Google note cela peut avoir un impact positif sur vos résultats Web vitaux.

Trois nouvelles mesures de performance englobent ce monde de la performance Web. Ils sont pris en charge via une API dans les navigateurs Chrome, Chrome sur Android, Chromium Edge. Les données sur lesquelles Google s'appuie pour mesurer l'expérience de la page sont dérivées du rapport Chrome UX (CRUX). Il se compose de statistiques de performances anonymisées fournies par les chargements de pages réelles dans les navigateurs Chrome du monde entier.

Étant indépendant de l'état du cache, CRUX évalue tous les chargements de page réguliers, y compris les pages Web de destination et de mi-session. Il ignore les navigations douces, également appelées changements d'itinéraire, dans les applications d'une seule page. Les navigations douces ont le potentiel d'être pénalisées. Des scores CLS et des valeurs LCP plus faibles signalent un changement réduit d'utilisateurs subissant des changements de mise en page inattendus.

Quelle est l'importance de la compression d'image pour un score CWV ?

Vous n'avez pas besoin de compromettre la qualité d'image pour obtenir un bon score CWV.

Les navigateurs d'aujourd'hui peuvent gérer des images haute résolution lorsqu'elles sont fournies ; pendant que vous voulez toujours les compresser, n'utilisez que la taille dont vous avez besoin, pour avoir fière allure sur les écrans haute résolution. Vous pouvez utiliser un CND et penser à commencer avec une image ou un arrière-plan moins complexe pour commencer. Apprenez et suivez les directives de Google relatives aux images.

@ Jamsession18 a demandé à John Mueller de Google le 26 mars 2021 :

"Pouvez-vous répondre à ma question concernant la qualité des images utilisées ? Je travaille pour un site d'actualités qui est actuellement optimisé pour CWV et pour cela, notre technologie compresse les images à un niveau extrême au détriment de la qualité de l'image (images floues maintenant). Est-ce que ça vaut le coût ?"

« Cela ressemble à une mauvaise idée. L'expérience de la page n'est qu'une des nombreuses choses que nous examinons pour le classement, mais si les utilisateurs n'aiment pas votre contenu, il est peu probable qu'ils convertissent (comme vous le souhaitez) et il est peu probable qu'ils veuillent revenir. -???? John ???? @JohnMu

En quoi les données de terrain et de laboratoire sont-elles différentes ?

Une différence est que les données de laboratoire sont utiles pour les tests, les données de terrain sont meilleures pour le classement.

Les données de laboratoire concernent les données de performances trouvées dans un environnement unique. Chrome Dev Tools et les outils webpagetest.org sont couramment utilisés pour obtenir des données de laboratoire. Les données de champ englobent les données collectées auprès de l'ensemble des utilisateurs qui visitent les pages de votre site à l'aide du navigateur Chrome. Les données de terrain sont ce qui remplit vos rapports Google Search Console ainsi que Google Page Speed ​​Insights (qui s'appuie à la fois sur les données de laboratoire et de terrain pour ses rapports de page).

Les données de champ peuvent être obtenues à l'aide de l'automatisation via BigQuery. Pour les sites ou les pages plus récents qui ne reçoivent pas beaucoup de trafic organique, vous constaterez peut-être qu'aucune donnée de champ n'est disponible.

Pourquoi est-il important d'améliorer les trois métriques Web Core Vitals ?

Les trois benchmarks Core Web Vitals (CWV) signalent un élément clé de ce qu'il faut pour fournir une bonne expérience utilisateur. Chacune des 3 mesures doit être remplie afin de se qualifier pour le boost de signal de classement Google associé qui sera déployé en mai 2021. Google nous donne 6 façons de mesurer ces Core Web Vitals. Comme nous l'apprend John Mueller, analyste principal des tendances pour les webmasters chez Google, toutes les exigences minimales doivent être remplies pour bénéficier de cette mise à jour de l'algorithme qui arrivera bientôt.

« D'après ce que j'ai compris, nous voyons si c'est dans le vert et cela compte si c'est OK ou non. Donc, si c'est en jaune, ce ne serait pas en vert, mais je ne sais pas quelle sera l'approche finale.

Il y a un certain nombre de facteurs qui se combinent et je pense que l'idée générale est que si nous pouvons reconnaître qu'une page correspond à tous ces critères, nous aimerions l'utiliser de manière appropriée dans le classement de recherche.

Je ne sais pas quelle serait l'approche là où il y a des choses qui vont bien et d'autres qui ne vont pas parfaitement, comme comment cela s'équilibrerait. – John Muller

Cela rend la perception d'une page à chargement rapide par rapport à une page à chargement lent d'une grande importance. Répondre aux trois paramètres est une opportunité ; les petites entreprises peuvent améliorer leur référencement et acquérir un avantage concurrentiel pour les aider à gagner de nouvelles affaires. L'accent de chaque site doit être mis sur l'amélioration des résultats de recherche mobile par rapport à l'expérience de bureau, car cela compte le plus pour le plus grand nombre de chercheurs.

Comme tant de marketing de recherche, une approche holistique est la meilleure. Il est facile de trop se concentrer sur un domaine de performance du site au détriment des autres qui nécessitent une attention particulière. Un exemple de cela consiste à ajouter tout le balisage de schéma auquel vous pouvez penser alors qu'il peut s'agir simplement d'ajouter du code de peu de valeur. Lisez notre Guide complet sur le balisage des schémas de commerce électronique pour amplifier au mieux la visibilité de vos produits dans les SERP.

Une personne effectuant une recherche pourra-t-elle dire quels sites réussissent le test Core Web Vitals ?

Les personnes qui veulent un signal indiquant que la vitesse de la page, la réactivité de la page et les facteurs de stabilité visuelle de la page ont été pris en compte par une entreprise avant de cliquer sur une page verront un badge.

John Mueller a indiqué que Google pourrait introduire un badge dans les résultats de recherche pour les pages qui passent les Core Web Vitals de Google. Le badge agira comme une sorte de filtre. Il affirme à une personne utilisant la recherche Google que si elle clique sur une page Web avec ce badge CWV, elle peut s'attendre à une expérience positive.

Outils de test Core Web Vitals

Lorsque vous testez vos Core Web Vitals, utilisez une fenêtre de navigation privée pour contourner les problèmes indésirables.

Il existe plusieurs outils maintenant disponibles; nous préférons Phare. En en utilisant plusieurs, vous pouvez avoir une perspective plus globale. Cependant, ils diffèrent considérablement dans leurs applications, les niveaux de compétence requis pour la compétence technique et les rapports. La console de recherche est très utile pour être le tableau de bord Core Web Vitals de chaque site. Obtenir une vue d'ensemble d'un site Web – selon Google – est vital pour le succès. L'extension Chrome et PageSpeed ​​Insights sont meilleures pour ces évaluations rapides de pages. Nous en ajouterons plus ici au fil du temps.

Une fois ce travail en place, nous couvrirons vos rapports d'avancement de Search Marketing en personne. Nous voulons que vous compreniez et appréciiez les avantages.

L'amélioration des aspects techniques du référencement a toujours nécessité l'adhésion et les ressources de développement nécessaires pour être réalisée. Les spécialistes du marketing de recherche travaillant avec des entreprises de toutes tailles ont toujours eu du mal avec les approbations budgétaires. Aujourd'hui, la performance de chaque site Web a désormais un score de crucialité clair. Si quelqu'un n'a pas pris cela au sérieux dans le passé, c'est maintenant une dure réalité. Pourquoi attendre d'être pénalisé dans les classements ?

Google a été témoin de ces luttes et a écouté les SEO demander comment obtenir l'adhésion pendant des années. Le géant de la technologie souligne intelligemment l'importance de la performance en la rendant transparente dans ses rapports Google Search Console et en l'établissant comme un signal de classement supplémentaire. L'expérience de la page Google est mieux décrite comme un ensemble de facteurs qui mesurent à quel point il est satisfaisant pour une personne d'interagir avec une page Web. Concentrez-vous sur vos clients et les visiteurs de votre site et sur la façon de rendre leur expérience sur votre site Web la meilleure possible pour eux.

SOMMAIRE

L'optimisation des mesures de performance Core Web Vital, telles que mesurées par Google dans CRUX, pourrait être un grand coup de pouce à l'avenir. Mais avant même que ces éléments vitaux du Web ne deviennent un facteur de classement, ils auront un impact positif sur l'expérience utilisateur de votre site. Les consommateurs veulent des expériences plus rapides. L'amélioration des problèmes de vitesse de chargement entraîne un taux de rebond plus faible, une durée de session de page plus longue, de meilleurs scores de satisfaction des utilisateurs, un meilleur taux de conversion et une augmentation du trafic SEO. En fin de compte, tout cela entraîne une augmentation des revenus.

L'avantage des optimisations des performances des pages est qu'elles sont souvent réalisées avec des améliorations de code relativement mineures.

Hill Web Creations peut diriger vos efforts d'optimisation en commençant par un audit SEO technique complet .