Optimiser les performances d’un site web (Video HD)

Quand on pense à l'optimisation du temps de chargement d'un site, on pense généralement à améliorer le temps de génération des pages sur le serveur web. Hors, ce temps ne représente que 10 à 20% du temps de rendu de la page. Il existe en revanche des techniques directement applicables ayant un réel impact sur les performances.

C'est pour expliquer ces différentes techniques que j'ai décidé de participer pour la troisième fois en tant que conférencier aux Intellicore Tech Talks. Comme je l'annonçais il y a quelques jours, j'ai fait cette présentation avec Nicolas Chevallier, ingénieur Polytech'Nice-Sophia, consultant Astek et créateur de Allogarage.fr.

Voici la vidéo :

Cette présentation, qui a eu du succès sur Sophia-Antipolis, avait pour sommaire:

1. Introduction
   1. Pourquoi optimiser un site web?
   2. Sur quels paramètres agir?
2. Optimisation de chaque page
   1. Diminuer le nombre de requêtes
      1. Regrouper les scripts Javascript et les feuilles de style CSS
      2. Réduire le nombre d'images
         1. Images réactives (image map)
         2. Images intégrées (data:)
         3. Sprites CSS
   2. Réduire la taille des composants
      1. Compresser (Accept-Encoding, Content-Encoding)
      2. Compactage du JS et CSS
      3. Obfusction
      4. Comparatif
   3. Placer les feuilles de style en début de page
      1. Rendu d'une page
      2. Phénomène de page blanche
      3. <link> vs @import
      4. Désavantage de @import
   4. Déplacer les scripts en bas de page
      1. Comparaison JS au début/JS à la fin
      2. Pourquoi ce phénomène?
   5. Rappel
3. Optimisation de la navigation
   1. Pas de mise en cache
   2. GET conditionnel
   3. Entêtes d'expiration
4. Optimisations complémentaires
   1. Sprites CSS
   2. Pré-chargement des composants
   3. AJAX (XML vs JSON, GET vs POST, Mettre en cache)
5. En savoir plus
   1. Outils
      1. YSlow (plugin Firebug)
      2. AOL PageTest
   2. Sites web
6. Conclusion/Questions

Liens complémentaires:

• Les slides de la présentation
• Le site de Steve Souders, référence en la matière
• Performance web, le seul site français parlant des optimisations de performance d'un site web
• Le site des Intellicore Tech Talks

Si vous avez des questions ou des remarques au sujet de cette conférence, n'hésitez pas à les partager en laissant un commentaire.

Suite à la conférence de mardi, j'ai eu plusieurs retours de personnes/sociétés ayant testé nos techniques. Doctissimo Software m'a autorisé à publier quelques statistiques. Voici deux graphiques montrant respectivement la fréquence des requêtes ainsi que la bande passante du serveur Apache du forum de Hardware.fr après une série d'optimisations effectuées un peu avant 15h :

Et voici ce que Jocelyn Fournier m'a répondu quand je lui ai demandé les modifications effectuées:

AddOutputFilterByType DEFLATE application/x-javascript text/html text/plain text/xml text/javascript text/css

A noter que le forum gére déjà au niveau php la compression zlib et l'output buffering, donc il serait pe judicieux de virer le type text/html de l'outputfilter

ExpiresByType application/x-javascript "access plus 10 years"
ExpiresByType text/plain "access plus 10 years"
ExpiresByType text/xml "access plus 10 years"
ExpiresByType text/javascript "access plus 10 years"
ExpiresByType text/css "access plus 10 years"
ExpiresByType image/gif "access plus 10 years"
ExpiresByType image/png "access plus 10 years"