Core Web Vitals : 7 outils et techniques pour identifier les goulots d'étranglement des performances

Les Core Web Vitals (CWV) sont un sujet brûlant en ce moment. Ici, nous examinerons certains des outils que nous pouvons utiliser pour identifier les problèmes de performances du site Web, en vue 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 de Digital Inspiration pourrait être pour vous. Il suffit de saisir une clé API Lighthouse PageSpeed, de brancher quelques URL et c'est parti !

La feuille de calcul aide à identifier les problèmes de performance potentiels autour des indicateurs clés de la CWV et à quel moment ils ont pu se produire, ce qui peut à son tour nous donner des indices sur 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é à identifier les opportunités d'améliorer les performances d'un certain nombre de sites Web.

Aperçu de la vitesse de page

PageSpeed ​​Insights de Google est mon outil de prédilection pour les enquêtes initiales de premier plan sur les problèmes de performances et de CWV, pour les appareils mobiles et de bureau. Les rapports contiennent des « données de terrain » ; la façon dont les utilisateurs réels perçoivent le site Web ainsi que 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 de base de Web Vital sont clairement mises en évidence avec des indicateurs simples à code couleur. Les métriques médiocres sont surlignées en rouge, les bonnes en vert. Ces mesures sont combinées pour donner un score de vitesse global, et vous avez besoin de 90 % ou plus pour un « pass » vert.

Une série de recommandations et de diagnostics sont également fournis dans ces rapports, classés par éléments ayant l'impact le plus élevé en termes de secondes totales pouvant être enregistrées.

Moniteur de performances Chrome DevTools

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

1. Tout d'abord, vous devez vous assurer que vous exécutez le moniteur de performances à la résolution correcte, car les éléments LCP et CLS changeront souvent à des résolutions différentes. J'ai le mien réglé sur 350 x 636 pixels pour reproduire la vue mobile de PageSpeed ​​Insights.
2. Avant d'exécuter le rapport, vous pouvez également souhaiter simuler la connectivité et la puissance d'un appareil mobile. Je sélectionne souvent le ralentissement du processeur Fast 3g et 4x.
3. La sélection de la métrique LCP une fois qu'un rapport a été généré identifie quel est l'élément le plus important. Cela devrait ê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 CPU longues sont mises en évidence par les diagonales rouges sur les barres grises. Cela 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). L'exploration des barres ci-dessous pointe généralement vers les fichiers et fonctions JavaScript incriminés.
5. Les décalages de mise en page 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é. Une grande quantité d'entre eux créera des valeurs CLS plus élevées.
6. La vue du 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 modifiée au fur et à mesure qu'il est chargé. Pour les valeurs CLS élevées, il est souvent évident à partir des cadres quelle en est la cause. Dans cet exemple, une grande bannière de cookie provoque le changement de mise en page en tant que contenu poussé vers le bas.

Extensions Chrome Web Vitals

Éléments vitaux SERP de base

L'extension SERP Vitals affiche un indicateur pratique pour les métriques LCP, FID et CLS directement dans les résultats de recherche. C'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 Chrome User Experience Report (CrUX). Cependant, il n'est pas disponible pour tous les sites, car les nouveaux sites ou les sites peu fréquentés n'auront pas recueilli suffisamment de points de données.

Web Vitals

L'extension pratique Web Vitals mesure les 3 métriques clés CWV pour les utilisateurs de bureau dans Chrome en temps réel, et la coloration de ses feux de circulation 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 rapidement les problèmes.

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 les données de terrain d'utilisateurs réels via CrUX.

Le rapport de performance est très similaire à l'analyse mobile de PageSpeed ​​Insights, donnant 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.

Visualiseur de vitesse de 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 chuté de manière significative au cours des 3 derniers mois, donnant des résultats de « passe » 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 d'effectuer une analyse des concurrents.

Visualiser les demandes de tiers

Les métriques d'interactivité pour FID, TTI et 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 l'impact de ces scripts beaucoup plus facilement.

L'outil de mappage des demandes https://requestmap.herokuapp.com/ est idéal pour cela. Les cartes générées contiennent des nœuds pour chaque demande de tiers, avec des nœuds plus grands représentant des scripts à plus fort impact. Si vos mesures d'interactivité sont médiocres, il est probable que vous verrez beaucoup de nœuds sur cette carte.

Voici un exemple d'un site qui a 26 secondes pour la métrique Time to Interactive TTI. Un rapide coup d'œil à 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 total des demandes.

L'outil de mappage des demandes est également un excellent moyen de déterminer d'où les scripts ou autres actifs sont chargés. Nous pouvons voir ci-dessous plusieurs nœuds provenant directement du nœud jaune Google Tag Manager dans cet exemple.

Cascades dans WebPageTest

Les 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 de la ligne de flottaison ». Par exemple, si vous optimisez pour LCP et que le plus grand élément au-dessus du pli est une image ou une typographie, vous souhaiterez peut-être implémenter le préchargement sur les fichiers d'image et de police les plus volumineux et vérifier que ces éléments préchargés apparaissent en haut de la cascade. .

Incertain de l'impact de CWV sur votre site, envoyez-nous un message dès aujourd'hui.