Download - Un site web rapide ?
Un site web rapide ?C’est pas sorcier !
Mathieu Pillard [email protected]
Anthony Ricaud [email protected]
Paris Web 2007 - 17 novembre 2007
Nous
Mathieu [email protected]
Telefunskyrock.com
Anthony [email protected]
2
irc.freenode.net #openweb
Le problème
Sites de plus en plus beaux, plus en plus interactifs...
...Mais en plus lourds et gourmands en ressources!
Les concepteurs de sites font de moins en moins attention à ca...
...Pourtant tout le monde n’a pas une connexion internet très haut débit (21% de bas débit, sans compter les mobiles) et un PC multi-core
“Arg, y en a marre de ces sites où faut charger dix mille trucs avant de voir quelque chose” (Lolo 15/10/07)
3
Pourquoi c’est important ?
Pour vos visiteurs
C’est la première chose que l’on remarque
Ce qui se passe à La Poste sur les quais pendant les grèves SNCF se passe aussi devant un écran: les gens sont impatients, s’énervent à force d’attendre...
Limite théorique des 2 secondes
Les visiteurs avec de vieilles machines vous remercieront
Bas débit, mobiles
4
Pourquoi c’est important ?
Pour vous
Plus de trafic avec les mêmes machines
Plus vos frontaux sont rapides à servir des pages, moins les serveurs derrière les attendent...
La satisfaction du travail bien fait :-)
5
Objectifs de cet atelier
Sujet vaste, concentrons nous sur les points simples et rapides à mettre en place pour des développeurs
Le but n’est pas de configurer des serveurs aux petits oignons, mais d’expliquer les démarches y menant
La perception de la rapidité est aussi importante que la rapidité elle même pour vos visiteurs
Yahoo “Exceptional Performance” : promis, on n’a pas tout copié :)
Les cordonniers sont toujours les plus mal chaussés...
6
Côté serveur
7
Le but
Pour chaque page
Le moins de requêtes possible
Le moins de trafic possible
Quelques fois, c’est en opposition...
8
Réduire les requêtes HTTP
Établir une connexion coûte cher au serveur comme au client
HTTP Pipelining : oui mais...
Moins de fichiers
Combiner les fichiers
CSS, JavaScript
Images Maps
CSS Sprites
Éviter les redirections9
Réduire les requêtes DNS
Avant chaque requête HTTP, il faut connaître l’adresse du serveur et ça prend encore du temps
~20-120ms
Cache navigateur : 30 minutes pour IE, 1 minute pour Firefox
Même pour les sous-domaines...
Attention aux CNAMEserver1 IN A 192.168.0.3
www IN CNAME server1
10
Réduire vos envois
Gzip, Deflate
~ 70% de gain
HTML, CSS, JavaScript
Surtout pas les images
Mais réduire ce n’est pas que compresser
11
Cache
Deux éléments importants
Validation
Fraîcheur
12
Fraîcheur - Expires
Expires
Temps absoluExpires: Sat, 17 Nov 2007 11:30:41 GMT
Mais on peut régler son serveur
Temps relatif au dernier accès
Temps relatif à la dernière modification
Cache-Control
max-ageCache-Control: max-age=3600
13
Validation
Last-Modified
If-Modified-Since
Etag
Identifiant unique du contenu de la pageEtag: "81ba2d31d2a55ff57fbb136a767ff6221195260435"
If-None-Match
14
Bien les utiliser
URLs propres
Attention aux POST, SSL
Expiration loin dans le temps pour tout ce qui n’est pas HTML
Ne changez que les fichiers nécessaires
Attention aux Etag sur différents serveurs
15
Séparer statique et dynamique
2 requêtes par domaine HTTP 1.1 : téléchargement parallèle possible
2 domaines est un bon compromis
Pas besoin de cookies pour récupérer du statique
Réglages simplifiés (cache, compression)
16
16
Taille Temps de réponse(delta)
0 octets 78 ms (0 ms)
500 octets 79 ms (+1 ms)
1000 octets 94 ms (+16 ms)
1500 octets 109 ms (+31 ms)
2000 octets 125 ms (+47 ms)
2500 octets 141 ms (+63 ms)
3000 octets 156 ms (+78 ms)
Séparer statique et dynamique
2 requêtes par domaine HTTP 1.1 : téléchargement parallèle possible
2 domaines est un bon compromis
Pas besoin de cookies pour récupérer du statique
Réglages simplifiés (cache, compression)
16
Côté client
17
Problèmatique
Donner l’impression au visiteur que le site est rapide: lui montrer ce qu’il veut voir en priorité
Trouver des astuces pour que le navigateur passe moins de temps à afficher une page
Rester réactif une fois le site chargé
18
Comprendre le chargement d’une page web
Téléchargement -> Parsing -> Affichage -> Fini!
L’affichage d’une page:
Tous les navigateurs bloquent sur les <script>, à cause notamment de document.write()Certains bloquent sur les CSS aussi (Gecko)
Certains ont des délais avant d’afficher quoi que ce soit pour éviter le “FOUC” (Gecko, Webkit)
L'événement “onload” ne s'exécute que lorsque la page et tous ses éléments (styles, scripts, images) sont chargés
19
Coté (X)HTML
Réduisez la soupe de balise inutiles
Evitez les tableaux imbriqués
La taille du document compte: réduisez vos pages!
Evitez les tableaux pour la mise en page, utilisez les CSS
Attention à l’ordre des éléments dans l’HTML si vos pages sont longues. Choisissez ce que l’utilisateur verra en premier
Ça va de soit, mais plus il y a d’éléments à charger et plus ils sont gros, plus ça prendra de temps, alors réduisez aussi vos images, flashs, etc.
20
Coté CSS
Evitez à tout prix les expression() sous Internet Explorer
Factorisez vos règles
Evitez la multiplication des fichiers une fois en production, surtout si ils se retrouvent tous sur vos pages
Les styles sont la chose la plus importante pour l’affichage d’une page, le plus haut ils sont placés dans le document, le mieux c’est
Profitez du cache du navigateur, faites des feuilles externes
21
Scripts
Chaque <script> est bloquant, le moins vous en avez le mieux c’est!
De même, si l’affichage de la page est plus important, mettez vos scripts le plus bas possible pour que l’affichage commence tôt
Idem que pour les CSS, vive les scripts externes
Compressez vos scripts avec gzip et éventuellement un “packer” (attention, différentes méthodes, différents résultats).
22
Scripts: L'événement “onload”
http://dean.edwards.name/my/busted.html
http://dean.edwards.name/my/busted3.html
L'événement “DOMContentLoaded” remplace avantageusement “onload” dans beaucoup de situations
Implémenté dans Firefox et Opera de base, bidouilles possible pour les autres navigateurs
Les bidouilles en question sont présentes dans la majorité des frameworks JavaScript.
23
Scripts, reloaded
Utilisez les variables locales
Evitez d’accéder plusieurs fois à une propriété d’un élément, faites le maximum de choses en une seule fois
Bannissez “with”, évitez “eval” autant que possible.
Attention aux memory leaks, surtout sous Internet Explorer
N’abusez pas du XmlHttpRequest: une requête asynchrone n’est pas forcément instantanée (oui, j’ai volé cette ligne à Yahoo)
24
function test { str = “coucou”; document.getElementById(“test”).innerHTML = str; document.getElementById(“test”).innerHTML += “mat”;}
function test { var str = “coucou” + mat; var element = document.getElementById(“test”); element.innerHTML = str;}
Scripts, exemple
25
Scripts, revolutions
Effets Web 2.0 (fade, etc): c’est joli, mais attention:
Est ce que ca tourne bien sur les vieilles machines?
Est ce que ca impose un délai inutile à l’utilisateur?
Frameworks: gagner du temps, c’est bien, mais attention aux performances!
Attention à la multiplication de fichiers et à leur tailles.
Testez avec tous les navigateurs, certains sont vraiment lents sous Internet Explorer
Dans bien des cas le DOM suffit, même avec le support limité d’Internet Explorer 26
Comparaison vitesse des frameworks (Slickspeed)
en msBase20.9a
jQuery1.2.1
MooTools1.2 r1028
prototype 1.6.0_rc0
Safari3
Firefox2
Opera9.5α
IE7
IE6
124 236 120 124
116 552 173 207
137 351 163 200
339 886 713 1437
640 1617 1291 278727
Comparaison fichiers frameworks
en ko Base2 jQuery Mootools Prototype
Normale
Gzipée
Minifiée
Minifiée compressée
100 80 88 128
26 25 22 28
54 46 65 45
16 14 19 2028
Outils
Firebug
Yslow
Firebug lite
Safari Web Inspector
Fiddler
Sniffer réseau :)
Logs serveur
29
Liens
http://developer.yahoo.com/performance/
http://www.mnot.net/cache_docs/
http://webkit.org/blog/66/the-fouc-problem/
http://weblogs.mozillazine.org/hyatt/archives/2004_05.html
http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx
http://blogs.msdn.com/ie/archive/2006/11/16/ie-javascript-performance-recommendations-part-2-javascript-code-inefficiencies.aspx
http://blogs.msdn.com/ie/archive/2007/01/04/ie-jscript-performance-recommendations-part-3-javascript-code-inefficiencies.aspx
http://devteam.skyrock.com30