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!
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)
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
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