Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performances WebConcours #webperf 2010                  Jean-pierre VINCENT
Qui ça ?       Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick10 ans de WebConsultant, formateur, exp...
Le retour des soirées
Des chiffres● 30 jours (nov. 2010)● 250 inscriptions● 55 participants● 2 tiers de français● 3 gagnants
La cible●   1 site : www.fnac.com/enfants.asp●
La cible● www.fnac.com/enfants.asp● En version statique :   • Onload 17s   • Start render 4s
La cible● www.fnac.com/enfants.asp● En version statique :   • Start render 4s   • Freeze au démarrage
Le résultat
Les basesCache navigateur<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpeg "access plus 10 years"# ../..</I...
Les bases● Cache navigateur● Compression gzip<IfModule mod_gzip.c>mod_gzip_on       yesmod_gzip_dechunk yesmod_gzip_item_i...
Les bases● Cache navigateur● Compression gzip● Le cookie   •
Les bases● Cache navigateur● Compression gzip● Le cookie   • 0.5Ko     TEST=ok; OrderInSession=0; accept=ok;    UID=0E3649...
Les bases● Cache navigateur● Compression gzip● Le cookie   • 0.5Ko     TEST=ok; OrderInSession=0; accept=ok;    UID=0E3649...
Les bases● Cache navigateur● Compression gzip● Le cookie   • Sous-domaines pour statiques   •
Les bases● Cache navigateur● Compression gzip● Le cookie   • Sous-domaines pour statiques   • Redéfinir le cookie sur www.*
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images   • Origine : 80 images pour 500Ko   •
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images   • Origine : 80 images pour 500Ko   • Jouable : 250Ko
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images   • Passage en PNG 8bit   • Réduction du nombre de co...
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS   • Outils !
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS   • Outils !
Techniques de la mort      Die HTTP, Die
Die CSS !Le CSS ?●   Requête bloquante●   Mais indispensable
Die CSS !Techniques de base :✓ Minifié / concaténé / gzipé
Die CSS !Techniques de base :✓ Minifié / concaténé / gzipé⚠ Nettoyage (28Ko => 12 Ko)
Die CSS !Chargement non bloquant du CSS :●   Start render : 200ms !
Die CSS ! FOUC (1s)
Die CSS !Chargement non bloquant du CSS :●   Start render : 200ms !⚠ FOUC
Die CSS !Chargement non bloquant du CSS :●   Start render : 200ms !⚠ FOUC✗ Dépendance JS
Die CSS !CSS inline ?
Die CSS !CSS inline :✓ Bon premier rendu✓ Pas de dépendance JS✗ Pas de cache
Die CSS ! CSS inline + chargement nonbloquant:
Die CSS !En inline : layout
Die CSS !Externe, non bloquant : le reste
Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache
Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache✓ Pas de dépendance JS (noscript)
Die CSS ! CSS inline + chargement nonbloquant :Layout inline,●   Externe : le reste●   Utilisation de <noscript>
Die JS !Le JS ?●   Requête bloquante●   Mais indispensable●   60Ko (gzipé)
Die JS !JS concaténé, minifié, gzipé ...
Die JS !JavaScript defer, chargement asynchrone
Die JS !JavaScript defer, chargement asynchrone⚠ Correction des dépendances inlines
Die JS !JS : paralléliser✓ Gain : 70ms :)⚠ Dépendances
Die HTTP !La foire au lazy-loading
Die HTTP !Lazy-load des images produits :   Moins de poids + Moins de requêtes + Super scores = Meilleur classement
Die HTTP !Lazy-load des images produits :   Moins de poids + Moins de requêtes + Super scores ≠ Expérience utilisateur !
Die HTTP !Lazy-load des images produits :✗ onmousemove
Die HTTP !Lazy-load des images produits :✗ onmousemove✗ Dépendance à JS
Die HTTP !Lazy-load des images produits :✗ onmousemove✗ Dépendance à JS✓ La solution : JS + noscript
Die HTTP !●   Lazy-load de liframe du footer●   Lazy-load du JS de lautocomplete
Die HTTP !Encodage des images● Encodage en base64● data:uri / MHTML● Dans CSS ou dans le HTML
Die HTTP !Encodage des images✓ 0 requêtes⚠ +30% de poids⚠ Dans le HTML : pas de cache⚠ CSS spécifiques IE
Die HTTP !Encodage des images⚠ La surprise : le coût CPU
Die HTTP !1 query to rule them all     Bien tenté ;)
Dernière technique      ultime     Savoir coder
Savoir coderPage de départ :● 213Ko● 2000 noeuds DOM● Validateur : 2300 parse error       « Sensation » de lenteur
Savoir coderRefactoring complet du HTML :● Poids -50%● nœuds DOM -50%● Correction des erreurs● Plus dimbrication de tablea...
Savoir coderRefactoring complet du CSS :● Reset pour supprimer des règles● Suppression des filter()● Dégradation gracieuse...
Conclusions● Temps daffichage divisé par 10● Techniques universelles : 70% du gain● Temps > connaissances● Bonnes pratique...
Retours sur le concours Webperf 2010
Upcoming SlideShare
Loading in …5
×

Retours sur le concours Webperf 2010

2,140 views

Published on

Les retours sur le concours

Published in: Technology
  • Be the first to comment

Retours sur le concours Webperf 2010

  1. 1. Performances WebConcours #webperf 2010 Jean-pierre VINCENT
  2. 2. Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick10 ans de WebConsultant, formateur, expertise
  3. 3. Le retour des soirées
  4. 4. Des chiffres● 30 jours (nov. 2010)● 250 inscriptions● 55 participants● 2 tiers de français● 3 gagnants
  5. 5. La cible● 1 site : www.fnac.com/enfants.asp●
  6. 6. La cible● www.fnac.com/enfants.asp● En version statique : • Onload 17s • Start render 4s
  7. 7. La cible● www.fnac.com/enfants.asp● En version statique : • Start render 4s • Freeze au démarrage
  8. 8. Le résultat
  9. 9. Les basesCache navigateur<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpeg "access plus 10 years"# ../..</IfModule>
  10. 10. Les bases● Cache navigateur● Compression gzip<IfModule mod_gzip.c>mod_gzip_on yesmod_gzip_dechunk yesmod_gzip_item_include file .(html|txt|css|js|json)$mod_gzip_item_exclude file .(jpg|png|gif|ico)$</IfModule>
  11. 11. Les bases● Cache navigateur● Compression gzip● Le cookie •
  12. 12. Les bases● Cache navigateur● Compression gzip● Le cookie • 0.5Ko TEST=ok; OrderInSession=0; accept=ok; UID=0E3649C79-3AFD-18B8-7817-FA868BC99668; SID=e85f0b48-ae1d-a5f5-aa15-fbffdc4e1c1a; TTL=241020101353; s_cc=true; campaign=FnacAff; s_ev14=%5B%5B%27FnacAff%27%2C%271291388510515%27%5D %5D; s_cpc=1; s_sq=%5B%5BB%5D%5D
  13. 13. Les bases● Cache navigateur● Compression gzip● Le cookie • 0.5Ko TEST=ok; OrderInSession=0; accept=ok; UID=0E3649C79-3AFD-18B8-7817-FA868BC99668; SID=e85f0b48-ae1d-a5f5-aa15-fbffdc4e1c1a; TTL=241020101353; s_cc=true; campaign=FnacAff; s_ev14=%5B%5B%27FnacAff%27%2C%271291388510515%27%5D %5D; s_cpc=1; s_sq=%5B%5BB%5D%5D 115 fois
  14. 14. Les bases● Cache navigateur● Compression gzip● Le cookie • Sous-domaines pour statiques •
  15. 15. Les bases● Cache navigateur● Compression gzip● Le cookie • Sous-domaines pour statiques • Redéfinir le cookie sur www.*
  16. 16. Les bases● Cache navigateur● Compression gzip● Le cookie● Les images • Origine : 80 images pour 500Ko •
  17. 17. Les bases● Cache navigateur● Compression gzip● Le cookie● Les images • Origine : 80 images pour 500Ko • Jouable : 250Ko
  18. 18. Les bases● Cache navigateur● Compression gzip● Le cookie● Les images • Passage en PNG 8bit • Réduction du nombre de couleurs • Outils (jpgtran, pngcrush ...)
  19. 19. Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS • Outils !
  20. 20. Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS • Outils !
  21. 21. Techniques de la mort Die HTTP, Die
  22. 22. Die CSS !Le CSS ?● Requête bloquante● Mais indispensable
  23. 23. Die CSS !Techniques de base :✓ Minifié / concaténé / gzipé
  24. 24. Die CSS !Techniques de base :✓ Minifié / concaténé / gzipé⚠ Nettoyage (28Ko => 12 Ko)
  25. 25. Die CSS !Chargement non bloquant du CSS :● Start render : 200ms !
  26. 26. Die CSS ! FOUC (1s)
  27. 27. Die CSS !Chargement non bloquant du CSS :● Start render : 200ms !⚠ FOUC
  28. 28. Die CSS !Chargement non bloquant du CSS :● Start render : 200ms !⚠ FOUC✗ Dépendance JS
  29. 29. Die CSS !CSS inline ?
  30. 30. Die CSS !CSS inline :✓ Bon premier rendu✓ Pas de dépendance JS✗ Pas de cache
  31. 31. Die CSS ! CSS inline + chargement nonbloquant:
  32. 32. Die CSS !En inline : layout
  33. 33. Die CSS !Externe, non bloquant : le reste
  34. 34. Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache
  35. 35. Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache✓ Pas de dépendance JS (noscript)
  36. 36. Die CSS ! CSS inline + chargement nonbloquant :Layout inline,● Externe : le reste● Utilisation de <noscript>
  37. 37. Die JS !Le JS ?● Requête bloquante● Mais indispensable● 60Ko (gzipé)
  38. 38. Die JS !JS concaténé, minifié, gzipé ...
  39. 39. Die JS !JavaScript defer, chargement asynchrone
  40. 40. Die JS !JavaScript defer, chargement asynchrone⚠ Correction des dépendances inlines
  41. 41. Die JS !JS : paralléliser✓ Gain : 70ms :)⚠ Dépendances
  42. 42. Die HTTP !La foire au lazy-loading
  43. 43. Die HTTP !Lazy-load des images produits : Moins de poids + Moins de requêtes + Super scores = Meilleur classement
  44. 44. Die HTTP !Lazy-load des images produits : Moins de poids + Moins de requêtes + Super scores ≠ Expérience utilisateur !
  45. 45. Die HTTP !Lazy-load des images produits :✗ onmousemove
  46. 46. Die HTTP !Lazy-load des images produits :✗ onmousemove✗ Dépendance à JS
  47. 47. Die HTTP !Lazy-load des images produits :✗ onmousemove✗ Dépendance à JS✓ La solution : JS + noscript
  48. 48. Die HTTP !● Lazy-load de liframe du footer● Lazy-load du JS de lautocomplete
  49. 49. Die HTTP !Encodage des images● Encodage en base64● data:uri / MHTML● Dans CSS ou dans le HTML
  50. 50. Die HTTP !Encodage des images✓ 0 requêtes⚠ +30% de poids⚠ Dans le HTML : pas de cache⚠ CSS spécifiques IE
  51. 51. Die HTTP !Encodage des images⚠ La surprise : le coût CPU
  52. 52. Die HTTP !1 query to rule them all Bien tenté ;)
  53. 53. Dernière technique ultime Savoir coder
  54. 54. Savoir coderPage de départ :● 213Ko● 2000 noeuds DOM● Validateur : 2300 parse error « Sensation » de lenteur
  55. 55. Savoir coderRefactoring complet du HTML :● Poids -50%● nœuds DOM -50%● Correction des erreurs● Plus dimbrication de tableaux = « Sensation » de fluidité
  56. 56. Savoir coderRefactoring complet du CSS :● Reset pour supprimer des règles● Suppression des filter()● Dégradation gracieuse acceptée● Utilisation de :before● Dégradé avec un png transparent
  57. 57. Conclusions● Temps daffichage divisé par 10● Techniques universelles : 70% du gain● Temps > connaissances● Bonnes pratiques : #win● Lère des grandes découvertes est finie ?● À quand le prochain concours ?

×