Retours sur le concours Webperf 2010

1 889 vues

Publié le

Les retours sur le concours

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 889
Sur SlideShare
0
Issues des intégrations
0
Intégrations
390
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 ?

×