Il y a plusieurs centaines de techniques pour accélérer ses pages côté client, mais à travers ce retour d'expérience nous allons voir qu'en ayant simplement appliqué les bases on a pu diviser les temps d'affichage utilisateur par 5. Présenté à la soirée Webperf de novembre 2013

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/