Suivez WebRankInfo sur les réseaux sociaux :

<IfModule mod_deflate.c>
<FilesMatch "\.(html|php|txt|xml|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

AddOutputFilterByType DEFLATE text/html text/xml application/xhtml+xml text/plain application/javascript text/css

39 commentaires

1. Djerba dit :
   7 décembre 2009 à 23:46

   Je me sert déjà de quelques outils proposés.
   J'ai bien aimé l'astuce du tracking asynchrone avec Analytics. Et c'est ce qui nous manque vraiment :)
   De nos jours, les mashups, gadgets, widgets...prennent du temps pour charger au coté du client !

   Ex: en faisant appel à JQuery à travers la JSApi avec google.load("jquery", "1.3");
   Est-ce une bonne pratique ou non ?

   L'utilité de les regrouper à travers un seul serveur me parait convenable. "à tester !"

   On doit aussi essayer de réduire les requêtes simultanées.
   Bravo pour ce tutoriel que je viens de marquer :)

2. Olivier TASSEL dit :
   8 décembre 2009 à 6:48

   Bravo pour cet article complet.

   Il est également possible d'optimiser la vitesse de son site en :
   - utilisant d'autres serveurs web comme Nginx par exemple ou encore lighttpd.
   - en supprimant les retours chariots et autres tabulations dans le code source des pages CSS et HTML (technique utilisé par Google notamment)
   - ...

3. Léo, Propulsr dit :
   8 décembre 2009 à 10:07

   Bon résumé même si je ne suis pas tout a fait d'accord sur certains points :

   # Regrouper les styles CSS ensemble dans un fichier CSS externe (mais pas dans plusieurs !)
   # Regrouper les scripts JavaScript ensemble dans un fichier JS externe (mais pas dans plusieurs !)

   pour réduire le poids des pages. Le bytes sauvées correspondent uniquement aux lignes de codes qui n'apparaissent pas dans le HTML. Vous pouvez aussi utiliser le @import dans un feuille de style pour en appeler d'autres mais le probleme ne sera pas résolu.
   L'avantage principal de grouper les fichier est de réduire le nombre de requêtes DNS pas de réduire le poids des pages.

   J'ai pas mal joué avec l'optimisation de mes sites ces dernières semaines et tous les sites/plugins parlent de 'delivery of static content from a cookies-less domain" ce qui va a l'encontre de :

   Minimisez le nombre de requêtes DNS en limitant le nombre de (noms de) domaines concernés par vos scripts et fichiers.

   Car il faut créer un nouveau (sous-) domaine qui n'envoie pas de cookies avec les requêtes. Pareil pour le CDN, aucune mention ici (même si cela ne concerne que les sites à très fort trafic).

   @Olivier Tassel - la suppression de retour de chariots dans les scripts est utilisé par Google (et autres) sous le terme 'minify'. Google Page Speed vous donne d'ailleurs une version 'minifiée' de vos CSS lorsque vous testez une page.

   Pour la gestion de cache, voici un exemple de script htaccess que j'utilise sur un site.

   ExpiresActive On
   ExpiresByType text/css "access plus 1 month"
   ExpiresByType image/x-icon "access plus 1 year"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType text/javascript "access plus 1 month"
   ExpiresByType application/javascript "access plus 1 month"
   ExpiresByType application/x-javascript "access plus 1 month"
   ExpiresByType application/x-shockwave-flash "access plus 1 year"
   ExpiresByType audio/mpeg "access plus 1 year"

   Je dois dire que le cache et la compression sont les variables les plus faciles à optimiser et elles m'ont fait gagner de précieuses secondes sur webpagetest.org.

   Si seulement je pouvais améliorer mon TTFB wordpress maintenant !

4. yves dit :
   8 décembre 2009 à 11:50

   firebug est très bien aussi pour mesurer le temps de chargement : à rajouter en ressources !

5. Elia dit :
   8 décembre 2009 à 13:21

   tracking asynchrone de Analytics permet d'utiliser les variables additionnel genre _setDomainName ?

6. Olivier TASSEL dit :
   8 décembre 2009 à 17:52

   @Léo
   Le fait de regrouper les CSS et les JS ne permet pas seulement de réduire le nombre de requêtes HTTP : l'intérêt est de supprimer les éléments doublons (classes, id, fonctions,...) et donc de réduire le poids global.

   Au delà de ses aspects, les conseils d'optimisation des requêtes SQL ainsi que du code (PHP,...) restent de mise !

7. MrBark dit :
   8 décembre 2009 à 21:00

   Salut,

   Bon tout d'abord je suis très choqué par cette histoire de dns google ! je n'étais meme pas au courant...
   Comme quoi ca commence à aller très loin...
   depuis quand google a-t-il mis en place ce "service" ?

   Pour ce qui est de la rapidité, je ne suis pas neutre car mes sites de business sont vraiment très rapides, donc je ne souhaite qu'une chose: que google pénalise enfin les sites lents, c'est à dire mal faits en général.
   Mais en était plus objectif, je pense que c'est un critère ridicule tant que les valeurs ne sont pas extrèmes :
   l'internaute se moque totalement que la page prenne 0 ou 5 secondes à se charger si son contenu est intéressant.

   Mais voila, comme je l'ai dit: pourvu que les sites ou les pages mettent plus de 2 secondes passent bien loin ! hihi :D

   Personnellement je pense que ce critères est déja pris en compte depuis des années, au moins de manière binaire ("site lent") pour les extremes.

8. Moloson dit :
   8 décembre 2009 à 21:17

   Regroupé tout les CSS dans un seul et même fichier c'est pas bien, car on utilise pas obligatoirement toutes les propriétés dans une page, donc ça alourdi la taille du fichier pour rien :)
   En plus il existe des scripts comme minify qui permettent de regrouper plusieurs CSS ensemble, après une petite règle de rewrite et ça devient "invisible" pour l'utilisateur ;)

9. MaxR de Maxadi dit :
   9 décembre 2009 à 10:46

   Favoriser la rapidité du chargement des pages, c'est un peu comme un libraire qui conseillerait les livres ayant un miminum de pages, sous prétexte qu'ils se lisent plus vite.

   Je suis d'accord avec MrBark, si la qualité est au rendez-vous, ce n'est pas quelques secondes de plus ou de moins qui va détourner l'attention de l'internaute intéressé.

   Google prend beaucoup de mesures peu populaires ces temps-ci (exclusions de comptes Adwords, ...). Vous ne trouvez pas ???

10. Léo, Propulsr dit :
    9 décembre 2009 à 10:46

    @Olivier Tassel, oui il faut que j'aille bidouiller wordpress mais bon devoir le faire a chaque mise à jour ne m'enchante guère :)

    @MrBank, l'annonce des DNS date de la semaine passée (jeudi si mes souvenirs sont exacts). Par contre je ne suis pas sur que l'internaute se moque si les pages d'un site mettent 5 secondes à se charger, et c'est d'ailleurs pour cela que Google pousse aujourd'hui les webmasters à s'intéresser à la vitesse de leur site.

    Pour rappel ils fixent la limite entre rapide et lent (dans GWT) à 1.5sec.

11. tro choi dit :
    9 décembre 2009 à 13:57

    Merci pour cet article!

    Ca devrait forcer pas mal de gens a investir aussi dans un serveur dédié, et a optimiser les pages.
    Les visiteurs seraient gagnants.

12. MrBark dit :
    9 décembre 2009 à 16:50

    @Leo : 1.5s :D juste ce qu'il faut pour faire mon bonheur :)

    PS: pour les css je ne suis pas d'accord non plus pour les regrouper en un seul fichier.
    J'ai un site à la fois encyclopédie (domaine racine) , forum (sous domaine forum) et plateforme de blogs (sous domaine blog). Dans ce cas, j'ai fait un styles.css principal contenant ce qui est utilisé partout domaine racine, et aussi 2 autres pour ce qui n'est utilisé que sur le forum (styles-forum.css) et que sur les blogs (styles-blog.css).
    Il est évident que dans ce cas il ne faut pas les regrouper car un visiteur qui n'affichera qu'un seul sous domaine sera bêtement ralenti.

    En revanche, à la suite de cet article je me suis fait un perl tout bete pour simplifier mes css, et ca me gagne 11% sur ces fichiers, c'est à dire plus de 2KB sur un fichier de 20KB.
    Voila :

    $file =~ s/\n //g;
    $file =~ s/\s / /g;
    $file =~ s/(?<=\D)0px/0/ig;
    $file =~ s/(?<=\{) //g;
    $file =~ s/ (?=\})//g;
    $file =~ s/ (?=\{)//g;
    $file =~ s/;(?=\})//g;
    $file =~ s/(?<=;) //g;

13. Dan166 dit :
    10 décembre 2009 à 19:32

    Sujet passionnant, certes, et j'ai cherché quelque part par un tutoriel complet pour adapter mon site à cette nouvelle tendance...et je n'ai rien trouvé sur le web. Car, n'étant pas un pro comme la plupart d'entre vous, j'aurais besoin d'un script détaillé (css et html) pour appliquer la méthode. Si l'outil générateur de sprites est utile, je ne vois pas comment fabriquer les lignes html pour le faire fonctionner. Ayant passé 2 heures en vain sur la toile à faire ces recherches, je pense que celui qui créerait ce tutoriel ferait une super B.A.

14. Léo, Propulsr dit :
    12 décembre 2009 à 16:34

    Pour les sprites CSS, il y a la trad de l'excellent article de alistapart par pompage : http://www.pompage.net/pompe/sprites/

15. site Des Geeks et des lettres dit :
    13 décembre 2009 à 22:50

    Article sympathique, cependant on peut trouver d’autres configurations et astuces. Perso. j’ai trouvé les armes ultimes pour augmenter la réactivité : http://desgeeksetdeslettres.com/blog/web/plugin-reduire-cache-css-blog-wordpress

16. Olivier Duffez dit :
    14 décembre 2009 à 8:41

    Merci le Geek pour cet article intéressant (j'ai changé le lien pour pointer directement vers la bonne page)

17. Dan166 dit :
    14 décembre 2009 à 11:12

    Merci. On apprend plein de choses ici ! J'ai déjà divisé par 2 mon temps de chargement en plaçant mes images dans des id dans mes fichiers css.

18. dbl5 dit :
    17 décembre 2009 à 6:47

    Bonjour

    Le code

    SetOutputFilter DEFLATE

    doit être mis en place dans le fichier de configuration du module mod_deflate ?

19. Léo, Propulsr dit :
    17 décembre 2009 à 11:35

    @dbl5 non ce code va dans le fichier .htaccess du site

20. Création site tunisie dit :
    4 janvier 2010 à 8:43

    Excellent article . Merci Olivier

21. Visit Rome dit :
    11 janvier 2010 à 12:32

    Ce qui va grandement aider le chargement des pages notamment de blogs, en croissance exponentielle, (et la conséquente prise en compte par Google comme atout bénéfique en tant que critère de positionnement) sera aussi la canalisation des commentaires de ces blogs qui font moins de 140 caractères mais qui constituent un poids non indifférent dans le chargement d'une page web quand ils commencent à etre nombreux.

    Il y aura donc plus de contenu, moins de commentaires et la vitesse relative au chargement de ces pages ne fera que faire jouir le positionnement de ces sites.

22. Indiana jeux.com dit :
    30 janvier 2010 à 17:13

    Merci pour cet article. En effet, peut-être sera t-il ( encore ) plus utile quand google tiendra réellement compte du temps de chargement des pages. J'ai changé de serveur pour mon site indiana-jeux il y a un mois, suite à la charge croissante de trafic et à une erreur sur une de mes requêtes, certaines pages mettaient plus de 20 secondes à se charger. Maintenant c'est beaucoup plus rapide et je n'ai vu aucun changement dans mon positionnement et encore moins sur mon trafic. Je vais pas m'en peindre :)

23. BOURLINGUEUR dit :
    21 mars 2010 à 22:59

    Merci pour cet article, j'aimerai temps pouvoir déchiffrer les informations du page speed qui sont loin d'être évidente pour un non professionnel

24. plusdefric dit :
    9 juin 2010 à 21:29

    Moi j'ai pris conseil pour compresser mon fichier css après quelques test et quelques galère j'ai réussi a y arriver. merci

25. audi dit :
    28 juin 2010 à 17:54

    les CMS comme typo3 ou wordpress sont déjà optimisés?

    Y 'a des pluggins qui optimisent encore plus le poids (après optimisation photos...)? le serveur s'il est enorme pas besoin de plus de bande passante (la difference entre site en local ou petit serveur et gros serveur), non?

26. jeux dit :
    24 septembre 2010 à 9:40

    Bonjour WRI,

    J'ai en effet fait des test, et google prend en compte la rapidité de l'affichage d'une page pour le référencement, enfin c'est un des critères parmi XXX autres ;)
    donc merci pour ton article, il est super complet et bien pratique !

27. toupil dit :
    8 octobre 2010 à 10:37

    article très intéressant. j'utilise un certain nombre de ces optimisations, et je suis à moins d'une seconde sur ma page d'accueil.
    merci !

28. SpeedyWeb dit :
    5 novembre 2010 à 12:52

    Pour ceux qui sont chez 1and1 (pas testé ailleurs) et qui veulent compresser leur css et javascript:

    Renommez vos .css et .js en .php et mettre en haut de vos fichiers:

    pour le css:

    entre deux balises php:
    ob_start("ob_gzhandler");
header("Content-type: text/css; charset: utf-8");

    pour les javascript:

    entre deux balises php:
    ob_start("ob_gzhandler");
header("Content-type: text/javascript; charset: utf-8");

    Renommez dans vos sources html l'appel à ses fichiers en .php.

    Voila vous venez de gagner quelques points à pagespeed :)

29. Dakine dit :
    9 novembre 2010 à 23:50

    C'est justement lorsque je recherche les astuces pour accélérer mon site que WRI me l'envoi dans ma boite au lettre !

    Peut t-on bêtement rassembler tous les scripts JS dans un seul fichier puis l'appeler dans la balise HEAD, ou il faut éditer chaque fichier php et tpl un par un ? (sur Prestashop dans mon cas)

30. Djerba dit :
    30 décembre 2010 à 12:31

    Il y a aussi la technique de plus en plus utilisée, de regrouper toutes les images principales (icones, boutons, header, logo, etc etc) sur une seulle grande image. C'est une très bonne méthode pour limiter le nombre de chargement d'images.
    Un très bon outil pour vérifier la vitesse de chargement de vos pages : pingdom.com

31. Olivier Duffez dit :
    30 décembre 2010 à 16:11

    Regrouper les images, c'est ce qu'on appelle utiliser des sprites (indiqué dans l'article mais pas de manière assez explicite en effet)

32. Pingwy dit :
    9 février 2011 à 13:38

    En effet la rapidité d'un site Internet est devenu quelque chose d'important. Autant pour google que pour les internautes.

    Voici un autre article de blog qui fait le rapprochement entre rapidité de site - google - ergonomie :
    http://blog.pingwy.com/2011/02/comment-ameliorer-la-rapidite-et-lergonomie-de-mon-site/

33. Eleanor dit :
    28 février 2011 à 13:04

    merci
    j'utilise un certain nombre de ces optimisations.

34. SpeedyWeb dit :
    2 mars 2011 à 21:19

    Les sprites, ça dépend du site en fait...
    Il faut quand même faire le rapprochement entre le gain en vitesse pure dépendant du nombre d'image du site à la base, sa capacité d'adaptation en cas de mise à jour et le temps passé à tout coder !
    Si il faut refaire tout le css pour un changement d'image, c'est pas le but non plus ! Bref a utiliser mais que pour des projets très précis et à haute charge serveur !

35. Programme télé dit :
    24 mars 2011 à 18:17

    J'ai essayé l'astuce de @Léo en ajoutant ses lignes dans mon fichier .htaccess mais ça me fait une erreur 500. Quelqu'un sait il de quoi ça peut venir ? Merci

36. SpeedyWeb dit :
    24 mars 2011 à 22:00

    Si vous voulez voir un site à 100% à pagespeed, regardez içi,

    http://www.nancy-immo.fr

    deux ans de travail pour régler mes htaccess !

37. seanthi dit :
    13 mai 2011 à 1:20

    Bonjour,
    Très intéressant comme article mais comment peut faire celui qui a fait son site avec joomla?????
    Car j'ai remarqué que la plupart des sites sous joomla sont extrêmement lent à charger....
    Merci

38. jouer dit :
    4 octobre 2011 à 23:47

    Je dirais que pour joomla comme pour d'autres sites, dont le mien, la meilleure solution est de gérer un système de fichier cache, c'est à dire que si une page à été calculer via des requête SQL, pour générer cette page, si cette page la ne change pas, pourquoi la régénérer a chaque fois alors que l'on peut écrire le résultat dans u fichier, après y a juste à tester si la page est déjà généré...
    par exemple avant, chaque page avait besoin de 0,02 à 0,20 suivant la charge du serveur pour se générer et s'afficher, maintenant c'est 0,00 !

39. fogan dit :
    21 janvier 2012 à 9:38

    c'est vraiment cool votre truc. j'ai aime. merci

Postez un commentaire !

Les champs marqués du signe * sont obligatoires. L'adresse email ne sera pas affichée.

En postant un commentaire, vous acceptez les CGU du site WebRankInfo.