Avant d'entamer un chantier de performance Web, il convient de mettre en place du monitoring. En particulier si vous voulez gérer sur le long terme la qualité, si vous avez beaucoup de sites et de pages à gérer. Cette présentation est tirée d'un retour d'expérience d'installation de monitoring spécialisé en performance Web, avec des logiciels gratuits, et un serveur peu cher.

1. Webperf
Industrialisation : le monitoring à
pas cher
Jean-pierre VINCENT

2. Qui ça ?
Jean-pierre VINCENT
braincracking.org - @theystolemynick
Expert indépendant :
• Performance Web
• JavaScript, HTML5, CSS3

3. Monitorer ?
1. Point de départ d'un projet Webperf
2. Métriques de qualité

4. Convaincre, se rassurer

5. Quantifier

6. Gérer la masse

7. Cheap ?
● 50 tests / minute
● Spécialisé Webperf
● URLs internes
● Navigateurs et qualité réseau connus
● Alertes, graphes, détails

8. Cheap ?
● 50 tests / minute
● Spécialisé Webperf
● URLs internes
● Navigateurs et qualité réseau connus
● Alertes, graphes, détails
50€*

9. Outils
● WebPageTest
● WPT monitor
● Graphite
● 1 serveur
● Machines virtuelles
● De la sueur

10. WebPageTest privé

12. WebPageTest
● Agents

13. WebPageTest
●Exemple d'installation pour les
agents :
• 1 dedibox à 50€ / mois
• 16Go de RAM
• 10-15 XP / IE8 virtualisés

14. WebPageTest
● Code : historique
● Doc d'install : bien mais pas top
● Contribution : à l'ancienne
● API : existante…

15. WebPageTest
bit.ly/XAA8Lz

16. WPT monitor

17. WPT monitor

18. WPT monitor
Scripting :
● Serveur tiers morts
● Sans code tiers
● Sans CDN
● Navigation complexe

19. WPT monitor

20. WPT monitor

21. WPT monitor

22. WPT monitor
● Code : marchote
● Doc d'install : devine !
● Contribution :
● Interface : perfectible
● Alertes : bof
● Peu de métriques

23. WPT monitor
Conseils :
● Paramétrer Doctrine sur mysql
● Prévoir 1 Mo / test
● Bon pour le paramétrage des tests
● Ré-écrire les alertes
● Remplacer la visualisation

24. Graphite

25. Graphite
● Répandu
● Joli ^_^
● Ultra configurable
● API simple

26. Graphite
Pousser une valeur :
file_put_content
('udp://...',
“path1.path2.Key valeur timestampn“
);

27. Hacker WPT monitor
Explorer l'API WPT
http://wpt.org/xmlResult.php?test=xxx
Des centaines d'infos :
• Screenshots
• Courbes CPU / réseau
• Répartitions par domaine
• Scores, notes, conseils
• headers...

28. Hacker WPT monitor
Dans la fonction processResultsForAll
ExportResultToExternal(
$xml->data->median->firstView->TTFB,
'results.'.
makeLabelFromJobID($wptJobId).
'.timeToFirstByte'
);

29. Hacker WPT monitor

30. Hacker WPT monitor
Dans la fonction processAlertsForJob
ExportResultToExternal(
1,
'alerts.'.$alertLabel.'.
'.$alert['AlertOn']
);

31. Hacker WPT monitor

33. Compléments
Étendre Graphite :
● Tasseo : Dashboard ( https://github.com/obfuscurity/tasseo)
● Umpire : Alertes ( https://github.com/heroku/umpire )
●Uptime : Historisation, Alertes,
Dashboard (https://github.com/fzaninotto/uptime)

34. Conclusion
● Le cheap, c'est chic
● À comparer aux solutions payantes
● Le monitoring, c'est sur le long terme

35. Merci
Questions ?
braincracking.org