Comment optimiser le temps de chargement de son site

Publié le 23 décembre 2009 par Delphine Dietrich 28 commentaires »

Suite à l’article Connaître et améliorer la vitesse de chargement des pages web dans lequel j’expliquais comment mesurer la performance d’un site et où trouver des suggestions d’amélioration, je vous explique comme promis ce qu’il faut faire concrètement pour optimiser le temps de chargement.

En bref, je m’attache dans cet article à vous expliquer comment se débarrasser des points rouges (high priority suggestions) indiqués par l’add-on Page Speed, sans vous noyer dans les explications. Non pas que ce ne soit pas intéressant de savoir comment cela fonctionne, mais on n’a pas toujours le temps…

Enable gzip compression

Activer la compression gzip est une manière simple et efficace d’économiser de la bande passante et de diminuer le temps de chargement des pages. Pour ce faire, ajoutez les lignes suivantes à votre fichier .htaccess.

# Compress the files
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript
# Removes some bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Leverage browser caching

Il faut spécifier une date d’expiration pour le plus de fichiers possibles pour profiter de la mise en cache, c’est-à-dire le stockage des fichiers dans le cache du navigateur afin d’éviter de les charger à chaque fois.
On peut faire cela de plusieurs manières. En voici une : ajoutez les lignes suivantes à votre fichier .htaccess.

# Mise en cache pendant 45 jours
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf|doc)$">
Header set Cache-Control "max-age=3888000"
</FilesMatch>

Vous pouvez modifier la durée de mise en cache en secondes, et en spécifier une différente selon le type de fichiers. Google Page Speed demande une mise en cache d’ un mois minimum.

Attention : si vous modifiez un fichier, les internautes pour lesquels le fichier est stocké dans le cache de leur navigateur ne verront pas le nouveau fichier avant que l’ancien expire. Le plus simple est de changer le nom du fichier.

Combine External JavaScript      &     Combine External CSS

C’est tout simple, copiez/collez le contenu de tous les fichiers JavaScripts que vous appelez dans un seul fichier .js et le contenu de tous les fichiers CSS que vous appelez dans un seul fichier .css, pour ne faire qu’un appel pour chaque.

Minify CSS      &     Minify JavaScripts

Là encore ce n’est pas compliqué. Page Speed vous propose une version optimisée de vos fichiers CSS et JavaScript, il n’y a qu’à l’utiliser pour les fichiers que vous hébergez vous même. Cliquez sur le + devant Minify CSS/JavaScript, puis sur « minified version » et enregistrez le code fourni.

Ne remplacez pas vos anciens fichiers, renommez-les en quelque chose comme style-non-minified.css pour les sauvegarder. En effet la version optimisée de vos fichiers CSS et Javascript est illisible et il est indispensable de conserver la version normale pour pouvoir y apporter des modifications, avant de relancer Page Speed pour l’optimiser à nouveau.

Optimize images

Optimiser les images signifie :
- Enregistrer les images directement à la taille voulue, pour ne pas avoir à les redimensionner en HTML.
- Enregistrer « pour le web », c’est à dire sans informations superflues et avec la qualité nécessaire.
Exemple sur Photoshop : Cliquez sur Fichier / Enregistrer pour le web et les périphériques, puis choisissez la qualité désirée grâce à l’aperçu.

Il est également utile de spécifier la longueur et la largeur de chaque image pour que le navigateur réserve la place nécessaire à chaque image et n’ait pas à déplacer le contenu après coup.

Optimize the order of styles and scripts

Le chargement de fichiers JavaScript externes bloque tout le reste. Pour optimiser le temps de chargement, il faut respecter l’ordre suivant :
- d’abord les scripts « inline »*,
- ensuite l’appel au fichier CSS externe,
- enfin l’appel au fichier JavaScript externe.

*Si les scripts « inline » peuvent être exécutés en dernier, comme le tracker Google Analytics, il faut alors les placer juste avant la balise </body>. Sinon, il faut les placer avant l’appel aux fichiers externes.

 

Bon voilà, j’espère que votre Page Speed vire au vert :)


Articles liés
Publicité

28 commentaires

  1. Sébastien dit :

    Merci pour le cours. Clair, net et efficace.

  2. Oussama dit :

    Un article très bien écrit et très bien expliqué :)
    Merci pour ces conseils :)

  3. referencement dit :

    Merci pour ces conseils que nous négligeons parfois mais qui sont très utiles pour les visiteurs…

  4. Mystere TV dit :

    Bonjour.

    Je tenais à vous remercier pour vos conseils et explications très claires concernant l’application des conseils fournit par google.

    Bonne continuation à votre blog.

  5. Super, ça faisait un moment que je cherchais. Résultat : 99/100 sur page speed.

  6. Gino dit :

    Ces conseils me semble bien utile d’autant que le temps de chargement de mon blog est trop long.
    Sont ils valable pour wordpress ?
    J’ai déjà eu des soucis (48 h00 inaccessible) et plus tot maladroit coté technique

  7. @Gino: Oui c’est valable pour wordpress !

  8. avairet dit :

    Il y a un souci avec « Optimize the order of styles and scripts » et le Tracker Google Analitycs Asynchrone.

    D’après Google, il faut mettre le snippet juste avant la balise </header>, donc après les fichiers css externes et les éventuels js externes. Mais cela provoque un affichage rouge de la règle « Optimize the order of styles and scripts ».

    J’ai essayé de mettre le snippet avant mes css et mes js, mais cela ne change rien !

    C’est tout de même bizarre que les outils d’optimisation Google soient en contradiction avec leurs préconisations pour implémenter leurs scripts…

  9. antivirus dit :

    Bonjour,

    Merci pour vos conseils, je suis passé de 79/100 à 94/100 ;) . Je ne connaissais pas ces technique. Merci !

    Par contre j’ai encore un souci. Page Speed me dit :

    [Score: 25/100]

    Enable compression -

    Compressing the following resources with gzip could reduce their transfer size by 54.9KiB (67% reduction).

    * Compressing http://www.actuvirus.com/scripts/jquery.js could save 54.9KiB (67% reduction).

    J’ai fait un fichier jquery.js.gz avec un logiciel de compression, que j’ai placé dans le dossier /scripts mais comment le faire accepter par page Speed ?

    Une balise en tete http a placer ? Un bout de code php ?

    Merci de vos réponses ;)

  10. antivirus dit :

    Ah oui, j’ai bien placé le code dans mon .htaccess. Donc apparemment je serais bon mais ca me dit pareil ^^ Je comprends pas très bien !

  11. @antivirus: Salut,

    Ce n’est pas la peine d’héberger les fichiers en double (un standard et un gzip), le code dans le .htaccess demande justement au serveur de gziper les fichiers à la volée lorsque le navigateur utilisé les accepte.

    Quelle est la version de votre serveur ? Le code que j’ai indiqué fonctionne pour Apache 2.0. Sous Apache 1.3 le code est un peu plus long mais se trouve sur le net.

    Dans tous les cas, il faut que mod_gzip ou mod_deflate soit activé sur votre serveur, c’est parfois désactivé par défaut.

    Sinon vous parliez d’un bout de code PHP. Oui, il existe une solution alternative en PHP. Il faut insérer le code :
    < ?php
    ob_start("ob_gzhandler");
    ?>
    en haut de tes pages php. Mais c’est quand même plus contraignant !

    J’espère avoir pu vous aider…

  12. actuvirus dit :

    Salut Delphine,

    Merci de ta réponse. J’ai bien fait quelques manip :

    Ajout du code :

    # Compress the files
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript
    # Removes some bugs
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent

    Tout a bien ete prit en compte jusque la.

    J’ai voulu allez plus loin et j’ai ajouté dans mon .htaccess un bout de code trouvé sur un site seo pour la compression de .js et .css :

    01
    02 AddType « text/javascript » .gz
    03 AddEncoding gzip .gz
    04
    05
    06 AddType « text/css » .gz
    07 AddEncoding gzip .gz
    08
    09 RewriteEngine on
    10 #Check to see if browser can accept gzip files.
    11 ReWriteCond %{HTTP:accept-encoding} gzip
    12 RewriteCond %{HTTP_USER_AGENT} !Safari
    13 #make sure there’s no trailing .gz on the url
    14 ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$
    15 #check to see if a .gz version of the file exists.
    16 RewriteCond %{REQUEST_FILENAME}.gz -f
    17 #All conditions met so add .gz to URL filename (invisibly)
    18 RewriteRule ^(.+) $1.gz [QSA,L]

    Bon sang !!! Plus jamais ! Méfiez vous avec ce type de code, surtout si votre site est déjà compressé par votre hébergeur ( vérifier avec un site comme :
    http://www.whatsmyip.org/http_compression/ )

    Du coup j’ai eu une double compression et ma page est passé de 14ko à 0.46 ko………………………

    Autant dire que Gloglo à pas du comprendre ce qui se passait ^^ Résultats : je suis passé de la 2eme page sur ma requête principal à la 33 eme page ! Direct !

    Du coup j’ai viré le dernier bout de code et ma page est bien revenu à 14 ko et mes requêtes recommence à réapparaitre tout doucettement.

    C’est déjà pas évident de se positionner mais avec un coup pareil, on flingue son site en 12 heure de temps ( le temps d’un bon crawl de Google ) ^^

    Donc se méfier aussi de page speed qui exige pas mal mais déraille un peu parfois avec ses conseils…

    Enfin voilu, juste un partage d’expérience, en espérant que chacun ne fasse pas la même erreur. Toujours bien vérifier que son site est déjà compressé en amont, sur son hébergeur ;)

    Merci de vos conseils :) Une bonne journée. Je repasse lire d’autres articles très bientôt. Merci Delphine ;)

  13. Double compression je ne savais pas qu’on pouvait faire ça… t’as pas essayé avec le php en plus ? lool
    Il existe des sites qui te permettent de tester si la compression gzip est active.

  14. hélène dit :

    Parfait
    disparition des alertes rouge et orange Google Speed et score de 99/100 atteint en quelques minutes.

  15. Anonyme dit :

    Salut,

    Super cours, les points traités dans ton article sont-ils établis en fonction de l’ordre d’importance ?

  16. Anonyme dit :

    @antivirus:

    Sur le site de JQery, une version de « production » est proposée. Prends celle-ci, pour optimiser le chargement de ta page.

  17. @Anonyme: oui, du moins j’ai essayé !

  18. rencontre dit :

    Sympa cette liste, mais pour l’opti PageSpeed avec un Wordpress, c’est plus complexe. Déjà il serait bon d’installer le plug in « WP Super Cache » pour optimiser le temps de chargement.

    Pour optimiser les images png il y a un logiciel comme « PngOptimizer » qui peut compresser un PNG jusqu’a 95% de son poids initial !

    Ca peut déjà faire gagner du poids et du temps de chargement ;)

    Merci pour ce bon article, pas mal de truc que je ne connaissais pas pour optimiser la vitesse :)

  19. Cristo dit :

    Merci pour ces astuces claires et efficaces : je vais appliquer ça tout de suite pour voir les résultats.

  20. pps dit :

    Je confirme l’utilité de wp super cache ;) Je l’ai utilisé alors qu’à un moment donné, les pics de trafic journalier faisaient planter le site. J’ai pu tenir un bon moment avant de devoir migrer vers une offre plus performante ;)

  21. Ca permet de gagner beaucoup en page speed et donc en temps de chargement. C’est un point essentiel sur le web et de plus en plus en référencement aussi. Merci pour ces petits conseils rapides et pratiques.

  22. Excellent, si j’avais pu penser à chercher cet article avant de plonger moi même là dedans… :)

    Un grand merci !

  23. fred dit :

    Bonjour,
    pour le dernier point: Optimize the order of styles and scripts
    comment faire avec un blog Wordpress?
    sachant, que j’ai du javascript dans les widgets, comment pouvoir définir l’ordre?
    merci :-)

  24. @fred: Bonjour Fred,
    J’ai bien peur que tu ne puisses rien faire avec les widgets / plugins… De nombreux plugins ralentissent effectivement le chargement des pages et il faut s’en passer quand cela est possible, ne pas installer un plugin si on sait faire la même chose en codant directement dans les fichiers.

  25. Sébastien dit :

    Petit complément :
    Dans une démarche d’optimisation du temps de chargement, il est judicieux d’examiner le « waterfall chart » pour voir dans quel ordre sont éxecutées les requêtes http, le temps qu’elles prennent et identifier lesquelles bloquent les autres. L’idéal reste de coupler cette analyse à un test de montée en charge, ce que permet CloudNetCare (outil de test de charge puissant en rvbu, simple et peu coûteux).

  26. Aurélien dit :

    Merci pour ce guide très complet, il permet de surveiller un site simplement à l’aide de la « petite » liste.

  27. Merci pour ces conseils encore d’actualité !