Core Web Vitals: 7 outils et techniques pour identifier les goulots d’étranglement de performance

NRZ.Digital
0 0

Les Core Web Vitals (CWV) sont un sujet brûlant pour le moment. Nous examinerons ici certains des outils que nous pouvons utiliser pour identifier les problèmes de performances du site Web, en préparation de la prochaine mise à jour du classement de Google en mai 2021.

Besoin d’un rappel sur Core Web Vitals? Découvrez ce qu’ils sont et comment les optimiser dans mon article Core Web Vitals Explained.

Surveillance automatisée des métriques CWV

Si vous avez plusieurs sites Web ou pages clés que vous souhaitez surveiller au fil du temps, sans avoir à exécuter manuellement test après test, cette feuille de calcul par Digital Inspiration pourrait être pour vous. Il suffit de saisir une clé API Lighthouse PageSpeed, de connecter quelques URL et c’est parti!

La feuille de calcul aide à identifier les problèmes de performance potentiels autour des indicateurs clés de CWV et à quel moment ils ont pu se produire, ce qui peut à son tour nous donner des indices sur ce qui pourrait en être la cause. Il peut également être utilisé pour démontrer comment les scores de vitesse peuvent changer naturellement au fil du temps à mesure qu’un site Web se développe ou lorsque des modifications sont apportées aux algorithmes de vitesse de page sous-jacents.

Nous utilisons une version modifiée de cette feuille de calcul depuis quelques mois et cela nous a aidés à identifier les opportunités d’améliorer les performances d’un certain nombre de sites Web.

Vitaux Web de base automatisés Hallam

PageSpeed ​​Insights

PageSpeed ​​Insights de Google est mon outil de prédilection pour les premières enquêtes de haut niveau sur les performances et les problèmes liés à CWV, pour les appareils mobiles et de bureau. Les rapports contiennent des «données de terrain»; comment les utilisateurs du monde réel expérimentent le site Web avec les données Lighthouse ‘Lab’ qui simulent un chargement de page, ce qui est utile pour des tests répétables et cohérents.

Les métriques Core Web Vital sont clairement mises en évidence avec des indicateurs simples à code couleur. Les indicateurs médiocres sont surlignés en rouge, bons en vert. Ces mesures sont combinées pour donner un score de vitesse global, et vous avez besoin de 90% ou plus pour une «passe» verte.

Une série de recommandations et de diagnostics sont également donnés dans ces rapports, classés par éléments à impact le plus élevé en termes de nombre total de secondes pouvant être économisées.

Exemple de PageSpeed ​​Insights

Moniteur de performances Chrome DevTools

Pour une analyse plus détaillée des performances et des problèmes liés à CWV, je me tourne souvent vers l’Analyseur de performances de Chrome dans DevTools et certains des principaux indicateurs CWV que j’utilise sont numérotés dans la capture d’écran ci-dessous.

  1. Tout d’abord, vous voudrez vous assurer que vous exécutez le moniteur de performances à la bonne résolution, car les éléments LCP et CLS changent souvent à des résolutions différentes. J’ai le mien réglé sur 350 x 636 pixels pour reproduire la vue mobile PageSpeed ​​Insights.
  2. Avant d’exécuter le rapport, vous souhaiterez peut-être également simuler la connectivité et l’alimentation d’un appareil mobile. Je sélectionne souvent le ralentissement rapide du processeur 3g et 4x.
  3. La sélection de la métrique LCP une fois qu’un rapport a été généré identifie le plus grand élément. Cela doit être aussi proche que possible du FCP (First Contentful Paint). S’il y a un écart, vous voudrez identifier et rationaliser la livraison du plus grand élément.
  4. Les tâches longues du processeur sont mises en évidence par les diagonales rouges sur les barres grises. Ceci est souvent causé par un JavaScript plus lourd, représenté par les barres jaunes et affectera vos métriques d’interactivité (FID, TBT et TTI). En parcourant les barres ci-dessous, vous pointez généralement vers les fichiers et fonctions JavaScript incriminés.
  5. Les changements de disposition sont mis en évidence par ces barres rouges et leur sélection mettra généralement en évidence l’élément qui a été déplacé. Un grand nombre de ces derniers créera des valeurs CLS plus élevées.
  6. La vue cadre peut être un excellent moyen de mettre en évidence visuellement la façon dont le contenu apparaît et la mise en page est décalée lors de son chargement. Pour des valeurs CLS élevées, la cause est souvent évidente à partir des cadres. Dans cet exemple, une grande bannière de cookie provoque le déplacement de la mise en page en tant que contenu poussé vers le bas.

Extensions Chrome Web Vitals

Core SERP Vitals

L’extension SERP Vitals affiche un indicateur pratique pour les métriques LCP, FID et CLS directement dans les résultats de recherche. Il est idéal pour l’analyse des concurrents et peut donner une indication rapide de la vitesse à laquelle une page Web est susceptible d’être avant que vous ne la visitiez.

Les données sont compilées de manière anonyme à partir d’utilisateurs réels par le Rapport d’expérience utilisateur Chrome (CrUX). Cependant, il n’est pas disponible pour tous les sites, car les nouveaux sites ou sites avec peu de trafic n’auront pas recueilli suffisamment de points de données.
Extension de Chrome Vitals Core SERPs

Vitaux Web

Le pratique Extension Web Vitals mesure les 3 métriques clés CWV pour les utilisateurs de bureau dans Chrome en temps réel, et sa coloration des feux de signalisation fournit un indicateur rapide lorsque vous naviguez sur un site Web. Comme il ne repose pas sur des données utilisateur collectées en externe, il peut être idéal pour les développeurs travaillant dans un environnement local de détecter tout problème dès le début.
Exemple d'extension Web Vitals

Phare

Les extensions Lighthouse fournissent un itinéraire rapide vers la même fonctionnalité de rapport disponible dans Chrome DevTools et extrait les données de laboratoire à l’aide de l’API Lighthouse plutôt que des données de terrain d’utilisateurs réels via CrUX.

Le rapport sur les performances est très similaire à l’analyse mobile de PageSpeed ​​Insights, fournissant des diagnostics et des recommandations similaires. Des rapports supplémentaires sont également générés pour le référencement, l’accessibilité et les meilleures pratiques.

Rapport sur les performances de l'extension du phare

Visualiseur de vitesse du site Treo

Le visualiseur sur https://treo.sh/sitespeed affiche les métriques CWV au fil du temps, filtrables par appareil, connectivité et région géographique. Il est mis à jour chaque semaine et utilise les données du rapport CrUX.

Dans l’exemple ci-dessous pour bbc.co.uk, nous pouvons voir comment la métrique CLS a considérablement baissé au cours des 3 derniers mois, donnant des résultats verts pour toutes les métriques de base. C’est un excellent moyen d’analyser les performances des métriques CWV au fil du temps ou de mener une analyse des concurrents.

Rapport de vitesse du site Treo

Visualiser les demandes de tiers

Les mesures d’interactivité pour le FID, le TTI et le TBT peuvent souvent être difficiles à dépanner. PageSpeed ​​Insights peut être utile pour identifier certains des scripts tiers les plus lourds, mais parfois une visualisation décente peut communiquer beaucoup plus facilement l’impact de ces scripts.

L’outil de cartographie des requêtes https://requestmap.herokuapp.com/ est génial pour cela. Les cartes générées contiennent des nœuds pour chaque demande tierce, avec des nœuds plus grands représentant des scripts à impact plus élevé. Si vos métriques d’interactivité sont médiocres, il y a de fortes chances que vous voyiez beaucoup de nœuds sur cette carte.

Voici un exemple d’un site qui dispose de 26 secondes pour la métrique Time to Interactive TTI. Un rapide coup d’œil sur la carte montre un widget de chat en direct, représenté par les nombreux nœuds bleu foncé en haut, représentant plus de la moitié du nombre total de demandes.

L’outil de carte de demande est également un excellent moyen de déterminer à partir de quel emplacement les scripts ou autres ressources sont chargés. Nous pouvons voir ci-dessous plusieurs nœuds provenant directement du nœud jaune de Google Tag Manager dans cet exemple.

Demande de mappage pour les scripts lourds

Cascades dans WebPageTest

Rapports WebPageTest fournissent beaucoup plus de détails que PageSpeed ​​Insights et peuvent être générés à partir de divers appareils et emplacements.

J’utilise souvent cet outil pour l’analyse en cascade, qui visualise la séquence de chargement de tous les actifs sur une page. Cela peut être particulièrement utile lorsque vous essayez de rationaliser votre contenu critique «au-dessus du pli». Par exemple, si vous optimisez pour LCP et que le plus grand au-dessus de l’élément de pli est une image ou une typographie, vous voudrez peut-être implémenter le préchargement sur les plus grands fichiers d’image et de police, et vérifier que ces éléments préchargés apparaissent en haut de la cascade .Cascade WebPageTest



Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleppy
Sleppy
0
Angry
Angry
0
Surprise
Surprise
0

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Laisser un commentaire

Next Post

Webinaires - Paxful Philippines

Prochains webinaires Bientôt disponible. Enregistrements de webinaires précédents 08/06/2020 – Comment acheter du Bitcoin sur SnapEx via Paxful Nous rejoignons ce soir SnapEx Philippines pour parler de la façon dont vous pouvez acheter des bitcoins en utilisant Paxful Virtual Kiosk directement sur la plate-forme SnapEx. Nous parlerons également de la […]

Abonnez-vous maintenant