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:
- Introduction
- Pourquoi optimiser un site web?
- Sur quels paramètres agir?
- Optimisation de chaque page
- Diminuer le nombre de requêtes
- Regrouper les scripts Javascript et les feuilles de style CSS
- Réduire le nombre d’images
- Images réactives (image map)
- Images intégrées (data:)
- Sprites CSS
- Réduire la taille des composants
- Compresser (Accept-Encoding, Content-Encoding)
- Compactage du JS et CSS
- Obfusction
- Comparatif
- Placer les feuilles de style en début de page
- Rendu d’une page
- Phénomène de page blanche
- <link> vs @import
- Désavantage de @import
- Déplacer les scripts en bas de page
- Comparaison JS au début/JS à la fin
- Pourquoi ce phénomène?
- Rappel
- Diminuer le nombre de requêtes
- Optimisation de la navigation
- Pas de mise en cache
- GET conditionnel
- Entêtes d’expiration
- Optimisations complémentaires
- Sprites CSS
- Pré-chargement des composants
- AJAX (XML vs JSON, GET vs POST, Mettre en cache)
- En savoir plus
- Outils
- YSlow (plugin Firebug)
- AOL PageTest
- Sites web
- Outils
- 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.
———–
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 :
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.
merci pour toutes ces informations
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
merci pour toutes ces informations
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
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
Salut,
Encore une fois, très bonne conférence, très instructive !
Salut,
Encore une fois, très bonne conférence, très instructive !
Bonjour,
Conférence très instructive en effet.
Y’a plus qu’à se mettre au boulot maintenant ;-)
Encore merci et bonne continuation à vous deux !
[…] Camille Roux et Nicolas Chevallier lors des Intellicore Tech Talks, avec cette fois-ci comme sujet l’optimisation des performances d’un site Web […]
Bonjour,
Conférence très instructive en effet.
Y’a plus qu’à se mettre au boulot maintenant ;-)
Encore merci et bonne continuation à vous deux !
[…] avez donc maintenant la vidéo et les slides disponibles en ligne. Commentaires et comptes rendus […]
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
[…] Optimiser les performances d’un site web […]
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.
[…] Tech Talks via camilleroux. Partagez cet article […]
Optimiser les performances d’un site web | Camille Roux…
Une video conférence de Camille Roux qui presente des optimisations simples et faciles à mettre en oeuvre permettant ainsi de réduire le temps de rendu de la couche graphique d’un site web. Ces améliorations, peu conn…
Super intéressant comme d’hab, pour le son c’est pas grave.
Merci
Super intéressant comme d’hab, pour le son c’est pas grave.
Merci
[…] (new) Optimiser les performances d’un site web (Video HD) | Camille Roux Edited by Thierry […]
[…] (new) Optimiser les performances d’un site web (Video HD) | Camille Roux Edited by Thierry […]
Très bonne video, super utile. Merci.
Pourrais-tu nous en dire un peu plus sur le pré-chargement ?
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.
Très bonne video, super utile. Merci.
Pourrais-tu nous en dire un peu plus sur le pré-chargement ?
Merci de partager vos informations sur le référencement.
Bonne vidéo.
Merci de partager vos informations sur le référencement.
Bonne vidéo.
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
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
Merci, des infos intéressantes, à mettre en pratique
Merci, des infos intéressantes, à mettre en pratique
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.