Perfbar, script JS permettant d’auditer les performances frontend de vos pages web en exposant les différentes métriques dans une barre profiler sur vos pages web.

On connait tous l’intérêt d’optimiser les performances web de ses pages, mais il n’est pas toujours évident de les auditer rapidement et efficacement.

PerfBar apporte une solution assez simplifiée pour mesurer les principales métriques frontend de vos pages, à travers une toolbar Javascript facile à intégrer.

Par défaut, il existe plus d’une douzaine de métriques prêtes à emploi:

  • Temps de chargement
  • Latence
  • Frontend: Temps de chargement d’une page
  • Backend: Temps de réponse du serveur
  • Durée de réponse
  • Durée de requête
  • Nombre de redirections
  • Durée de chargement d’un évènement
  • Temps de chargement du contenu DOM
  • Durée totale de chargement de la page par le navigateur
  • Nombre d’éléments DOM
  • Nombre de scripts JS dans la page
  • Nombre de fichiers CSS dans la page
  • Nombre d’images chargées dans la page
  • Nombre d’images en Data URI
  • Nombre de lignes de CSS inline
  • Nombre de lignes de JS inline
  • Nombre de fichiers CSS hébergés sur un serveur tiers
  • Nombre de fichiers JS hébergés sur un serveur tiers
  • Nombre de variables définies sur le scope global Javascript

Mais il est aussi possible de créer vos propres métriques à l’aide de l’API embarquée dans le script.

Pour chaque métrique, il est possible de définir des « budgets » max et minimum pour voir si l’on se trouve dans la moyenne ou si une métrique n’est pas bonne sur sa page.

PerfBar