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:

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

———–

Edit:
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 :
Statistiques forum.hardware.fr après optimisation

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

Les optimisations qui ont été mises en place sont simples :

– Activation de mod_deflate sur apache 2.2.8, avec les filtres suivants :

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

– Activation de mod_expire sur apache 2.2, avec les filtres suivants :

   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 »

– Activation de mod_expire sur lighttpd qui s’occupe de délivrer le contenu statique (images) de HFR.

  • http://www.digg-france.com/INTERNET/COMMENT-AMELIORER-LES-PERFORMANCES-DE-VOTRE-SITE-INTERNET herve

    merci pour toutes ces informations

  • Bastien

    Vidéo sympa, le fond sonore est un peu bruyant de temps en temps, et certains propos sont assez confus, mais ça reste compréhensible et pédagogique.

    Juste un défaut, le plan et le contenu de cette présentation me semble assez pompé sur l’excellent bouquin « Optimiser les performances de son site » de Steve Souders, édité à O’REILLY, et pourtant les sources ne m’ont pas semblé être citées

  • http://www.camilleroux.com/2008/05/07/conference-search-engine-optimization-referencement-web/ Camille Roux

    Salut Bastien,

    Désolé pour la mauvaise qualité du son. C’est très difficile de faire un bon enregistrement avec assez peu de moyen. Si quelqu’un a un conseil, on est preneur ;)

    Pour les sources, c’est effectivement un oubli de notre part. Pour info, notre présentation est principalement basée sur les sources suivantes:
    * Le livre, les conférences et le site web de Steve Souders
    * Le site Performance Web

    Steve Souders a d’ailleurs très bien accueilli notre vidéo qu’il m’a répondu ceci quand je l’ai averti par mail:
    « Hi, Camille. That is SO cool! [...] »

    Encore merci d’avoir noté cet oubli,
    Camille

  • http://winsa.free.fr/wordpress Winsa

    Salut,

    Encore une fois, très bonne conférence, très instructive !

  • Michel

    Bonjour,
    Conférence très instructive en effet.
    Y’a plus qu’à se mettre au boulot maintenant ;-)
    Encore merci et bonne continuation à vous deux !

  • Pingback: Conférence sur l’optimisation des performances d’un site Web()

  • Pingback: Performance web » Archive du blog » Optimiser les performances d’un site web()

  • http://www.finalclap.com/ Vince

    C’est intéressant mais ça ne vaut le coup de mettre tout ça en place que pour les très gros sites à mon avis.

  • http://www.grenobleetmoi.com VINCENT

    Bonjour,

    Bravo et merci pour la conférence.

    Seule remarque : on n’entend pas les questions. Il serait bien de pouvoir les reprendre ou que le questionnaire ait un micro par exemple.

  • Jerome

    Bravo pour le travail même si je ne trouve pas cela si « so Cool » de ne pas citer une seule fois le livre qui est à la base du thème et de la structure de la conférence.

  • http://placedupouvoirdachat.hautetfort.com ROIUBU77

    Salut Camille,

    J’ai découvert ta vidéo sur le site Monetiweb, et je dois dire que c’est du bon boulot !On voit que tu maitrise ton sujet…

    Moi, je ne possède pas tes compétences techniques, je n’y connais rien en manipulation de code, de CSS, templates et autres trucs du genre qui me parlent chinois, lol.

    Je suis débutant, et je cherche effectivement à améliorer le trafic sur mon site afin de le monétiser et d’en tirer un revenu, mais pour l’instant il n’attire que quelques dizaines de personnes par jour au plus !

    J’ai lu que la plupart des régies qui proposent des techniques de monétisation, ne s’intéressent qu’aux blogs ayant un fort trafic de plusieurs milliers de personnes par mois, et j’en suis bien loin !!!

    Est-ce que tu peux me donner ton avis et tes conseils pour améliorer le trafic sur mon site?

    Est-ce que je dois mettre des liens sponsorisés, et où?

    Je précise que mon blog est hébergé sur la plate-forme Hautetfort, quelles sont les meilleures techniques pour gagner de l’argent avec un blog qui est hébergé sur une plate-forme?

    Amicalement,

    roiubu.

  • Marius NGADOM

    Je tire un coup de chapeau au travail que tu as fait c’est très formidable a nous d’en profiter pour mieux construire nos sites encore Merci pour le gros boulot que tu as abbattu pour nous bonne continuation dans c sens

  • http://www.rc2i.fr REY Baptiste

    Bonjour,
    Félicitation pour le travail de recherche, mais également pour le partage au format vidéo.
    Conférencier a mes heurs perdus pour la CCI de l’Oise, je regrette qu’ils n’enregistrent pas les conférences.

    Néanmoins, sans aucune critique de ma part, je ne peux que vous encourager à vous décontracter. C’est pour moi le seul conseil que je vous ferais en toute sympathie.

  • Pingback: “L’art du référencement Web” par Camille Rouxanalyse-web.net - Ergonomie, comportement internautes et étude fonctionnelle()

  • Bruno

    Bonjour,

    Merci pour cette vidéo très intéressante.
    Je m’empresse de tester etj’ai déjà quelques questions :

    1- Pour l’astuce javascript, il s’agit bien de placer l’appel du .js après le /body ? Ne risque t’il pas d’y avoir des problèmes d’interprétation du code lors de son appel ?

    2- Concernant l’outil de yahoo pour les performances YSLOW, avez-vous un lien qui donnerait les actions concrètes à mener pour chacune des 13 notations ?

    Et un point qui n’a pas été abordé je crois.
    Même si le HTML ne représente que 6% en moyenne du temps de chargement, les sites sont de plus en plus importants et ca reste optimisable. Du fait, je me pose la question suivante : lorsque j’ai un menu identique sur l’ensemble de mes pages. Que conseillez-vous pour éviter de recharger ce menu systématiquement ?

    Encore merci pour cette vidéo et toutes les autres.
    Bonne continuation.

  • Pingback: Un peu de technique : optimiser son site | Capitaine commerce 2.1()

  • Pingback: Acturef.com()

  • http://www.weborganique-referencement.com référencement naturel Alsace

    Super intéressant comme d’hab, pour le son c’est pas grave.

    Merci

  • Pingback: Optimiser les performances d'un sites Web - video-referencement.fr()

  • Pingback: SEO - L’art du référencement Web - Video-Referencement.fr()

  • Franck

    Très bonne video, super utile. Merci.

    Pourrais-tu nous en dire un peu plus sur le pré-chargement ?

  • http://www.camilleroux.com/2008/05/07/conference-search-engine-optimization-referencement-web/ Camille Roux

    Que voudrais-tu savoir plus précisément?
    Je t’invite à fouiller les sites de Steve Souders et performance web, donnés en référence à la fin de l’article, tu devrais y trouver ce que tu veux.

  • http://www.pro-web31.com stephanie

    Merci de partager vos informations sur le référencement.
    Bonne vidéo.

  • http://www.progtraiteur.fr Xavier

    Bonjour,

    Avant tout, félicitation et merci pour toutes ces informations que vous pouvez nous partager.

    Néanmoins, j’aimerais réaliser la compression de fichier sur un fichier php basic ( page d’accueil par exemple).

    Je ne trouve rien sur le net qui explique cela en détail(le code, où l’insérer, s’il est possible de faire une compression automatique,…)

    Pourriez-vous m’envoyer un exemple de code de compression intégrer à une page basic.

    Merci d’avance,

    Xavier

  • http://www.kmweb.fr/kmbc km

    Merci, des infos intéressantes, à mettre en pratique