Outils Web Vitals de base pour augmenter vos scores de performance Web

Le succès de votre site Web dépend de l’impression qu’il laisse sur ses utilisateurs. En optimisant votre Vitals Web de base scores, vous pouvez évaluer et améliorer l’expérience utilisateur. Essentiellement, un web vital est une norme de qualité pour les performances UX et Web établie par Google. Chaque élément vital du Web représente un aspect distinct de l’expérience d’un utilisateur. Il peut être mesuré sur la base de données réelles d’utilisateurs visitant vos sites (métrique de champ) ou dans un environnement de laboratoire (métrique de laboratoire).

En fait, plusieurs métriques centrées sur l’utilisateur sont utilisés pour quantifier les éléments vitaux du Web. Ils continuent également d’évoluer : car il y a eu des conversations autour de l’ajout progressif d’accessibilité et de réactivité en tant qu’éléments vitaux du Web. En réalité, Vitals Web de base ne sont qu’une partie de ce vaste ensemble de signes vitaux.

Il convient de mentionner que les bons scores de Core Web Vitals ne signifie pas nécessairement que votre site Web obtient un score élevé de 90 sur Lighthouse. Vous pourriez avoir un score Lighthouse assez sous-optimal tout en ayant des scores verts Core Web Vitals. En fin de compte, pour l’instant, il semble que ce ne soit que ce dernier qui contribuer au classement SEO – à la fois sur mobile et sur ordinateur.

Alors que la plupart des outils couverts ci-dessous ne reposent que sur des métriques de terrain, d’autres utilisent un mélange de métriques de terrain et de laboratoire. 1

Comparaison PageSpeed

Comparaison PageSpeed est un outil d’évaluation et d’analyse comparative de la vitesse des pages. Il mesure les performances Web d’une seule page en utilisant Google PageSpeed Insights. Il peut également comparer les performances de plusieurs pages de votre site ou celles des sites de vos concurrents. Il évalue les métriques de laboratoire, les métriques de terrain, les ressources de page, la taille du DOM, le temps CPU et les économies potentielles pour un site Web. PageSpeed ​​Compare mesure des éléments vitaux tels que FCP, LCP, FID, CLS et autres en utilisant des données terrestres et de terrain.

Le rapport qu’il génère répertorie les ressources chargées par une page, la taille globale de chaque catégorie de type de ressource et le nombre de requêtes effectuées pour chaque type. De plus, il examine le nombre de demandes de tiers et les ressources créées par une page. Il répertorie également les ressources mises en cache et identifie le Javascript inutilisé. PageSpeed ​​Compare vérifie le DOM de la page et décompose sa taille, sa complexité et ses enfants. Il identifie également les images inutilisées et les changements de mise en page dans un graphique.

Quand cela vient à Temps CPU, l’outil décompose le temps CPU consacré à diverses tâches, le temps d’exécution de Javascript et le blocage du CPU. Enfin, il recommande des optimisations que vous pouvez faire pour améliorer votre page. Il représente graphiquement les optimisations de serveur, de réseau, de CSS, de Javascript, de contenu critique et d’image pour montrer les économies potentielles que vous pourriez réaliser en incorporant des correctifs à votre site. Il donne des suggestions spécifiques aux ressources que vous pourriez faire pour optimiser les performances de votre page. Par exemple, il pourrait vous recommander de supprimer les CSS inutilisés et vous montrer les économies que cela donnerait dans un graphique.

PageSpeed ​​Compare fournit rapports sur les performances Web dans une vue d’ensemble semblable à un tableau de bord avec un ensemble de graphiques. Vous pouvez comparer jusqu’à 12 pages à la fois et présente le rapport de manière simple et lisible puisqu’il utilise PageSpeed ​​Insights pour générer des rapports. Le réseau et le processeur sont limités pour les tests de données de laboratoire pour des conditions plus réalistes.

Vérification en vrac des éléments vitaux Web de base

Vérification des éléments vitaux Web en vrac d’Experte est un outil gratuit qui explore jusqu’à 500 pages de l’ensemble du domaine et fournit un aperçu des scores Core Web Vitals pour eux. Une fois que l’outil a exploré toutes les pages, il commence à effectuer une Vérification des éléments vitaux Web de base pour chaque page et renvoie les résultats dans un tableau. L’exécution du test prend un certain temps, car chaque test de page Web est effectué un par un. C’est donc une bonne idée de le laisser fonctionner pendant 15-30 minutes pour obtenir vos résultats.

Quel est l’avantage alors ? En conséquence, vous obtenez un aperçu complet des pages les plus performantes, et pages les moins performantes — et peut comparer les valeurs dans le temps. Sous le capot, l’outil utilise Pagespeed Insights pour mesurer Core Web Vitals.

Tu peux exporter les résultats sous forme de fichier CSV pour Excel, Google Sheets ou Apple Pages. Le format de tableau dans lequel les résultats sont renvoyés facilite la comparaison des données vitales Web sur différentes pages. Les tests peuvent être exécutés à la fois sur mobile et sur ordinateur.

Alternativement, vous pouvez également consulter l’article de David Gossage sur Comment examiner les scores Core Web Vitals en massedans lequel il partage les scripts et comment obtenir une clé API pour exécuter le script manuellement sans aucun outil ou service externe.

pendre

Si vous recherchez une option légèrement plus avancée pour la vérification en bloc de Core Web Vitals, cet outil couvrira bien vos besoins. Vitesse du site Treo effectue également des audits de vitesse du site en utilisant les données du rapport Chrome UX, Phare et Informations sur la vitesse de la page.

Les audits peuvent être effectués à travers divers appareils et conditions de réseau. De plus cependant, avec pendrevous pouvez suivre les performances de toutes vos pages sur votre sitemap et même configurer alertes pour les régressions de performances. De plus, vous pouvez recevoir des mises à jour mensuelles sur les performances de votre site Web.

Avec Treo Site Speed, vous pouvez également comparer un site Web à ses concurrents. Les rapports générés par Treo sont complets, ventilés par appareils et par zone géographique. Ils sont granulaires et disponibles au niveau du domaine et de la page. Vous pouvez exporter les rapports ou accéder à leurs données à l’aide d’une API. Ils sont aussi partageable.

WebPageTest Core Web Vitals Test

WebPageTest est, bien sûr, une suite de tests de performances à part entière. Pourtant, l’une des fonctionnalités utiles qu’il fournit est une ventilation détaillée des Métriques Web Vitals de base et des pointeurs vers les zones problématiques et comment les résoudre.

Il existe également de nombreux détails liés à Core Web Vitals dans le audit de performance réel, ainsi que des suggestions d’améliorations que vous pouvez activer sans modifier une ligne de code. Pour certains, vous aurez cependant besoin d’un compte pro.

Débogueurs de changement de mise en page cumulatif

Fondamentalement, le Débogueur CLS vous aide à visualiser CLS. Il utilise le API d’instabilité de mise en page dans Chromium pour charger les pages et calculer leur CLS. Le CLS est calculé pour les appareils mobiles et de bureau et prend quelques minutes. Le réseau et le processeur sont limités pendant le test et les pages sont demandées aux États-Unis.

La Le débogueur CLS génère une image GIF avec des animations montrant comment les éléments de la fenêtre se déplacent. Le GIF généré est important pour visualiser pratiquement les changements de mise en page. Les éléments qui contribuent le plus à CLS sont marqués de carrés pour voir leur taille et leur disposition changer visuellement. Ils sont également répertoriés dans un tableau avec leurs scores CLS.

Bien que le CLS soit initialement calculé comme une métrique de laboratoire, le débogueur CLS reçoit également les mesures CLS du rapport Chrome UX. Le CLS est donc une moyenne mobile des 28 derniers jours. Le débogueur CLS vous permet d’ignorer les interstitiels de cookies. De plus, vous pouvez également générer des rapports pour des pays spécifiques.

Alternativement, vous pouvez également utiliser le Générateur GIF de décalage de mise en page. L’outil est disponible sur sa page Web ou en tant que outil de ligne de commande. Avec l’outil CLI, vous pouvez spécifier des options supplémentaires, telles que largeur et hauteur de la fenêtreles cookies à fournir à la page, les options de sortie GIF et la méthode de calcul CLS.

Polypane Web Vitals

Si vous souhaitez conserver vos scores Core Web Vitals à proximité pendant le développement, Polypane Web Vitals est une fonctionnalité fantastique qui mérite d’être examinée. Polypane est un navigateur autonome pour le développement Web, qui comprend des outils d’accessibilité, de conception réactive et, plus récemment, de performances et de Core Web Vitals.

Vous pouvez collecter automatiquement les scores Web Vitals pour chaque page, et ceux-ci sont ensuite affichés au bas de votre page. L’outil fournit également une visualisation LCP et affiche également les changements de mise en page.

Mentions notables

• Vérificateur Web Vitals Core de Calibre vous permet de vérifier Core Web Vitals pour votre page en un seul clic. Il utilise les données du rapport Chrome UX et mesure LCP, CLS, FID, TTFB, INP et FCP.

(vf, yk, il)