Les soirées Performance

Auto-organisées
Irrégulières
Ateliers ou conférences
La WebPerf en France
@WebPerfParis
@webperf_fr
Google Group : performance-web
http://www.webperf-france.net/
diigo web per...
Bonjour, je m’appelle Jean-Pierre

l

l

l

l

l

13 ans de Web
PHP, JavaScript, HTML5, CSS
Ex :
●
startups, Yahoo!, houra...
Performance Web ?
Les 14 premiers
commandements

http://developer.yahoo.com/pe
rformance/rules.html
Performances Web ?
Performances classiques :
–
–

Tenir la charge
Haute disponibilité

Performances Frontend :
–

Accélére...
Passer des règles aux outils
Règles
●

●

●

●

●

Yahoo! Best Practices
(35 règles)
Google PageSpeed (31
règles)
Test Opq...
Combien coûte une seconde ?
Combien coûte une seconde ?

Tunnel d’achat :
1s = -7%
de conversion

Tagman, 2012
Combien coûte une seconde ?

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

e-commerce
1 s = - 50 %
de conversion
Walmart 2012
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 Go...
Combien coûte une seconde ?
Mobile
l

1 s = -10% de pages vues

l

Après 4 s : 60% d'abandon

/

http://www.themediabriefi...
Chantier Webperf

Retour d'expérience client
Chantier Webperf
●

Fixer des objectifs

●

Mesurer pour l'utilisateur

●

Coder !

●

Surveiller
Objectifs
L'utilisateur type

(Chine, IE 8)

●

accède à la fonctionnalité (Focus champs tracking)

●

en moins de 5 secon...
Objectifs - HP
Objectifs - tracking
Objectifs
Pages trop simples !

Chargement déjà très satisfaisant
JP =>
Mesurer

Mesures de vrais utilisateurs

Temps longs confirmés !
(Cool, j'ai du travail)
Utilisateurs
10 000 Km
Serveurs
6 000 Km
9 600 Km
16 000 Km
6000 Km

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

Serveurs
marseillais
Mesure synthétique
●

Installation WebPageTest

●

Simulation stable

●

Contention réseau

●

Navigateurs réels

●

Envir...
Mesure synthétique
●

Le problème devient visible de tous

●

Le développement peut commencer
Les solutions universelles
La configuration du serveur HTTP
●

Configuration du keep-alive
–
–
–

●

KeepAlive
On
KeepAliv...
Les solutions universelles
Gérer le cache client
Le cache utilisateur
●

« vide ton cache »
Sans cache :
●

●

Phases de recette interne
Environnements de
développement
Ca...
Le cache utilisateur
Comment invalider un cache client ?
Méthode standard :
–

Header eTag ou Last-Modified

Méthode perfo...
Le cache utilisateur
À surveiller automatiquement
Gains
Sur la page Tracking souvent visitée

Chargement ÷ 5
Les solutions universelles
●

Déblayer le chemin critique

Le serveur a
renvoyé la
page

WTF ?_ ?

L'utilisateur
voit quel...
Le chemin critique

Chemin critique

1er rendu
Le chemin critique
●

Redirections

●

CSS

●

Polices

●

JavaScript
Le chemin critique
●

Redirections

●

1 max

●

Jamais côté client

●

Surtout sur mobile
Le chemin critique
CSS

●

Regrouper (2 max)

●

Minifier
Le chemin critique
JavaScript
●

Minifier

●

Regrouper (ou pas)

●

5 manières de le
charger
Le chemin critique
Polices
●

Limiter en poids

●

Limiter en nombre

●

Asynchrones
Le chemin critique
Beaucoup de stratégies possibles.
Globalement, cibler:
HTML + CSS + JS + Fonts
En 6 requêtes MAX
Le chemin critique
Résultat HP, après « Bundling »

●

1er Rendu : - 4 secondes

●

Onload :

- 5 secondes
Surveiller
Maintenir la performance dans le temps
WPT Monitor

https://github.com/jpvincent/WPT-server
Outils d'analyse
Pour les enfants :
ySlow

PageSpeed
Outils d'analyse
Pour les guerriers :
WebPageTest
Conclusion
●

●

Il y a plusieurs centaines de techniques.
Les techniques principales font déjà gagner
beaucoup.

●

S'équ...
Questions ?

Viens jouer :
●

Braincracking.org

●

@theystolemynick
S'auto-former
En anglais
l

l

l

l

http://www.perfplanet.com/
http
://developer.yahoo.com/performan
ce/rules.html
https:...
Crédits

l

l

l

http://www.flickr.com/photos/themonnie/2495892146
http://www.flickr.com/photos/76657755@N04/7214596024/i...
Upcoming SlideShare
Loading in...5
×

Accélération des pages Web : les bases en exemple

921

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
921
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Accélération des pages Web : les bases en exemple

  1. 1. Les soirées Performance Auto-organisées Irrégulières Ateliers ou conférences
  2. 2. La WebPerf en France @WebPerfParis @webperf_fr Google Group : performance-web http://www.webperf-france.net/ diigo web performance
  3. 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. 4. Performance Web ? Les 14 premiers commandements http://developer.yahoo.com/pe rformance/rules.html
  5. 5. Performances Web ? Performances classiques : – – Tenir la charge Haute disponibilité Performances Frontend : – Accélérer l'affichage d'une page
  6. 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. 7. Combien coûte une seconde ?
  8. 8. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
  9. 9. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
  10. 10. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
  11. 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. 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. 13. Chantier Webperf Retour d'expérience client
  14. 14. Chantier Webperf ● Fixer des objectifs ● Mesurer pour l'utilisateur ● Coder ! ● Surveiller
  15. 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. 16. Objectifs - HP
  17. 17. Objectifs - tracking
  18. 18. Objectifs Pages trop simples ! Chargement déjà très satisfaisant JP =>
  19. 19. Mesurer Mesures de vrais utilisateurs Temps longs confirmés ! (Cool, j'ai du travail)
  20. 20. Utilisateurs 10 000 Km Serveurs 6 000 Km 9 600 Km 16 000 Km 6000 Km marseillais
  21. 21. Utilisateurs 200 ms (H.K.) 280 ms 100 ms 200 ms 380 ms 150 ms 800 ms ! Serveurs marseillais
  22. 22. Mesure synthétique ● Installation WebPageTest ● Simulation stable ● Contention réseau ● Navigateurs réels ● Environnements de Dev, integ, preprod, prod…
  23. 23. Mesure synthétique ● Le problème devient visible de tous ● Le développement peut commencer
  24. 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. 25. Les solutions universelles Gérer le cache client
  26. 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. 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. 28. Le cache utilisateur À surveiller automatiquement
  29. 29. Gains Sur la page Tracking souvent visitée Chargement ÷ 5
  30. 30. Les solutions universelles ● Déblayer le chemin critique Le serveur a renvoyé la page WTF ?_ ? L'utilisateur voit quelque chose
  31. 31. Le chemin critique Chemin critique 1er rendu
  32. 32. Le chemin critique ● Redirections ● CSS ● Polices ● JavaScript
  33. 33. Le chemin critique ● Redirections ● 1 max ● Jamais côté client ● Surtout sur mobile
  34. 34. Le chemin critique CSS ● Regrouper (2 max) ● Minifier
  35. 35. Le chemin critique JavaScript ● Minifier ● Regrouper (ou pas) ● 5 manières de le charger
  36. 36. Le chemin critique Polices ● Limiter en poids ● Limiter en nombre ● Asynchrones
  37. 37. Le chemin critique Beaucoup de stratégies possibles. Globalement, cibler: HTML + CSS + JS + Fonts En 6 requêtes MAX
  38. 38. Le chemin critique Résultat HP, après « Bundling » ● 1er Rendu : - 4 secondes ● Onload : - 5 secondes
  39. 39. Surveiller Maintenir la performance dans le temps WPT Monitor https://github.com/jpvincent/WPT-server
  40. 40. Outils d'analyse Pour les enfants : ySlow PageSpeed
  41. 41. Outils d'analyse Pour les guerriers : WebPageTest
  42. 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. 43. Questions ? Viens jouer : ● Braincracking.org ● @theystolemynick
  44. 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. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×