Améliorer considérablement son score Google page speed et la vitesse de chargement de ses pages.
Comme annoncé sur le blog officiel d'analytics, la vitesse de chargement de vos pages et votre score au Google page speed deviendront un nouvel indice de calcul pris en compte dans l'algorithme Google.
En complément le billet de Sylvain Richard vous permettant la validation w3c du bouton Google +1 aborde également le sujet de ces nouveaux indices via une étude américaine démontrant l'impacte de l'utilisation du bouton G+1 (20% d'amélioration dans les SERPs).
Dans notre cas et avec les astuces que nous vous donnerons sur ce petit tuto, notre progression est de 28% sur notre note finale passant de 70% pour les pages de l'annuaire à 98% voir 99% pour certaines pages et de légères améliorations dans les SERPs depuis quelques jours.
Nous allons donc tenter de les aborder pour vous aider dans votre quête d'un bon positionnement sur les moteurs de recherches.
1 ère étape : Utilisez le code Asynchrone de Google Analytics
Si vous utilisez Google Analytics, sélectionnez le code asynchrone proposé par Google, (certains ne l'utilisent pas encore) à placer devant votre balise </head>. Cette petite astuce devrait en quelques secondes vous faire regagner 1 à 2 % pour votre score Google page speed.
Le code Asynchrone (éditez votre ID) :
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
2 ème étape : Définir la mise en cache de ses images, js, etc...
Définir une mise en cache pour vos fichiers permet un gain de temps considérable pour le chargement de vos pages et quelques économies de bande passante : comptez 3 à 5 % d'amélioration de votre score.
Si vous êtes sur un hébergement mutualisé l'édition de votre fichier .htacess à la racine de votre répertoire suffit en général !
Voici notre code utilisé pour la mise en cache de 7 jours(recommandation Google) à utiliser de préférence sur des extentions et fichiers statiques :
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 7 days"
</IfModule>
Header unset ETag
FileETag None
</FilesMatch>
Si vous possédez un serveur dédié assurez-vous que les mods expires, deflate et header sont activés, vous pourrez éditer votre fichier httpd.conf ou apache2.conf avec les directives de mise en cache :
Commandes pour les activer sous Linux rendez-vous dans votre répertoire apache2 :
a2enmod deflate
a2enmod headers
Relancez ensuite apache pour appliquer vos modifications :
3 ème étape : Minifier ses CSS, codes HTML et Javascript
Alléger et minifier son CSS, code HTML et code Javascript permet un gain de 2 à 4 % au score Google Page Speed speed voir + selon la taille de vos fichiers.
- Pour votre feuille de style en cascade (CSS) :
Vérifiez que vous ne répétez pas les mêmes valeurs (par exemple dans votre balise body vous définissez que la couleur de votre texte sera blanc, vous n'aurez plus besoin de le définir ailleur : cadre, p,...) supprimez les retours chariots inutiles (saut à la ligne). Épurez-la au maximum de tout ce qui vous semble superflue, celle-ci nettoyée, utilisez ce petit outil minimizeur de css qui réduira au maximum la taille de votre css en une seule ligne (sauvegardez votre css original pour vos prochaines modifications).
- Pour vos codes HTML, PHP, Javascript,... :
Supprimez tout espace inutile dans votre code, resserrez au maximum vos balises, div, script etc... et lorsque c'est possible préférez des codes en une seule ligne.
- Pour vos codes Javascript :
Appellez-les toujours dans des .js externes et si possible rassemblez-les en un voir deux fichiers : lorsque vos .js sont prêts minimisez-les à l'aide de ce logiciel de compression Javascript (nécéssite Java).
4 ème étape : Alléger ses images PNG et JPEG
Alléger toutes vos images permet un gain de 1 à 2 % au Google Page Speed voir + selon votre nombre d'images. Ces logiciels vous permettent de réduire considérablement la taille de celles-ci en supprimant des balises et meta inutiles insérées par vos logiciels de retouches, ils diminuent le nombre de couleurs inutilisés par la palette de couleurs, etc...
- Pour vos JPEG :
Téléchargez Jpegtran (Windows/Unix) ou Jpegoptim (Linux) ImageOptim (Mac)
- Pour vos PNG :
Téléchargez OptiPNG (Windows/Linux) ou PNGOUTWin (Windows) ImageOptim (Mac)
5 ème étape : Utiliser la méthode Sprites pour ses images
La méthode la plus efficace lors de nos test, en effet celle-ci permet un gain jusqu'à 10 % au score Google page speed.
Cette technique consiste à rassembler toutes vos images en une seule, accelérant le chargement de vos pages. Il suffira ensuite d'appeler chaques éléments via votre CSS.
Exemple pour nos fiches d'annuaires : Infinisearch le portail de référencement
Cette page appelle 6 icônes différentes que nous avons rassemblé en une seule image.
Apercu de l'image unique :
Dès que vous avez rassemblé toutes les images dont vous avez besoin sur votre page il ne vous reste plus qu'à les positionner à l'aide de votre feuille de style (CSS)
Chaque images séparées fait 16x16 on va faire une seule image avec 3 icônes en haut et 3 en bas
Celles-ci rassemblées sur une seule image, cela donne :
Largeur 1 image 16x3= 48
hauteur 1 image 16x2= 32
Exemple du code pour notre fiche :
<div class="ico_info_google"> </div>
<div class="ico_info_yahoo"> </div>
<div class="ico_info_sociaux"> </div>
<div class="ico_info_alexa"> </div>
<div class="ico_info_twitter"> </div>
<div class="ico_info_facebook"> </div>
Votre CSS :
.ico_info_google {
background: url(images/ico_info.png) top left no-repeat;
width:16px; //Sa largeur d'origine
height:16px; //Sa hauteur d'origine
}
.ico_info_yahoo{
background: url(images/ico_info.png) top center no-repeat;
width:16px;//Sa largeur d'origine
height:16px;//Sa hauteur d'origine
}
.ico_info_sociaux{
background: url(images/ico_info.png) top right no-repeat;
width:16px;//Sa largeur d'origine
height:16px;//Sa hauteur d'origine
}
.ico_info_alexa{
background: url(images/ico_info.png) bottom left no-repeat;
width:16px;//Sa largeur d'origine
height:16px;//Sa hauteur d'origine
}
.ico_info_twitter{
background: url(images/ico_info.png) bottom center no-repeat;
width:16px;//Sa largeur d'origine
height:16px;//Sa hauteur d'origine
}
.ico_info_facebook{
background: url(images/ico_info.png) bottom right no-repeat;
width:16px;//Sa largeur d'origine
height:16px;//Sa hauteur d'origine
}
Pour plus d'information sur la méthode Sprites visitez la page Sprites Pompage.
En espérant que ce tuto vous aidera à améliorer vos scores et à bien ressortir dans les SERPs, n'hésitez pas à nous faire par de vos retours, remarques et suggestions sur les astuces d'optimisation de votre score Google Page Speed. Merci !
La nécessaire optimisation du temps de chargement qui permet d'améliorer ses positions. Par contre, le bouton +1 ralentit la vitesse de chargement et n'est pas valide W3C. Cherchez l'erreur ;)
lol c'est pas faux ;) Je n'ai pas appliqué toute la méthode sur cette fiche car je termine d'abord l'optimisation de l'annuaire. Mais ces dev feraient bien de penser un peu + aux webmaster avec leurs boutons en tout genre. En attendant la soluce sur le blog de Sylvain :)
En ce qui concerne le point cs sprite : tu peux factoriser les class là où tu peux (même image et même dimensions) puis surcharger avec une classe supplémentaire chaque icône en modifiant les coordonnées de l'image background uniquement. Comme on est là pour gagner le moindre octet allons-y !
Bonsoir Jean-Louis merci pour la petite astuce que je ne connaissais pas. Je testerais prochainement ;)
Il est vrai que ces nouveaux boutons vont devoir évoluer pour être valide W3C. Concernant le tuto, c'est simple et complet. Il faut juste ne pas avoir peur de mettre les mains dans le cambouis et de passer quelques heures pour modifier le site afin de rendre l'affichage plus rapide ;) Pour ma part, j'utilise ImageOptim sous Mac pour réduire le poids des images. A propos du minimiseur de CSS, je suis pas fan car le fichier devient vite fatiguant à lire une fois que le code est en ligne. A moins de conserver une copie locale pour les modifications. PS : Merci pour le lien vers Infinisearch dans l'article.
@Hervé Merci pour ImageOptim je le rajoute dans le tuto. Pour le minimiseur de CSS je te rejoins, la copie locale est obligatoire sinon ça devient vite ingérable, de rien pour le lien :)
Merci pour les précieuses informations, mes sites tournent entre 85 et 87 /100
Astuces intéressantes et très bien détaillées, j'utilisais WebPageTest pour mesurer la vitesse de mon site et j'avoue que ton outil est un véritable plus.
Bien utile ces ressources pour optimiser le temps de chargement des pages web ! critère SEO qui plus est.
Merci pour l'ensemble de ces informations. Pour le css compressé, il suffit d'avoir un dossier admin avec ses templates, un dossier static pour tous les médias et un dossier www avec le code généré. Ça permet de faire sa tambouille tranquilou et de générer ce qui sera présenté. Comme cela ca n'ennuie que ceux qui copie colle le css et pas vous. Amitiés