ConFoo Jour 2: Sous le signe de la performance

Ma deuxième journée à ConFoo fût pratiquement dédiée aux "best practices" en matière de développement Web.  Nous n'en connaissons jamais assez à ce sujet et nous oublions trop souvent de les appliquer correctement.  Sachant que 75% des visiteurs ne reviendront jamais sur votre site si la page d'accueil prend plus de 4 secondes à charger (source), mieux vaut s'y attarder.

Alors voici un rappel pour certains ou des trucs à découvrir pour les autres:

• Les définitions de style (css) devraient toujours se retrouver dans l'entête des pages, de cette façon, le rendu de la page se fait progressivement
• Lorsque possible (s'il ne comporte pas de document.write par exemple), le code javascript devrait toujours se retrouver à la fin des pages afin de ne pas bloquer le téléchargement simultané des autres éléments (ex: images)
• Les fureteurs ne peuvent pas télécharger plus de 2 fichiers provenant du même domaine en même temps. Il est donc possible de les déjouer en utilisant des CNAMES différents qui pointent vers le même serveur
• Les cookies sont choses du passé, regardez plutôt du coté des "client-side storage" du HTML5
• Réduire le nombre d'appel HTTP-Request en regroupant le code css et js (lorsque possible) et en utilisant davantage les css sprites
• Très important d'utiliser les outils de "minify" (Closure Compiler, YUI compressor)
• Favoriser les data URIs 
• Compresser le contenu (gzip)
• Retirer les noeuds du DOM qui ne sont plus requis
• Utiliser le doctype de HTML5 (plus léger et humainement compréhensible)

Faire du "caching":

• Memcached (installé sur près de 1000 serveurs chez Facebook)
• Redis
• Varnish-cache
• Squid-cache
• Directement dans les "browser" en modifiant les "header" (Cache-Control, Expires) de vos pages
• Configuration dans Apache

Utiliser des outils de "monitoring":

• Firebug (Firefox)
• YSlow (Yahoo)
• Page-Speed (Google)
• webpagetest.org (Permet de simuler l'ouverture de la page à partir de différents endroits sur la planète)
• Munin 
• Cloudkick 
• New Relic

Après tout cela, si votre site ne vous offre toujours pas les performances attendues, il vous reste le refactoring...

Excellent article de Yahoo sur le même sujet ici (avec plus de détails en anglais).