Cela fait maintenant quelques mois que Google a annoncé prendre en compte pour le référencement, la vitesse de chargement des sites internet.
GOOGLE PAGE SPEED
On a pu donc, dès lors, tous tester nos sites/blogs et mesurer leur vitesse aux yeux de Google, grâce au plugin Page Speed, de Firefug. Et pour certains c’est la course au 100/100.
Alors pour ceux qui ne savent pas comment faire pour atteindre un score convenable, voici quelques conseils pour bien commencer :
Compresser les scripts JavaScript [quand Google Page Speed vous dit : Combine external JavaScript]
Les fichiers JS sont parfois très lourds à charger (surtout lorsque vous utilisez des librairies comme jQuery,
Mootools etc..), ainsi ils augmentent de manière très significative le temps de chargement de vos pages.
Voici quelques sites qui proposent de compresser vos scripts JS :
http://javascriptcompressor.com/
http://www.xmlforasp.net/JSCompressor.aspx
Pour ma part je vous conseille également de regrouper vos fichiers JavaScript en un seul, tout en les différenciant par quelques commentaires pour vous y retrouver.
Compresser les feuilles de styles CSS [quand Google Page Speed vous dit : Combine external CSS]
Les CSS eux aussi prennent de la place, pensez à les compresser. Pour cela vous pouvez par exemple utiliser l’un des deux sites suivants :
http://www.cssoptimiser.com/
http://www.cssdrive.com/index.php/main/csscompressor/
Pour ma part je vous conseille également de regrouper vos fichiers JavaScript en un seul, tout en les différenciant par quelques commentaires pour vous y retrouver.
Optimiser les images
L’idéal est de toujours utiliser la fonction “Enregistrer pour le web” dans la plupart des softs comme Photoshop. Le but étant que l’ensemble de toutes les images d’une page web ne soit pas lourd à charger. Pour ceux qui n’oserais et ne saurait toucher aux images, il existe des “Image Optimizer” en ligne, comme :
http://tools.dynamicdrive.com/imageoptimizer/
http://www.imageoptimizer.net/Pages/Home.aspx
Renseigner la taille des images [quand Google Page Speed vous dit : Specify images dimensiosn]
C’est un oubli courant, la largeur et la hauteur d’une image dans le code source. Pourtant cette information est très utile car si elle est définie, le navigateur pourra alors, avant le chargement de celle-ci prévoir sa place avant d’aller la chercher.
Réduire le nombre de requêtes HTTP
En combinant les JS et les CSS comme vu plus haut, on diminue ainsi le nombre de requêtes et on améliore la vitesse de chargement du site.
Utiliser le cache [quand Google Page Speed vous dit : Leverage Browser Caching ou Accept Encoding Header]
Le cache permet tout simplement de ne pas recharger un élément (feuille de style CSS, image etc..) si celui-ci est déjà connu, et le tout selon un délai déterminé. Pourquoi ne pas en profiter ?Vous pouvez facilement, en PHP, contrôler celui-ci, en ajoutant en tête de vos codes :
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
Ici $offset represente donc la duree du cache, en secondes, soit dans l’exemple ci-dessus : 3 jours.
Creer un sous-domaine pour les médias comme les images, les vidéos etc… Au lieu d’accéder a vos images par :
http://www.monsite.com/images/
Faites un sous domaine, par exemple medias, ou statics, et faites le pointer sur le dossier dans lequel vous stockez les medias. cela vous donnera par exemple :
http://statics.monsite.com/images/mon_image.jpg
Le .htaccess
Le .htaccess vous permet de gérer le cache par type de fichier.
Exemple :
# Set Expires Headers
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
</FilesMatch>
Vous paramétrez donc ici le cache pour les fichiers de fichiers .ico / .pdf / . flv [.....] .swf. Mais vous pouvez utiliser des options différentes en fonction des type de fichiers :
# Set the cache-control max-age
# 1 year
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31449600, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
# 4 HOURS
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=14400, must-revalidate"
</FilesMatch>
Voici pour les actions que je mets en place sur mes sites, cependant je ne peux que vous conseiller ces trois liens :
http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
http://www.askapache.com/htaccess/apache-speed-cache-control.html
http://www.askapache.com/htaccess/apache-speed-compression.html