Home

Perfbar est un 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.

Perfbar est un 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.

Un seul script à installer sur votre page via npm, bower ou directement en la téléchargeant depuis son repo.

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.

Voici un exemple d’utilisation basique de la barre:

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>PerfBar</title>
05.<meta charset='utf-8'>
06.<meta http-equiv="X-UA-Compatible" content="IE=edge">
07.<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
08.</head>
09.<body>
10. 
11.<h1>Hello World!</h1>
12. 
13.<!-- NOTE: Place the script at the bottom of the page for better performancehttps://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-6-move-scripts-bottom-7200.html -->
14. 
15.<!-- This is all you need to start using PerfBar! -->
16.<script type="text/javascript" src="javascripts/perfBar.js"></script>
17.<script type="text/javascript">
18.perfBar.init({
19.// list of the built-in metrics http://lafikl.github.io/perfBar/#list
20.budget: {
21.// the key is the metric id
22.'loadTime': {
23.max: 200
24.},
25.'redirectCount': {
26.max: 1
27.},
28.'globalJS': {
29.min: 2,
30.max: 5
31.}
32.}
33.});
34.</script>
35. 
36.</body>
37.</html>

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.

A tester si vous voulez améliorer vos perfs web en développement, à accompagner à des outils plus poussés pour aller plus loin dans vos optimisations.

Site Officiel

Advertisements

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s