4 meilleurs conseils pour améliorer l'audit des éléments vitaux Web de base

Il n'y a pas de règle absolue sur la façon d'auditer Core Web Vitals, en particulier avec une variété d'outils tiers à prendre en compte. Nous décomposons certains de nos meilleurs conseils d'audit de vitesse à intégrer dans vos flux de travail, qui couvriront :

• Expérience de la page et console de recherche Google
• Les inconvénients de PageSpeed ​​Insights
• Outils d'audit tiers recommandés
• Comprendre les graphiques en cascade

1. Démarrez votre workflow d'audit Core Web Vitals avec la Search Console

Lors de l'audit d'un site Web pour la vitesse du site et les problèmes de Core Web Vitals, nous vous recommandons de toujours commencer le processus de dépannage en consultant la section "Expérience" dans la Search Console - à condition que l'accès soit disponible. La console de recherche regroupe les données utilisateur réelles (champ) du rapport Chrome UX. Il s'agit donc d'un moyen simple de comprendre quels problèmes LCP, CLS ou FID affectent votre expérience utilisateur et, en fin de compte, le potentiel de classement du site.

Accédez à « Expérience de la page » > « Core Web Vitals » et le graphique affiché indiquera le nombre d'URL classées comme « bonnes », « à améliorer » ou « médiocres » pour la propriété du site Web. Par exemple:

Consultez le tableau ci-dessous sur les délais et les mesures de Google sur les seuils Core Web Vitals ci-dessus.

À partir de là, nous pouvons évaluer si la majorité des URL sont classées comme "bonnes", passant ainsi les 3 métriques Core Web Vitals, ou si la plupart des pages sont "médiocres" ou "besoin d'amélioration", indiquant qu'il existe des problèmes techniques en suspens. qui doivent être résolus pour qu'ils passent.

Conseil utile : les pages doivent passer les trois éléments vitaux Web pour passer au statut " Bien ", et il ne suffit pas que la majorité des URL d'un site soient dans la plage " Amélioration nécessaire ".

Vous pouvez ensuite explorer chaque section pour découvrir les URL spécifiques qui sont affectées par des problèmes de vitesse et qui nécessitent un audit. Ceux-ci sont regroupés par ceux qui sont similaires au niveau du modèle. Ainsi, au lieu d'essayer d'auditer tous les différents types d'URL qu'un site peut avoir - par exemple, la page d'accueil, les pages de catégories, les pages de produits, les articles de blog, etc., les problèmes auxquels les vrais utilisateurs sont confrontés lorsqu'ils visitent le site Web ne peuvent être centrés que sur 1 ou 2 parmi ceux-ci, ce qui signifie que vous pouvez concentrer vos efforts uniquement sur ces modèles, ce qui peut vous faire gagner beaucoup de temps.

2. Utilisez PageSpeed ​​Insights avec parcimonie

Bien que PageSpeed ​​Insights (PSI) soit un outil gratuit utile de Google qui donne un aperçu de haut niveau des opportunités potentielles pour résoudre les problèmes, c'est vraiment un moyen paresseux d'auditer la vitesse du site s'il est utilisé isolément. Nous avons vu de nombreux référenceurs prendre les recommandations, parfois mot pour mot, et les présenter aux développeurs ou à l'équipe technique des clients sans vraiment comprendre pourquoi ni le contexte qui les sous-tend.

Malheureusement, cela peut souvent conduire à davantage de questions, surtout si vous n'approfondissez pas les opportunités et les recommandations que l'outil vous proposera.

Par exemple, nous avons tous entendu parler de la recommandation "Éliminer les ressources bloquant le rendu" pour accélérer le chargement de l'élément LCP, mais que se passe-t-il lorsque cette ressource est essentielle à mettre en place lors de la première peinture, comme un script de bannière de cookie ou les actifs concernés sont des ressources tierces ? Les développeurs sont susceptibles de repousser celui-ci directement, car ils ne pourront pas faire grand-chose – il est donc vraiment important que toutes les recommandations techniques tirées de PSI soient prises avec une pincée de sel et étudiées plus avant avant de revenir à développeurs.

Il est également utile de savoir que PSI utilise un appareil émulé défini (Moto G4) avec Lighthouse, mais les problèmes peuvent varier considérablement en fonction de l'appareil que les vrais utilisateurs utilisent le plus fréquemment, comme c'est le cas avec les tests en « laboratoire ». Cela peut souvent signifier que PSI ne renverra pas de problèmes ou d'opportunités de test sur cet appareil spécifique, même si vous savez qu'il y a un problème pour les vrais utilisateurs du site à partir du rapport Chrome UX.

Nous recommandons donc toujours d'utiliser PSI en conjonction avec d'autres outils de test de vitesse où la configuration de l'appareil et de la connexion peut être ajustée en conséquence.

3. Explorez d'autres outils d'audit de vitesse

En plus d'utiliser PageSpeed ​​et d'autres outils Google, nous vous recommandons également d'explorer d'autres outils de test de vitesse gratuits et freemium, tels que WebPageTest (WPT) ou GTMetrix.

WebPageTest propose une gamme de fonctionnalités utiles et d'options de configuration qui facilitent les tests de vitesse au niveau de la page. La configuration avancée vous permet d'ajuster les paramètres de test importants, tels que le navigateur et le type d'appareil, ainsi que l'emplacement du test. Cela vous permet d'affiner votre audit, en particulier si vous savez où se trouvent la majorité des utilisateurs du site, ainsi que leur type d'appareil, ce qui signifie que vous ne vous fiez pas uniquement à l'appareil simulé prédéfini de Google.

Ici, vous pouvez également ajuster les paramètres de connexion à partir de la connexion 3G Fast par défaut, ainsi que bloquer certaines URL si vous souhaitez tester les augmentations de performances pour les scripts gênants. Il existe de nombreuses autres options de configuration que nous n'avons pas répertoriées à explorer, mais celles ci-dessus sont celles que nous avons trouvées les plus utiles lors de l'audit des principaux éléments vitaux du Web.

Une fois qu'un test a été exécuté, accédez à l'onglet Core Web Vitals pour obtenir une ventilation détaillée des performances pour chaque métrique, y compris les pellicules, les chronologies vidéo, les graphiques en cascade, ainsi qu'une ventilation granulaire de l'élément qui a déclenché l'événement - qui sont exportables dans une gamme de formats, et surtout, gratuits !

La vue pellicule est particulièrement utile pour comprendre à quel moment du chargement de la page certains éléments apparaissent visuellement, ce qui peut aider à hiérarchiser les ressources susceptibles d'être chargées plus rapidement. Il s'affichera très clairement s'il y a des changements visuels importants pour aider à identifier les éléments qui en sont la cause.

GTMetrix a des fonctionnalités similaires à WebPageTest, cependant, de nombreuses options avancées gratuites dans WPT ne sont disponibles que dans les packages payants.

4. Apprenez à connaître les graphiques en cascade

En termes simples, un graphique en cascade est une chronologie indiquant quand des fichiers ou des ressources sont demandés, combien de temps ils ont pris pour être téléchargés et quand ils sont visibles sur la page.

Regarder un graphique en cascade peut sembler un peu intimidant vu le décalage, car il y a beaucoup de lignes, de longueurs de barres et de couleurs différentes qui signifient différentes choses - mais ne vous découragez pas ! Passer du temps à apprendre et à comprendre les graphiques en cascade est la compétence la plus importante qu'un SEO technique devrait avoir pour l'audit de vitesse.

Si vous avez l'habitude d'utiliser WebPageTest pour l'audit Web Vitals, nous trouvons leurs graphiques en cascade les plus conviviaux. WebPageTest fournit une clé codée par couleur au-dessus du graphique indiquant les informations de connexion, les types de ressources demandés et d'autres événements tels que l'exécution de JS. Il affiche également visuellement les ressources de blocage de rendu, ainsi que la mise en évidence des ressources demandées qui ont une réponse 3xx ou 4xx.

Conseil utile : faites attention à la teinte claire et foncée des barres horizontales sur la cascade, la teinte claire indique que la ressource a été demandée par le navigateur, tandis que la teinte foncée indique que la ressource est en cours de téléchargement .

Dans l'ensemble, cela aide à mieux comprendre les problèmes de performances sur le site et, à son tour, rend vos recommandations pour les résoudre plus exploitables. Nous recommandons l'article détaillé de Matt Hobbs sur la façon de lire un graphique en cascade pour en savoir plus.

Si vous recherchez des conseils d'experts pour résoudre les problèmes de performances sur votre site Web, veuillez nous contacter ou visiter notre page Services techniques de référencement pour plus d'informations sur la façon dont Semetrical peut vous aider.