performances
DESCRIPTION
Cours sur les performances côté client.TRANSCRIPT
![Page 1: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/1.jpg)
Performances client
![Page 2: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/2.jpg)
Performances client ?
![Page 3: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/3.jpg)
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
![Page 4: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/4.jpg)
Depuis 5 ans…
![Page 5: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/5.jpg)
Depuis 5 ans…
• Poids des pages x3
![Page 6: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/6.jpg)
Depuis 5 ans…
• Poids des pages x3
• Nombre de composants x2
![Page 7: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/7.jpg)
Depuis 5 ans…
• Poids des pages x3
• Nombre de composants x2
• Nombre de balises HTML x2
![Page 8: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/8.jpg)
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
![Page 9: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/9.jpg)
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
![Page 10: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/10.jpg)
Est-ce utile ?
![Page 11: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/11.jpg)
Est-ce utile ?
• 500ms = -20% de traffic pour Google
![Page 12: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/12.jpg)
Est-ce utile ?
• 500ms = -20% de traffic pour Google
• 100ms = -1% de ventes pour Amazon
![Page 13: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/13.jpg)
Est-ce utile ?
• 500ms = -20% de traffic pour Google
• 100ms = -1% de ventes pour Amazon
• -30% du poids = +25% d’utilisateurs pour Google Maps
![Page 14: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/14.jpg)
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!
![Page 15: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/15.jpg)
Pourquoi le client ?
![Page 16: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/16.jpg)
Pourquoi le client ?
![Page 17: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/17.jpg)
Pourquoi le client ?
![Page 18: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/18.jpg)
Pourquoi le client ?
![Page 19: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/19.jpg)
Pourquoi le client ?
80 à 90% du chargement géré par le client10 à 20% pour l’applicatif serveur
![Page 20: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/20.jpg)
Un peu de réseau
![Page 21: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/21.jpg)
Le mythe de l’ADSLOffres 8, 20, 28 Mbits
![Page 22: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/22.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
![Page 23: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/23.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
Pour 8 Mbits :
![Page 24: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/24.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IPPour 8 Mbits :
![Page 25: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/25.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IP-2% à -3% : 5,8 Mbits en TCP/IP
Pour 8 Mbits :
![Page 26: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/26.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IP-2% à -3% : 5,8 Mbits en TCP/IP
Pour 8 Mbits :
Débit théorique maximal sur une ligne optimale
![Page 27: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/27.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IP-2% à -3% : 5,8 Mbits en TCP/IP
Pour 8 Mbits :
Débit théorique maximal sur une ligne optimaleTV par ADSL : 5Mbits
![Page 28: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/28.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IP-2% à -3% : 5,8 Mbits en TCP/IP
Pour 8 Mbits :
Débit théorique maximal sur une ligne optimaleTV par ADSL : 5Mbits
Il y a encore du RTC en France
![Page 29: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/29.jpg)
Le mythe de l’ADSL(ATM)Offres 8, 20, 28 Mbits
-20% à -25% : 6 Mbits en IP-2% à -3% : 5,8 Mbits en TCP/IP
Pour 8 Mbits :
Débit théorique maximal sur une ligne optimale
3G : 3,6Mbits théorique (~2Mbits en pratique)
TV par ADSL : 5Mbits
Il y a encore du RTC en France
![Page 30: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/30.jpg)
Chargement d’une ressource
![Page 31: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/31.jpg)
Chargement d’une ressource
Navigateur
![Page 32: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/32.jpg)
Chargement d’une ressource
Navigateur
Temps
![Page 33: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/33.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Temps
![Page 34: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/34.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Temps
![Page 35: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/35.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Temps
DNS
![Page 36: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/36.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS
![Page 37: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/37.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS
![Page 38: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/38.jpg)
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS TCP
![Page 39: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/39.jpg)
HTT
P
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS TCP
![Page 40: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/40.jpg)
Réponse HTTP
HTT
P
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS TCP
![Page 41: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/41.jpg)
Réponse HTTP
HTT
P
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS TCP
x nombrede domaine
![Page 42: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/42.jpg)
Réponse HTTP
HTT
P
Chargement d’une ressource
Serveur DNS
Navigateur
Serveur
Temps
DNS TCP
x nombrede domaine
x nombre de ressource
![Page 43: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/43.jpg)
Évaluer les performances
![Page 44: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/44.jpg)
• YSlow + Firebug
• WebPageTest
Outils
![Page 45: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/45.jpg)
Agir
![Page 46: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/46.jpg)
Chargement d’une page
![Page 47: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/47.jpg)
Chargement d’une page
• HTML
![Page 48: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/48.jpg)
Chargement d’une page
• HTML
• Images
![Page 49: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/49.jpg)
Chargement d’une page
• HTML
• Images
• CSS
![Page 50: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/50.jpg)
Chargement d’une page
• HTML
• Images
• CSS
• Images CSS
![Page 51: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/51.jpg)
Chargement d’une page
• HTML
• Images
• CSS
• Images CSS
• Javascript
![Page 52: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/52.jpg)
Chargement d’une page
• HTML
• Images
• CSS
• Images CSS
• Javascript
• Exécution
![Page 53: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/53.jpg)
Chargement d’une page
• HTML
• Images
• CSS
• Images CSS
• Javascript
• Exécution
• Rendu
![Page 54: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/54.jpg)
Objectifs
![Page 55: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/55.jpg)
Objectifs
• Moins de requête HTTP
![Page 56: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/56.jpg)
Objectifs
• Moins de requête HTTP
• Ressources moins lourdes
![Page 57: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/57.jpg)
Objectifs
• Moins de requête HTTP
• Ressources moins lourdes
• Améliorer le temps de traitement
![Page 58: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/58.jpg)
static.example.org
![Page 59: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/59.jpg)
static.example.org
• Domaine ou sous-domaine dédié aux ressources statiques
![Page 60: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/60.jpg)
static.example.org
• Domaine ou sous-domaine dédié aux ressources statiques
• Paralléliser les téléchargements
![Page 61: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/61.jpg)
static.example.org
• Domaine ou sous-domaine dédié aux ressources statiques
• Paralléliser les téléchargements
• Désactiver les cookies
![Page 62: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/62.jpg)
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
![Page 63: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/63.jpg)
Toutes ressources
![Page 64: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/64.jpg)
Toutes ressources• Expiration
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks"</IfModule>
![Page 65: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/65.jpg)
Toutes ressources• Expiration
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType text/css "access plus 2 weeks"</IfModule>
• ETagETag: "10C24BC-4AB-457E1C1F"
Par défaut : FileETag INode MTime Size
Désactiver : FileETag None
![Page 66: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/66.jpg)
Ressources texte
![Page 67: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/67.jpg)
Ressources texte
• GZip<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css</IfModule>
![Page 68: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/68.jpg)
HTML
![Page 69: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/69.jpg)
HTML
• Cache serveur
![Page 70: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/70.jpg)
HTML
• Cache serveur
• Réduisez le nombre d’éléments
![Page 71: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/71.jpg)
HTML
• Cache serveur
• Réduisez le nombre d’élémentsdocument.getElementsByTagName('*').length
![Page 72: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/72.jpg)
CSS & Javascript
![Page 73: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/73.jpg)
CSS & Javascript
• CSS : au début
![Page 74: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/74.jpg)
CSS & Javascript
• CSS : au début
• Javascript : à la fin
![Page 75: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/75.jpg)
CSS & Javascript
• CSS : au début
• Javascript : à la fin
![Page 76: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/76.jpg)
CSS & Javascript
• CSS : au début
• Javascript : à la fin
1. Externalisez
![Page 77: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/77.jpg)
CSS & Javascript
• CSS : au début
• Javascript : à la fin
1. Externalisez
2. Combinez
![Page 78: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/78.jpg)
CSS & Javascript
• CSS : au début
• Javascript : à la fin
1. Externalisez
2. Combinez
3. Minimifiez
![Page 79: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/79.jpg)
« Minimification »
![Page 80: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/80.jpg)
« Minimification »
43471 octets 9431 octets
![Page 81: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/81.jpg)
« Minimification »
43471 octets 9431 octets
~ -78%
![Page 82: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/82.jpg)
GZip
43471 octets 12920 octets
![Page 83: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/83.jpg)
GZip
43471 octets 12920 octets
~ -70%
![Page 84: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/84.jpg)
« Minimification » + GZip
43471 octets 3867 octets
![Page 85: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/85.jpg)
« Minimification » + GZip
43471 octets 3867 octets
~ -91%
![Page 86: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/86.jpg)
Javascript
![Page 87: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/87.jpg)
Javascript• N’utilisez pas de packer
![Page 88: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/88.jpg)
Javascript• N’utilisez pas de packer
• Évitez les fichiers dupliqués
![Page 89: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/89.jpg)
Javascript• N’utilisez pas de packer
• Évitez les fichiers dupliqués
• Utilisez intelligemment les événements
![Page 90: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/90.jpg)
Javascript• N’utilisez pas de packer
• Évitez les fichiers dupliqués
• Utilisez intelligemment les événements
• Rendez l’Ajax « cachable »
![Page 91: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/91.jpg)
Javascript• N’utilisez pas de packer
• Évitez les fichiers dupliqués
• Utilisez intelligemment les événements
• Rendez l’Ajax « cachable »
• Minimifiez + GZip
![Page 92: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/92.jpg)
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
![Page 93: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/93.jpg)
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
![Page 94: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/94.jpg)
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
![Page 95: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/95.jpg)
Javascripteval() is evil
![Page 96: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/96.jpg)
Javascripteval() is evil
NON
![Page 97: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/97.jpg)
Javascript
new Boolean(); // Argl…new Number(); // Stop…new String(); // Je souffrenew Object(); // Arrêtez…new Array(); // C'en est tropnew Function(); // PAN!
var bool = false;var nb = 0;var str = "";var obj = {};var array = [];var fn = function() {};
new is evil
![Page 98: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/98.jpg)
JavascriptOptimisez vos boucles
![Page 99: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/99.jpg)
Javascript
var users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
Optimisez vos boucles
![Page 100: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/100.jpg)
Javascript
var users = []; // 1000+ itemsfor (var i = 0; i < users.length; i++) { … }
Optimisez vos boucles
for (var i = 0, j = users.length; i < j; i++) { … }
![Page 101: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/101.jpg)
JavascriptAttention aux fonctions anonymes
![Page 102: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/102.jpg)
JavascriptAttention aux fonctions anonymes
$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
![Page 103: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/103.jpg)
JavascriptAttention aux fonctions anonymes
// Mieux !function fn(a, b) { return a * b; }
$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
![Page 104: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/104.jpg)
JavascriptAttention aux fonctions anonymes
// Mieux !function fn(a, b) { return a * b; }
$(…).click(function(e) { … }); // jQuery stylevar fn = function(a, b) { return a * b; };
var fn = function fn(a, b) { return a * b; };var obj = { fn: function fn(a, b) { return a * b; }}
![Page 105: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/105.jpg)
JavascriptPré-compiler les RegExp
![Page 106: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/106.jpg)
for (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(/www\.mydomain\.tld/i)) { // … }}
JavascriptPré-compiler les RegExp
![Page 107: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/107.jpg)
JavascriptPré-compiler les RegExp
var rDomain = /www\.mydomain\.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (links[index].href.match(rDomain)) { // … }}
![Page 108: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/108.jpg)
JavascriptPré-compiler les RegExp
var rDomain = /www\.mydomain\.tld/i;for (var index = 0, l = links.length; index < l; index++) { if (rDomain.test(links[index].href)) { // … }}
![Page 109: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/109.jpg)
Javascriptlength est aussi un setter
![Page 110: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/110.jpg)
Javascriptlength est aussi un setter
var names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent", "Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic", "Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre", "Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane", "Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain", "Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas", "Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien", "Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"];
![Page 111: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/111.jpg)
Javascriptlength est aussi un setter
var names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent", "Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic", "Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre", "Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane", "Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain", "Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas", "Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien", "Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"];
names.slice(0, 10); // Biennames.length = 10; // Super rapide
![Page 112: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/112.jpg)
Javascriptlength est aussi un setter
var names = ["Geoffrey", "Lorraine", "Thomas", "Clément", "Julien", "Vincent", "Elodie", "Bruno", "Derek", "Lina", "Cyril", "Matti", "Thomas", "Estelle", "Ludovic", "Cédric", "Laurent", "Benjamin", "Mathieu", "Michel", "Kris", "Joffrey", "Alexandre", "Surya", "Antoine", "Ornella", "Simon", "Pierre", "Julien", "Jérémy", "Stéphane", "Arnaud", "Florent", "Albéric", "Julien", "Michaël", "Arnaud", "Dimitri", "Sylvain", "Alexandre", "Thomas", "François", "Robin", "Tugdual", "Prakash", "Carine", "Thomas", "Grégory", "Jean-Kamal", "Anand", "Loïc", "Xavier", "Guillaume", "Damien", "Adrien", "Antoine", "Lucas", "Romain", "Charles", "Loïc", "Maxime", "Gaëtan", "Clément", "Jean-Michel", "Hedi", "Lydie", "Raphaël", "Maxime", "Ludovic", "Audrey", "Frédéric"];
names = []; // Biennames.length = 0; // Terriblement rapide
names.slice(0, 10); // Biennames.length = 10; // Super rapide
![Page 113: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/113.jpg)
Javascriptobj.x === obj["x"]
![Page 114: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/114.jpg)
Javascriptobj.x === obj["x"]
var angle = 60, result;if (useSin) { result = Math.sin(angle);} else { result = Math.cos(angle);}return result;
![Page 115: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/115.jpg)
Javascriptobj.x === obj["x"]
var angle = 60;if (useSin) { return Math.sin(angle);} else { return Math.cos(angle);}
![Page 116: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/116.jpg)
Javascriptobj.x === obj["x"]
var angle = 60;return (useSin) ? Math.sin(angle) : Math.cos(angle);
![Page 117: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/117.jpg)
Javascriptobj.x === obj["x"]
return Math[useSin ? "sin" : "cos"](60);
![Page 118: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/118.jpg)
JavascriptMicro-optimisations
![Page 119: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/119.jpg)
Javascript
var a = 1;var b = 2;
var a = 1, b = 2;
Micro-optimisations
![Page 120: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/120.jpg)
Javascript
times = times || 3;times |= 3; // Valeur numérique uniquement
var a = 1;var b = 2;
var a = 1, b = 2;
Micro-optimisations
![Page 121: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/121.jpg)
JavascriptMicro-optimisations
![Page 122: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/122.jpg)
Javascript
if (value == 3) {}if (value === 3) {}
Micro-optimisations
![Page 123: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/123.jpg)
Javascript
if (1 == 1 || true) {}if (true || 1 == 1) {}
if (value == 3) {}if (value === 3) {}
Micro-optimisations
![Page 124: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/124.jpg)
Javascript
new Date().getTime()
if (1 == 1 || true) {}if (true || 1 == 1) {}
if (value == 3) {}if (value === 3) {}
Micro-optimisations
![Page 125: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/125.jpg)
Javascript
new Date().getTime()Date.now()
if (1 == 1 || true) {}if (true || 1 == 1) {}
if (value == 3) {}if (value === 3) {}
Micro-optimisations
![Page 126: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/126.jpg)
Javascript
new Date().getTime()Date.now()+new Date
if (1 == 1 || true) {}if (true || 1 == 1) {}
if (value == 3) {}if (value === 3) {}
Micro-optimisations
![Page 127: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/127.jpg)
JavascriptMicro-optimisations
![Page 128: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/128.jpg)
JavascriptMicro-optimisations
delete obj.x
![Page 129: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/129.jpg)
JavascriptMicro-optimisations
delete obj.x
objet.tres.interessant.mais.bien.cache
![Page 130: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/130.jpg)
JavascriptUtilisez DocumentFragment
var fragment = document.createDocumentFragment();var div = document.createElement('div');…fragment.appendChild(div);
document.getElementById('box') .appendChild(fragment.cloneNode(true));
![Page 131: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/131.jpg)
JavascriptMinimisez les accès au DOM
$('#box a').click(…);$('#box a').addClass(…);$('#box a').attr(…);
var box = $('#box a');box.click(…);box.addClass(…);box.attr(…);
![Page 132: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/132.jpg)
CSS
![Page 133: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/133.jpg)
CSS
• Évitez filter
![Page 134: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/134.jpg)
CSS
• Évitez filter
• Évitez @import
![Page 135: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/135.jpg)
CSS
• Évitez filter
• Évitez @import
• Évitez expression
![Page 136: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/136.jpg)
CSS
• Évitez filter
• Évitez @import
• Évitez expression
• Évitez les reflows
![Page 137: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/137.jpg)
CSS
• Évitez filter
• Évitez @import
• Évitez expression
• Évitez les reflows
• Optimisez les sélecteurs
![Page 138: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/138.jpg)
CSS
• Évitez filter
• Évitez @import
• Évitez expression
• Évitez les reflows
• Optimisez les sélecteurs
#box .footer ul li a span
![Page 139: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/139.jpg)
CSS
• Évitez filter
• Évitez @import
• Évitez expression
• Évitez les reflows
• Optimisez les sélecteurs
#box .footer ul li a span .footer-link span
![Page 140: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/140.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
![Page 141: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/141.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
![Page 142: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/142.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
+ =PNG8 64 couleurs (661 octets)
![Page 143: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/143.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
+ =PNG8 64 couleurs (661 octets)
+ =PNG8 64 couleurs (673 octets)
![Page 144: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/144.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
+ =PNG8 64 couleurs (661 octets)
+ =PNG8 64 couleurs (673 octets)
PNG8 64 couleurs (673 octets)
![Page 145: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/145.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
+ =PNG8 64 couleurs (661 octets)
+ =PNG8 64 couleurs (673 octets)
PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets)
![Page 146: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/146.jpg)
Images
• Pas de GIF
• Optimisez les images
• Supprimez les metas (smush.it, pngcrush, jpegtrans)
+ =PNG24 (3932 octets)
+ =PNG8 64 couleurs (661 octets)
+ =PNG8 64 couleurs (673 octets)
PNG8 64 couleurs (673 octets) PNG8 64 couleurs (628 octets)
- 6,7%
![Page 147: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/147.jpg)
Images
![Page 148: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/148.jpg)
Images
• Spécifiez les dimensions
![Page 149: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/149.jpg)
Images
• Spécifiez les dimensions
• Ne les redimensionnez pas
![Page 150: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/150.jpg)
Images
• Spécifiez les dimensions
• Ne les redimensionnez pas
• Utilisez les sprites
![Page 151: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/151.jpg)
Favicon
![Page 152: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/152.jpg)
Favicon
• Pensez-y, évite une 404
![Page 153: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/153.jpg)
Favicon
• Pensez-y, évite une 404
• Image/icone optimisée
![Page 154: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/154.jpg)
En général
![Page 155: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/155.jpg)
En général
✓ Faites le moins de requête DNS
![Page 156: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/156.jpg)
En général
✓ Faites le moins de requête DNS
✓ Faites le moins de requête HTTP
![Page 157: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/157.jpg)
En général
✓ Faites le moins de requête DNS
✓ Faites le moins de requête HTTP
✓ Évitez les redirections
![Page 158: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/158.jpg)
En général
✓ Faites le moins de requête DNS
✓ Faites le moins de requête HTTP
✓ Évitez les redirections
✓ Évitez les 404
![Page 159: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/159.jpg)
Ressources (outils)• Firebug http://getfirebug.com
• YSlow http://developer.yahoo.com/yslow/
• WebPagetest http://www.webpagetest.org
• Yottaa http://www.yottaa.com
• YUI Compressor http://developer.yahoo.com/yui/compressor/
• Smush.it http://www.smushit.com/ysmush.it/
• SpriteMe http://spriteme.org
![Page 160: Performances](https://reader036.vdocuments.fr/reader036/viewer/2022062708/558786c1d8b42a8f7d8b4784/html5/thumbnails/160.jpg)
Ressources• Comprendre le cache
http://www.mnot.net/cache_docs/index.fr.html
• Performance Playground http://jsperf.com
• Éric Daspet http://performance.survol.fr
• Stoyan Stephanov http://www.phpied.com
• Steve Souders http://www.stevesouders.com/blog/