Il est important de mesurer la vitesse des pages en déboguant un site Web lent.

Tous les navigateurs Chrome disposent d’outils intégrés pour aider à résoudre les raisons pour lesquelles une page est lente et ne fonctionne pas aussi bien qu’elle le pourrait.

L’avantage des navigateurs basés sur Chrome et Firefox est qu’ils peuvent être étendus avec des outils qui rendent les sites de dépannage rapides et faciles.

Chrome et Firefox prennent en charge les modules complémentaires de navigateur.

Firefox les appelle des modules complémentaires et dans l’écosystème Chrome, ils s’appellent des extensions.

Les extensions de navigateur et les modules complémentaires étendent les fonctionnalités des navigateurs de manière personnalisée en fonction des besoins de l’utilisateur.

Pourquoi utiliser une extension de navigateur de vitesse de page

Un débogueur basé sur un navigateur comme Chrome Dev Tools est une collection d’outils, comme une boîte à outils.

Si vous ne voulez qu’un seul outil, vous n’avez pas de chance car le navigateur propose toute la collection en même temps.

Cela signifie qu’un éditeur doit d’abord apprendre à naviguer dans tous les différents menus, onglets et écrans, dont beaucoup offrent des outils qui ne sont pas nécessairement la vue d’ensemble que vous souhaitez.

Et c’est pourquoi les extensions sont une alternative valable à l’utilisation des outils de dépannage intégrés dans un navigateur.

Vous pouvez simplement choisir l’outil exact que vous voulez et ignorer la courbe d’apprentissage afin d’obtenir les mesures dont vous avez vraiment besoin au moment où vous en avez besoin.

Extension Google Lighthouse pour Chrome et Firefox

Lighthouse est un excellent outil pour obtenir un aperçu facile à comprendre des performances des pages Web avec la possibilité d’approfondir les commentaires de diagnostic et les conseils pour rendre une page Web plus rapide.

Il existe une page Web Google Lighthouse autonome, mais vous devez copier l’URL de la page pour laquelle vous souhaitez des données, puis accéder à l’outil Lighthouse.

Avec l’extension Lighthouse, toute la puissance de l’outil est disponible en un clic.

Il vous suffit de cliquer sur l’icône de l’extension, puis sur le bouton bleu Générer un rapport.

L’extension Lighthouse créera un nouvel onglet de navigateur et générera le rapport Lighthouse complet.

Google Lighthouse Générer un rapport

La nouvelle page Web affichera un écran d’attente pendant que Lighthouse génère le rapport.

Écran d'attente Google Lighthouse

Le haut de la page Lighthouse contient les scores numériques de la page Web.

Présentation de Google Lighthouse

Et, si vous faites défiler vers le bas, vous pouvez voir les données détaillées qui aident à diagnostiquer et à résoudre les problèmes.

Tout ce que vous avez à faire est de suivre les liens pour plus d’informations sur ce qu’est un problème et des suggestions sur la façon de résoudre ces problèmes.

Rapport de page complète Google Lighthouse

Google a développé des versions de Lighthouse pour Chrome et Firefox.

Extension du navigateur pour le temps de chargement de la page

L’extension de navigateur Page Load Time pour Chrome et aussi pour Firefox fournit une métrique de chargement de page très précise car elle utilise l’API Navigation Timing, qui est décrite sur la page du développeur Mozilla pour l’API Navigation Time.

L’extension de navigateur a été installée plus de 100 000 fois et a été évaluée 258 fois.

Une fois installé, tout ce que vous avez à faire est de visiter une page et de regarder l’icône Page Load Time dans le coin supérieur droit du navigateur.

L’icône signale automatiquement le temps qu’il a fallu pour télécharger la page Web.

Icône d'extension du temps de chargement de la page

Cliquer sur l’icône affiche plus de détails sur un large éventail de facteurs qui racontent une histoire plus complète sur la raison pour laquelle la page s’est téléchargée aussi rapidement ou aussi lentement qu’elle l’a fait.

Détails de l'extension du temps de chargement de la page

Comme vous pouvez le voir dans l’illustration ci-dessus, l’extension Page Load Time Browser révèle une quantité étonnante d’informations organisées dans un format facile à comprendre.

Le rapport détaillé montre les retards causés par une redirection, le temps de réponse pour le DNS et le temps de connexion.

Le rapport calcule également le temps de réponse depuis le début de la demande de la page Web et le temps qui s’écoule jusqu’à l’achèvement.

Il existe des mesures précises pour savoir quand les scripts sont exécutés, le contenu est chargé et combien de temps la page a mis pour se charger finalement.

C’est une quantité extraordinaire d’informations affichées d’une manière facile à comprendre.

Voici l’extension de temps de chargement de la page pour Chrome et le module complémentaire Load Timer pour Firefox.

Analyseur de performance

L’extension Performance-Analyser pour le navigateur Chrome est comme l’extension de navigateur de temps de chargement de page, mais elle va plus loin dans ce qu’elle couvre.

Il utilise les API Resource, Navigation et User Timing

Cette extension génère des graphiques circulaires colorés pour fournir une représentation visuelle de diverses mesures telles que les demandes par domaine et fournit les informations de l’API de synchronisation de navigation dans un graphique en cascade pratique qui visualise le temps de rendu.

Selon le descriptif :

« Performance-Analyser (alias Performance-Analyzer) aide à analyser la page actuelle via les API Resource, Navigation et User Timing – voir les demandes par type, domaine, temps de chargement, marques et plus – instantanément. »

Inspecteur de taille de page

L’extension Page Size Inspector pour Chrome est particulièrement utile car elle fournit un aperçu de diverses mesures, notamment le nombre de demandes de polices et la taille non compressée de ce téléchargement.

Ce qui distingue cette extension, c’est l’interface facile à comprendre ainsi que la taille en octets des ressources de page Web suivantes :

  • HTML
  • JS
  • CSS
  • Images
  • Ajax
  • Polices

L’extension de navigateur Chrome fournit également des durées de téléchargement en secondes pour un aperçu rapide et pratique des mesures de vitesse de page à portée de main, directement sur la page.

Checkbot : testeur de référencement, de vitesse Web et de sécurité

Cette extension regroupe plusieurs outils liés au SEO.

Ce qui est intéressant avec cette extension, c’est qu’elle fournit des données qui peuvent aider à mieux comprendre pourquoi une page Web prend autant de temps à se télécharger.

Le plugin rapporte sur les variables suivantes :

  • Minification des fichiers.
  • Informations sur la compression du réseau.
  • Mise en cache des fichiers.
  • Rendu bloquant CSS et JavaScript.
  • Dupliquer CSS et JavaScript.
  • CSS et JavaScript en ligne excessifs.
  • Redirections et redirections enchaînées.

Tous les points de données ci-dessus sont extrêmement utiles pour comprendre les problèmes éventuels qui doivent être résolus.

En prime, l’extension Chrome Checkbot : SEO, Web Speed ​​& Security Tester propose également diverses données liées au référencement, et l’une de mes préférées est les données d’en-têtes de sécurité qui peuvent vous dire si un site n’est pas sécurisé en raison d’en-têtes de sécurité manquants.

Extensions de navigateur de vitesse de page

Les extensions de navigateur de vitesse de page sont extrêmement utiles pour les éditeurs et les développeurs.

Ils peuvent vous aider à identifier rapidement les problèmes sur le moment sans avoir à ouvrir une autre page Web, puis à coller une URL sur un autre site Web.

Les diagnostics de vitesse de page peuvent être effectués directement pendant que vous êtes sur le site, automatiquement ou en cliquant sur un bouton.

Davantage de ressources:

  • 13 meilleures extensions Chrome pour le marketing numérique et le référencement
  • Comment améliorer les performances d’un site : résultats rapides de l’audit en 4 vitesses
  • Core Web Vitals : un guide complet

Image en vedette : StudioByTheSea/Shutterstock

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici