Les retours sur le concours

1. Performances Web
Concours #webperf 2010
Jean-pierre VINCENT

2. Qui ça ?
Jean-pierre VINCENT
braincracking.org (veille techno)
@theystolemynick
10 ans de Web
Consultant, formateur, expertise

4. Le retour des soirées

5. Des chiffres
● 30 jours (nov. 2010)
● 250 inscriptions
● 55 participants
● 2 tiers de français
● 3 gagnants

6. La cible
● 1 site : www.fnac.com/enfants.asp
●

7. La cible
● www.fnac.com/enfants.asp
● En version statique :
• Onload 17s
• Start render 4s

8. La cible
● www.fnac.com/enfants.asp
● En version statique :
• Start render 4s
• Freeze au démarrage

9. Le résultat

10. Les bases
Cache navigateur
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 10 years"
# ../..
</IfModule>

11. Les bases
● Cache navigateur
● Compression gzip
<IfModule mod_gzip.c>
mod_gzip_on yes
mod_gzip_dechunk yes
mod_gzip_item_include file .(html|txt|
css|js|json)$
mod_gzip_item_exclude file .(jpg|png|
gif|ico)$
</IfModule>

12. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
•

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

14. 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

15. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
• Sous-domaines pour statiques
•

16. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
• Sous-domaines pour statiques
• Redéfinir le cookie sur www.*

17. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Origine : 80 images pour 500Ko
•

18. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Origine : 80 images pour 500Ko
• Jouable : 250Ko

19. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
• Passage en PNG 8bit
• Réduction du nombre de couleurs
• Outils (jpgtran, pngcrush ...)

20. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
● Concaténer, minifier JS et CSS
• Outils !

21. Les bases
● Cache navigateur
● Compression gzip
● Le cookie
● Les images
● Concaténer, minifier JS et CSS
• Outils !

22. Techniques de la mort
Die HTTP, Die

23. Die CSS !
Le CSS ?
● Requête bloquante
● Mais indispensable

24. Die CSS !
Techniques de base :
✓ Minifié / concaténé / gzipé

25. Die CSS !
Techniques de base :
✓ Minifié / concaténé / gzipé
⚠ Nettoyage (28Ko => 12 Ko)

26. Die CSS !
Chargement non bloquant du CSS :
● Start render : 200ms !

27. Die CSS !
FOUC (1s)

28. Die CSS !
Chargement non bloquant du CSS :
● Start render : 200ms !
⚠ FOUC

29. Die CSS !
Chargement non bloquant du CSS :
● Start render : 200ms !
⚠ FOUC
✗ Dépendance JS

30. Die CSS !
CSS inline ?

31. Die CSS !
CSS inline :
✓ Bon premier rendu
✓ Pas de dépendance JS
✗ Pas de cache

32. Die CSS !
CSS inline + chargement non
bloquant:

33. Die CSS !
En inline : layout

34. Die CSS !
Externe, non bloquant : le reste

35. Die CSS !
CSS inline + chargement non
bloquant :
✓ Bon premier rendu
✓ Cache

36. Die CSS !
CSS inline + chargement non
bloquant :
✓ Bon premier rendu
✓ Cache
✓ Pas de dépendance JS (noscript)

37. Die CSS !
CSS inline + chargement non
bloquant :
Layout inline,
● Externe : le reste
● Utilisation de <noscript>

38. Die JS !
Le JS ?
● Requête bloquante
● Mais indispensable
● 60Ko (gzipé)

39. Die JS !
JS concaténé, minifié, gzipé ...

40. Die JS !
JavaScript defer, chargement asynchrone

41. Die JS !
JavaScript defer, chargement asynchrone
⚠ Correction des dépendances inlines

42. Die JS !
JS : paralléliser
✓ Gain : 70ms :)
⚠ Dépendances

43. Die HTTP !
La foire au lazy-loading

44. Die HTTP !
Lazy-load des images produits :
Moins de poids
+ Moins de requêtes
+ Super scores
= Meilleur classement

45. Die HTTP !
Lazy-load des images produits :
Moins de poids
+ Moins de requêtes
+ Super scores
≠ Expérience utilisateur !

46. Die HTTP !
Lazy-load des images produits :
✗ onmousemove

47. Die HTTP !
Lazy-load des images produits :
✗ onmousemove
✗ Dépendance à JS

48. Die HTTP !
Lazy-load des images produits :
✗ onmousemove
✗ Dépendance à JS
✓ La solution : JS + noscript

49. Die HTTP !
● Lazy-load de l'iframe du footer
● Lazy-load du JS de l'autocomplete

50. Die HTTP !
Encodage des images
● Encodage en base64
● data:uri / MHTML
● Dans CSS ou dans le HTML

51. Die HTTP !
Encodage des images
✓ 0 requêtes
⚠ +30% de poids
⚠ Dans le HTML : pas de cache
⚠ CSS spécifiques IE

52. Die HTTP !
Encodage des images
⚠ La surprise : le coût CPU

53. Die HTTP !
1 query to rule them all
Bien tenté ;)

54. Dernière technique
ultime
Savoir coder

55. Savoir coder
Page de départ :
● 213Ko
● 2000 noeuds DOM
● Validateur : 2300 parse error
« Sensation » de lenteur

56. Savoir coder
Refactoring complet du HTML :
● Poids -50%
● nœuds DOM -50%
● Correction des erreurs
● Plus d'imbrication de tableaux
= « Sensation » de fluidité

57. Savoir coder
Refactoring 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

58. Conclusions
● Temps d'affichage 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 ?