Cours sur les performances côté client.

1. Performances client

2. Performances client ?

3. Malgré l’augmentation des débits,
le web est lent
Site web Temps de chargement
TF1 5,0s
Allociné 4,0s
Facebook 4,6s
Skyrock 3,7s
Yahoo! France 1,8s
DailyMotion 2,4s
Le Monde 7,9s
Amazon France 3,7s

4. Depuis 5 ans…
• Poids des pages x3
• Nombre de composants x2
• Nombre de balises HTML x2
En moyenne, plus de 300 ko par page
… pour seulement 500 mots
Source

5. Est-ce utile ?
• 500ms = -20% de traffic pour Google
• 100ms = -1% de ventes pour Amazon
• -30% du poids = +25% d’utilisateurs pour Google Maps
• 400ms = 5 à 9% d'abandons pour Yahoo!

6. Pourquoi le client ?

7. Pourquoi le client ?

8. Pourquoi le client ?

9. Pourquoi le client ?
80 à 90% du chargement géré par le client
10 à 20% pour l’applicatif serveur

10. Un peu de réseau

11. Le mythe de l’ADSL
Offres 8, 20, 28 Mbits (ATM)
Pour 8 Mbits :
-20% à -25% : 6 Mbits en IP
-2% à -3% : 5,8 Mbits en TCP/IP
Débit théorique maximal sur une ligne optimale
TV par ADSL : 5Mbits
Il y a encore du RTC en France
3G : 3,6Mbits théorique (~2Mbits en pratique)

12. Chargement d’une ressource

13. Chargement d’une ressource
Navigateur

14. Chargement d’une ressource
Temps
Navigateur

15. Chargement d’une ressource
Serveur DNS
Temps
Navigateur

16. Chargement d’une ressource
Serveur DNS
Temps
Navigateur

17. Chargement d’une ressource
Serveur DNS
Temps
DNS
Navigateur

18. Chargement d’une ressource
Serveur
Serveur DNS
Temps
DNS
Navigateur

19. Chargement d’une ressource
Serveur
Serveur DNS
Temps
DNS
Navigateur

20. Chargement d’une ressource
Serveur
Serveur DNS
Temps
DNS TCP
Navigateur

21. Chargement d’une ressource
Serveur
Serveur DNS P
Temps
HTT
DNS TCP
Navigateur

22. Chargement d’une ressource
Serveur
Serveur DNS P
Temps
Réponse HTTP
HTT
DNS TCP
Navigateur

23. Chargement d’une ressource
Serveur
Serveur DNS P
Temps
Réponse HTTP
HTT
DNS TCP
Navigateur
x nombre
de domaine

24. Chargement d’une ressource
Serveur
Serveur DNS P
Temps
Réponse HTTP
HTT
DNS TCP
Navigateur
x nombre
x nombre de ressource
de domaine

25. Évaluer les performances

26. Outils
• YSlow + Firebug
• WebPageTest

27. Agir

28. Chargement d’une page
• HTML
• Images
• CSS
• Images CSS
• Javascript
• Exécution
• Rendu

29. Objectifs
• Moins de requête HTTP
• Ressources moins lourdes
• Améliorer le temps de traitement

30. static.example.org
• Domaine ou sous-domaine dédié aux
ressources statiques
• Paralléliser les téléchargements
• Désactiver les cookies
• Entre 2 et 4 domaines/sous-domaines, pas plus

31. Toutes ressources
• Expiration
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/css "access plus 2 weeks"
</IfModule>
• ETag
ETag: "10C24BC-4AB-457E1C1F"
Par défaut : FileETag INode MTime Size
Désactiver : FileETag None

32. Ressources texte
• GZip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css
</IfModule>

33. HTML
• Cache serveur
• Réduisez le nombre d’éléments
document.getElementsByTagName('*').length

34. CSS & Javascript
• CSS : au début
• Javascript : à la fin
1. Externalisez
2. Combinez
3. Minimifiez

35. « Minimification »

36. « Minimification »
43471 octets 9431 octets

37. « Minimification »
43471 octets 9431 octets
~ -78%

38. GZip
43471 octets 12920 octets

39. GZip
43471 octets 12920 octets
~ -70%

40. « Minimification » + GZip
43471 octets 3867 octets

41. « Minimification » + GZip
43471 octets 3867 octets
~ -91%

42. Javascript
• N’utilisez pas de packer
• Évitez les fichiers dupliqués
• Utilisez intelligemment les événements
• Rendez l’Ajax « cachable »
• Minimifiez + GZip
• Attention aux requêtes DNS
• Évitez les redirections
• Configurez les ETag

43. Javascript
• Optimisez votre code
var users = []; // 1000+ items
for (var i = 0; i < users.length; i++) { … }
for (var i = 0, j = users.length; i < j; i++) { … }

44. Javascript
• Utilisez DocumentFragment
var fragment = document.createDocumentFragment();
var div = document.createElement('div');
…
fragment.appendChild(div);
document.getElementById('box')
.appendChild(fragment.cloneNode(true));

45. Javascript
• Minimisez les accès au DOM
$('#box a').click(…);
$('#box a').addClass(…);
$('#box a').attr(…);
var box = $('#box a');
box.click(…);
box.addClass(…);
box.attr(…);

46. CSS
• Évitez filter
• Évitez @import
• Évitez expression
• Évitez les reflows
• Optimisez les sélecteurs
#box .footer ul li a span .footer-link span

47. Images
• Pas de GIF
• Optimisez les images
+ = + = + =
PNG24 (3932 octets) PNG8 64 couleurs (661 octets) PNG8 64 couleurs (673 octets)
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets)
- 6,7%

48. Images
• Spécifiez les dimensions
• Ne les redimensionnez pas
• Utilisez les sprites

49. Favicon
• Pensez-y, évite une 404
• Image/icone optimisée

50. En général
✓ Faites le moins de requête DNS
✓ Faites le moins de requête HTTP
✓ Évitez les redirections
✓ Évitez les 404

51. Ressources (outils)
• Firebug http://getfirebug.com
• YSlow http://developer.yahoo.com/yslow/
• WebPagetest http://www.webpagetest.org
• YUI Compressor http://developer.yahoo.com/yui/
compressor/
• Smush.it http://www.smushit.com/ysmush.it/
• SpriteMe http://spriteme.org

52. Ressources
• Comprendre le cache
http://www.mnot.net/cache_docs/index.fr.html
• Éric Daspet http://performance.survol.fr
• Steve Souders http://www.stevesouders.com/blog/

53. Contact
Nicolas Le Gall
slides@neovov.com
twitter.com/neovov