Le document aborde les performances web et propose des pratiques et outils pour améliorer la vitesse de chargement des pages. Il souligne l'impact négatif d'un chargement lent sur la conversion et le taux de rebond, tout en proposant des stratégies et techniques pour optimiser les performances. En conclusion, il recommande de s'équiper d'outils et de maintenir des processus pour assurer une qualité continue.

1. Les soirées Performance
Auto-organisées
Irrégulières
Ateliers ou conférences

2. La WebPerf en France
@WebPerfParis
@webperf_fr
Google Group : performance-web
http://www.webperf-france.net/
diigo web performance

3. Bonjour, je m’appelle Jean-Pierre
l
l
l
l
l
13 ans de Web
PHP, JavaScript, HTML5, CSS
Ex :
●
startups, Yahoo!, houra.fr
Expert frontend indépendant
Veilleur :
●
braincracking.org
●
@theystolemynick

4. Performance Web ?
Les 14 premiers
commandements
http://developer.yahoo.com/pe
rformance/rules.html

5. Performances Web ?
Performances classiques :
–
–
Tenir la charge
Haute disponibilité
Performances Frontend :
–
Accélérer l'affichage d'une page

6. Passer des règles aux outils
Règles
●
●
●
●
●
Yahoo! Best Practices
(35 règles)
Google PageSpeed (31
règles)
Test Opquast (41 règles)
…
Jusqu'à 400+ pratiques
●
Outils
●
Analyse réseau
●
Profiling
●
Bonnes pratiques
●
Monitoring
●
RUM
●
Intégration continue

7. Combien coûte une seconde ?

8. Combien coûte une seconde ?
Tunnel d’achat :
1s = -7%
de conversion
Tagman, 2012

9. Combien coûte une seconde ?
Vidéo :
1s = -6% de vue
Akamai 2012

10. Combien coûte une seconde ?
e-commerce
1 s = - 50 %
de conversion
Walmart 2012

11. Combien coûte une seconde ?
Search
l
l
l
l
Bing : 1 s =
- 3 % de CA
Yahoo! : 1 s =
+ 10 % de rebond
Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523

12. Combien coûte une seconde ?
Mobile
l
1 s = -10% de pages vues
l
Après 4 s : 60% d'abandon
/
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster

13. Chantier Webperf
Retour d'expérience client

14. Chantier Webperf
●
Fixer des objectifs
●
Mesurer pour l'utilisateur
●
Coder !
●
Surveiller

15. Objectifs
L'utilisateur type
(Chine, IE 8)
●
accède à la fonctionnalité (Focus champs tracking)
●
en moins de 5 secondes
Les visiteurs distants
●
voient la HP
●
en moins de 2 secondes
(Brésil, Australie)
(textes et image principale)

16. Objectifs - HP

17. Objectifs - tracking

18. Objectifs
Pages trop simples !
Chargement déjà très satisfaisant
JP =>

19. Mesurer
Mesures de vrais utilisateurs
Temps longs confirmés !
(Cool, j'ai du travail)

20. Utilisateurs
10 000 Km
Serveurs
6 000 Km
9 600 Km
16 000 Km
6000 Km
marseillais

21. Utilisateurs
200 ms (H.K.)
280 ms
100 ms
200 ms
380 ms
150 ms
800 ms !
Serveurs
marseillais

22. Mesure synthétique
●
Installation WebPageTest
●
Simulation stable
●
Contention réseau
●
Navigateurs réels
●
Environnements de Dev, integ, preprod, prod…

23. Mesure synthétique
●
Le problème devient visible de tous
●
Le développement peut commencer

24. Les solutions universelles
La configuration du serveur HTTP
●
Configuration du keep-alive
–
–
–
●
KeepAlive
On
KeepAliveTimeout 5
Timeout
10
Activation de la compression (gzip, deflate)

25. Les solutions universelles
Gérer le cache client

26. Le cache utilisateur
●
« vide ton cache »
Sans cache :
●
●
Phases de recette interne
Environnements de
développement
Cache agressif :
●
Cache utilisateur
●
Chaîne de cache réseau

27. Le cache utilisateur
Comment invalider un cache client ?
Méthode standard :
–
Header eTag ou Last-Modified
Méthode performante :
–
–
–
–
Cache long
URL change avec la version du fichier
Maîtrise totale des URL
Processus de compilation

28. Le cache utilisateur
À surveiller automatiquement

29. Gains
Sur la page Tracking souvent visitée
Chargement ÷ 5

30. Les solutions universelles
●
Déblayer le chemin critique
Le serveur a
renvoyé la
page
WTF ?_ ?
L'utilisateur
voit quelque
chose

31. Le chemin critique
Chemin critique
1er rendu

32. Le chemin critique
●
Redirections
●
CSS
●
Polices
●
JavaScript

33. Le chemin critique
●
Redirections
●
1 max
●
Jamais côté client
●
Surtout sur mobile

34. Le chemin critique
CSS
●
Regrouper (2 max)
●
Minifier

35. Le chemin critique
JavaScript
●
Minifier
●
Regrouper (ou pas)
●
5 manières de le
charger

36. Le chemin critique
Polices
●
Limiter en poids
●
Limiter en nombre
●
Asynchrones

37. Le chemin critique
Beaucoup de stratégies possibles.
Globalement, cibler:
HTML + CSS + JS + Fonts
En 6 requêtes MAX

38. Le chemin critique
Résultat HP, après « Bundling »
●
1er Rendu : - 4 secondes
●
Onload :
- 5 secondes

39. Surveiller
Maintenir la performance dans le temps
WPT Monitor
https://github.com/jpvincent/WPT-server

40. Outils d'analyse
Pour les enfants :
ySlow
PageSpeed

41. Outils d'analyse
Pour les guerriers :
WebPageTest

42. Conclusion
●
●
Il y a plusieurs centaines de techniques.
Les techniques principales font déjà gagner
beaucoup.
●
S'équiper en outils pour les autres.
●
Avoir des process pour maintenir la qualité.

43. Questions ?
Viens jouer :
●
Braincracking.org
●
@theystolemynick

44. S'auto-former
En anglais
l
l
l
l
http://www.perfplanet.com/
http
://developer.yahoo.com/performan
ce/rules.html
https://
developers.google.com/speed/docs/
best-practices/rules_intro
http://
www.webpagetest.org/forums
En français
l
l
l
l
l
l
l
http
://checklists.opquast.com/webperf/
https://groups.google.com/forum/?fr
omgroups#!forum/performance-web
@webperf_fr
et
@WebperfParis
https://github.com/edas/webperf-book
http://braincracking.org

45. Crédits
l
l
l
http://www.flickr.com/photos/themonnie/2495892146
http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/
http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/