Quelques astuces pour rendre votre site internet plus rapide

17 Commentaires

Depuis peu Google prend en compte la vitesse de chargement des sites internet dans son algorithme de positionnement. Concrètement cela veut dire que les sites lent seront pénalisés.
De plus, des études ont montré que les internautes ne sont pas très patient et que si la page met plus de quelques secondes à charger, ils préféreront chercher ailleurs. Voici quelques chiffres impressionnant qui vous convaincront d’améliorer la vitesse de chargement de votre site :

  • +100 ms sur le temps de chargement sur Amazon : -1% du chiffre d’affaire
  • 500ms de plus chez Google : 20% de recherches en moins
  • 400ms de plus pour Yahoo et 5% des gens iront chercher ailleurs

Comme c’est un sujet qui me tient à cœur, je vais vous présenter les différents outils et techniques utilisés pour optimiser la vitesse de chargement de son site.

Sommaire

  1. Faire le point, faire une série de mesures
  2. Concaténer ces fichiers CSS et Javascripts
  3. Compresser vos fichiers
  4. Activer le cache
  5. Concaténer et compresser vos images
  6. Quelques bonnes pratiques
  7. Sources

I. Faire le point sur l’état de son site, mesurer la vitesse de chargement.

Avant de commencer à modifier son site pour le rendre plus rapide, il faut faire le point, observer ce qui rend le site lent et effectuer une série de mesures. Pour cela il existe énormément d’outils, certains sont en ligne (donc indépendant de notre connexion internet) et d’autres se présentent sous forme de plugins pour Firefox.

Pingdom Tools :

Pingdom tools est un service en ligne qui permet de voir l’ensemble des requêtes effectués afin de voir le temps que mets chaque fichier de votre site (css, javascript, image) à se télécharger. Ci-dessous une partie du graphique renvoyé par Pingdom Tools pour tutoriels-video.fr.

Ce graphique est simple à exploiter : il faut observer le nombre de fichiers qui se téléchargent, voir ceux que l’on peut supprimer ou les fichiers que l’on peut réunir (concaténer pour diminuer le nombre de requêtes).
Ensuite, il faut regarder les fichiers qui mettent du temps à se télécharger et voir s’ils ne bloquent pas les autres (cas typique des fichiers javascripts).

Cet outil donne également d’autres informations intéressantes comme le temps de chargement, le nombre de fichiers ainsi que leurs poids et le nombre de redirections.

Webpagetest

Webpagetest est un autre outil en ligne, similaire à pingdom Tools, mais en plus complet. À la différence de pingdom, il charge le site 2 fois, ceci afin de tester le système de cache (le second chargement devrait  prendre moins de temps). De plus, ce système vous attribue des notes à l’américaine sur certain critères :

Vous retrouvez le graphique « Waterfall » qui permet de voir tous les fichiers utilisés sur votre page et vous avez également un second graphique qui indique ce qui peut être optimisé.

Firebug + Yslow

Firebug est un plugin pour Firefox très connu des développeurs web, car il permet de gagner un temps fou, mais il possède aussi un onglet réseau qui donne le même type de graphique que le site présenté précédemment (à l’exception que la qualité de votre connexion internet est prise en compte !).
Quant à Yslow (Why slow ?) c’est un plugin pour Firebug développer par Yahoo qui permet de diagnostiquer votre site Web, il donne  un score sur 100 et une note à l’américaine (A -> F). Ce qui est bien avec cet outil, c’est qu’il précise, point par point, ce qui peut être optimiser et fournit des tutoriels.
Lorsque vous avez installé Firebug, activé l’onglet réseau en cliquant sur la flèche et recharger votre page (F5). Vous devez avoir quelque chose similaire à cette capture :

Ce résultat s’interprète de la même manière que pour Pingdom Tools, à l’exception qu’il dépend de la qualité de votre connexion internet (ça reflète plus la réalité, tout le monde n’a pas un serveur avec une connexion de 100 Mega).
Sur la droite de la barre d’onglet de Firebug apparaît l’extension Yslow qui est bien plus intéressante ! Cliquez sur Yslow puis Run Test (si ça ne fonctionne pas rafraîchissez la page avec F5). Vous devez avoir un écran similaire à ci-dessous (à l’exception du score 😛 ) :

Si vous avez une mauvaise note c’est normal ! (la première fois que j’ai lancé le test j’ai eu un F). Vous pouvez changer les règles en cliquant sur la liste déroulante « rulesets« , vous pouvez choisir « Small site » qui est moins exigent.
Normalement vous devrez voir plusieurs catégories d’erreurs avec une note de A à F pour chacune d’entres elles. Si vous cliquez sur l’erreur, vous devez avoir une petite explication et avec un peu de chance de la documentation pour expliquer comment y remédier. Dans le cas contraire, ce billet est fait pour ça ;).

D’autres outils

Comme tous les outils ce ressemble un peu je ne vais pas tous les décrire, mais voici une petite liste non exhaustive :

II. Concaténer ces fichiers CSS et Javascripts

Après avoir fait une série de mesures, il est grand temps de commencer à optimiser le site !  Si on se base sur l’outils Yslow de Yahoo, le premier point à améliorer c’est « Make fewer HTTP requests« . Il faut réduire le nombre de composant (fichiers) sur une page afin de réduire le nombre de requêtes pour créer le rendu de la page. Et moins il y a de requêtes, plus la page se charge vite ! Ça revient à réduire le nombre de ligne que l’on voit sur des outils comme Pingdom Tools ou l’onglet réseau de firebug.

Un bon moyen de réduire le nombre de requêtes faites au serveur est de concaténer les fichiers de même type ensemble. Plutôt que d’avoir 5 fichiers javascripts différents, provoquant 5 requêtes HTTP , il vaut mieux avoir un gros fichier javascript qui les fusionne tous. Même choses pour les fichiers CSS et les images (même si avec les images c’est plus compliqué, on y reviendra plus tard).

Vous pouvez le faire manuellement en copiant/collant tous vos scripts dans un seul fichier, mais prenez garde aux éventuelles bugs que ça peut causer (et garder toujours les fichiers JS séparer à porter de main, c’est toujours pratique). Si vous utilisez un CMS comme WordPress, il existe des plugins qui gèrent cela tous seul et s’occupe de réunir les différents fichiers externes automatiquement : c’est WP-Minify.

III. Compresser vos fichiers

Il faut également réduire le poids de vos pages web et pour cela compresser vos fichiers. Très souvent, les fichiers javascripts et CSS possèdent des espaces blancs et des commentaires (utile pour la lisibilité du codeur), mais ça prend de la place.

Une méthode simple pour compresser tous vos fichier html, css et javascript est d’utiliser Gzip. Gzip est un logiciel libre de compression qui est généralement installé sur Apache. Pour l’utiliser, il faut créer un fichier .htaccess à la racine de votre site web avec ces règles dedans :

<filesmatch ".(php|html|css|js)$">
SetOutputFilter DEFLATE
</filesmatch>

La première ligne indique quels types de fichiers doivent être compressés (surtout les CSS et javascript qui peuvent atteindre des taux de compression de 90% mais attention : pas d’images !!). La seconde ligne indique au navigateur que les fichiers devront être décompressés.
Si vous avez fait les manipulations correctement Yslow devrait vous donner une meilleure note pour « compress components with gzip » et vous devez ressentir la différence sur la bande passante.

IV. Activer le cache

Le cache est une fonctionnalité qui évite au navigateur de télécharger 2 fois le même fichier afin d’accélérer le temps de chargement des pages. Par exemple, si toutes les pages de votre site possède un logo identique, en naviguant de page en page vous n’allez pas re-télécharger cette image à chaque fois. Encore une fois on passe par un bout de code que l’on place dans un fichier .htaccess à la racine du site :

<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico)$">
ExpiresActive on
ExpiresDefault "access plus 1 months"
</filesmatch>
</ifmodule>

La première ligne test si le mode expires est bien activé et disponible. La seconde ligne précise les fichiers que l’on souhaite mettre en cache, la 3ème active le cache et la 4ème donne une date d’expiration (les fichiers ayant été téléchargé il y a plus d’un mois devront être re-télécharger).
Encore une fois vous pouvez vérifier vos manipulations en regardant sur Yslow dans la catégorie « Add expires headers » ou sur Webpagetest le « Repeat View » devrait être meilleure.

V. Concaténer et compresser vos images

Il est évident qu’il faut correctement compresser ces images sur le web et utiliser des formats adaptés comme le png, jpg (voir le gif, parfois intéressant). Je ne vais pas revenir là-dessus, mais depuis peu j’ai découvert un outils qui permet de réduire la taille de vos images sans en altérer la qualité. Cet outil c’est Smush.it et c’est developpé par Yahoo (donc du solide). Je ne sais pas trop comment ça fonctionne (apparemment en enlevant des méta-données), mais ça permet de réduire la taille de vos images de 10 à 20% en moyenne.
Ce qui est génial, c’est que Yslow a intégré Smush.it et vous pouvez réduire la taille de l’ensemble des images d’une page en un clic ! Ça se passe dans l’onglet Tools de Yslow, comme on dit en anglais « A picture is worth a thousand words » :

Si vous utilisez un CMS comme WordPress, sachez qu’il existe un plugin wp smush.it qui permet de compresser vos images automatiquement lors de l’upload. Vous pouvez également compressés les images datant d’avant l’installation du plugin en allant dans la bibliothèques des médias.

Compresser c’est bien, mais ça ne suffit pas ! De la même manière que pour les fichiers Javascript et CSS on peut concaténer les images que l’on utilise dans les propriétés background en CSS. C’est à dire qu’à la place d’avoir plusieurs images pour plusieurs background, on les réunit toutes en une « super image » (un sprite) et on utilise la propriété background position pour afficher une partie de ce sprite. Je ne vais pas rentrer dans les détails dans ce billet, je vous renvois sur mon tutoriel : comment utiliser les sprites.

VI. Quelques bonnes pratiques

J’ai bien détaillés les techniques les plus utilisés et performante, cependant pour avoir un site rapide il faut y faire attention tous les jours, voici quelques bonnes habitudes à prendre :

  • Placer le code CSS en haut de votre page et éviter de mélanger du code CSS dans le code HTML
  • En revanche placer vos fichiers javascripts en bas de page, car ils bloquent le chargement des autres éléments
  • Réduisez les dimensions des images publiées, évitez de prendre des images trop grandes que vous réduisez en utilisant du CSS
  • Évitez au maximum les inclusions de scripts externes tels que les boutons « Like » de Facebook ou Twitter
  • Utilisez un autre domaine pour héberger les images, vous augmenterez le nombre de téléchargement en parallèle sur votre navigateur
  • Faites très attention aux erreurs 404 qui coûte cher, faites en la chasse !
  • Si vous utilisez WordPress, n’oubliez pas d’utiliser le plugin wp-super-cache

VII. Quelques liens et sources

J’espère que ce billet vous aura plus, si vous avez des questions ou des nouvelles méthodes n’hésitez pas à intervenir en postant un commentaire :-) .

Publié le 8 mai 2011 par Madrzejewski Alexis dans Articles, Développement web

Vous avez aimé ce billet ?

Inscrivez-vous au Flux RSS du blog, suivez-moi sur Twitter ou partager simplement cet article avec vos amis sur Twitter ou Facebook

Inscrivez-vous à la newsletter

Inscrivez-vous à la newsletter en précisant votre prénom et votre adresse email pour recevoir les dernières mises à jour du blog et des tutoriels exclusif par email (En savoir plus)

17 commentaires

Ajouter un commentaire

  1. JEi

    Super article ! Good job :)

    Répondre
  2. Thanks :) Ça faisait un bout de temps que j’y pensais 😀

    Répondre
  3. Bonsoir,

    Je viens de lire et de mettre en pratique sur mon WP, quelques conseils tirés ton exposé très pertinent.

    Rien de superflu.

    Un article qui mérite d’être largement propagé.

    Bravo Alexis

    Répondre
  4. Cédric

    Merci Alexis, très bon article, comme d’hab 😉
    J’ai appris beaucoup de trucs et ça m’a fait réagir pour mon site en préparation, afin de l’optimiser.

    Répondre
  5. Un récapitulatif complet et intelligible des actions à mener pour optimiser les performances d’un site Internet et ainsi apporter une meilleure expérience utilisateur.
    Très bon travail – Merci

    Répondre
  6. Gui

    Bonjour et merci pour ce superbe article. Cependant je viens de tester le plugins Wp minify pour wordpress. En utilisant le benshmark http://webwait.com/ le plugins ralentit mon site de presque 1,5 secondes. Bien sur j’ai fais les tests plusieurs fois. Je précise que je l’ai installé sans modifier quoique ce soit. Attention donc avec ce plug. A+

    Répondre
  7. Bonjour Gui,

    C’est vrai que de mon côté j’ai également installé cette extension sans voir de grosses améliorations en revanche je sais que ça fonctionne très bien chez certain blogueurs. Je vais regarder dans les options du plugins pour voir si ce n’est pas une question de réglages.

    Répondre
  8. Très bon rappel. Il existe aussi Minify et quelques outils de compression des fichiers CSS (CSS Compressor par exemple).
    Attention, il y a une coquille dans ton article sur « commentaires » :
    « CSS possède des espaces blancs et des commataires ».
    Bonne continuation.

    Répondre
  9. Bon article, un ensemble de bonnes pratiques qu’il est bon de rappeler.

    Je ne connaissais pas tous les sites indiqués au début de l’article, jusqu’à présent je me « contente » d’utiliser Yslow … je vais fouiller un peu ces services :)

    Répondre
  10. Merci Alex, je viens de corriger ça :)

    Répondre
  11. Pingback: TransBlogExpress 9 : optimiser son site web, campagnes YouTube, RP 2.0 et… Zahia ! | Choblab

  12. Assez sympa cette article. Dommage que tu nous aient pas fais un résumé en vidéo :)

    Répondre
  13. Merci Alexis de ce très bon article ! :)

    Par contre j’ai trouvé ce site web (http://gtmetrix.com/) qui est génial et que tu pourrais peut être rajouter dans ton article ?

    Il optimise ton html,ton css et tes images, il combine un peu Page speed et Yslow.

    Par contre j’ai un problème quand j’installe WP_super_cache, je dois modifier les permaliens mais je n’y arrive pas :s. (mais est-ce que je gagnerais encore du temps, si j’ai déjà mis en cache avec ta méthode (via .htaccces)?)

    Nb: chez moi le plugin Wp minify me fait gagner +- 0.08 secondes :)

    Répondre
  14. Encore un très bon article. J’ai réussi à avoir un score légèrement supérieur à celui du screenshot : 88/100 !
    Par contre sur le webpage test, j’ai également un F pour « use of CDN ». A quoi cela correspond ?
    Bonne continuation !

    Répondre
  15. Je ne connaissais pas du tout WebPageTest ; la fonctionnalité de double passe est super pertinente pour les sites d’actualités (ou en tout cas où une part conséquente du trafic est fidélisée). J’ai fait quelques tests et effectivement, la mise en cache modifie complètement la donne en termes de temps de chargement !

    Répondre
  16. Pingback: Tutoriel vidéo installation Thème extensions sur WordPress | CodesScripts.fr Tutoriels vidéo

  17. Un tres bon article,
    merci alexis pour l’effort et le partage.

    Répondre

Ajouter un commentaire


Ici les commentaires sont en DoFollow, profitez-en mais en abusez pas !
Veuillez ne pas poster de code (php, html ou autre) car il sera bloqué par le site.
Les commentaires ne sont pas immédiatement validés.
Merci de faire une recherche sur Google avant de poser une question.