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 compressionActiver 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.
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 cachingIl 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.
<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 CSSC’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 JavaScriptsLà 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 imagesOptimiser 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 scriptsLe 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
Merci pour le cours. Clair, net et efficace.
Un article très bien écrit et très bien expliqué
Merci pour ces conseils
Merci pour ces conseils que nous négligeons parfois mais qui sont très utiles pour les visiteurs…
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.
Super, ça faisait un moment que je cherchais. Résultat : 99/100 sur page speed.
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
@Gino: Oui c’est valable pour wordpress !
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…
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
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 !
@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…
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 
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.
Parfait
disparition des alertes rouge et orange Google Speed et score de 99/100 atteint en quelques minutes.
Salut,
Super cours, les points traités dans ton article sont-ils établis en fonction de l’ordre d’importance ?
@antivirus:
Sur le site de JQery, une version de « production » est proposée. Prends celle-ci, pour optimiser le chargement de ta page.
@Anonyme: oui, du moins j’ai essayé !
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
Merci pour ces astuces claires et efficaces : je vais appliquer ça tout de suite pour voir les résultats.
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 
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.
Excellent, si j’avais pu penser à chercher cet article avant de plonger moi même là dedans…
Un grand merci !
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
@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.