Pour le moment, Google indique que moins de 1% des requêtes sur son moteur de recherche sont affectées par le temps de chargement, et uniquement sur le site américain Google.com. Mais ce n’est probablement qu’un début.

Comment évaluer la vitesse de chargement de ses pages web ? L’analyse de performances du site de google webmasters tool est-elle fiable ? Mon graphique oscille beaucoup, même quand je ne fais rien (oui je sais j’ai pas mal rien fait justement sur mon blog ces derniers temps :s ), et le fait d’avoir fait virer page speed au vert n’a rien changé.

Google webmasters tool indique que les pages de mon site se chargent en 6,8 secondes en moyenne. Pingdom donne 0,6s pour la home de mon site, 1,9s pour la home du blog, et entre 1 et 3s pour les articles…

Et les sites en flash, ou silverlight ou je ne sais quoi d’autre ? Si Google ne lit pas le code, ça donne quoi pour lui, un téléchargement éclair ?

Pas mal de questions donc pour le moment. J’espère que les experts en SEO planchent dessus Une chose est sure, les hébergeurs doivent se frotter les mains et préparer des campagnes de pub pour nous faire opter pour des hébergements plus rapides et plus chers !

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.

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.

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

Je vais préparer un article « Comment optimiser le temps de chargement de son site pour les nuls » au fur et à mesure que j’aurai compris ce qu’il faut faire concrètement et que j’aurai pu vérifier que ça fonctionne. J’ai déjà réussi à éliminer pas mal de points rouges de l’analyse des pages de mon blog par l’add-on « Page Speed », mais pas sans peine, parce que pour le moment on nous explique volontiers ce qu’il faut faire et pourquoi, mais pas comment faire techniquement…

En attendant j’ai réuni les outils et sources d’infos utiles que j’ai trouvé pour mesurer et optimiser de la vitesse de chargement des pages web.

1. Mesurez la vitesse de chargement et obtenez des suggestions

Avec Google Webmasters Tools

Dans la colonne de gauche, cliquez sur Labos puis Performances de site. Cette page, mise récemment à votre disposition par Google, vous donne
- le temps moyen de chargement des pages de votre site, un graphique montrant son évolution, et le compare aux autres.
- des suggestions pour améliorer la vitesse de chargement de vos pages (fournies par Page Speed).

Avec des add-ons pour Firefox

Vous avez le choix entre Page Speed (par Google) ou YSlow (par Yahoo), deux add-ons pour Firefox qui vous donnerons des suggestions pour améliorer le temps de chargement de chaque page. Ils se rajoutent tous deux aux onglets de Firebug, que vous devez donc avoir installé avant YSlow ou Page Speed.

Installer FirebugInstaller Page SpeedInstaller YSlow

Pour mieux comprendre la signification des données de Page Speed, c’est ici.
Pour mieux comprendre comment fonctionne YSlow, c’est là.

2. Optimisez la vitesse de chargement des pages web

Optez pour le code Google Analytics asynchrone

Un premier truc à faire : Google, dans sa volonté de mettre l’accent sur la vitesse de chargement des pages web, a mis à disposition une version asynchrone du code du tracker Analytics, c’est à dire qui ne retarde pas le chargement des autres éléments de la page. Vous pourrez donc remonter le code dans la page (Google recommande de le placer avant la balise </header>) et le temps d’exécution du script ne comptera pas.

Ressources Google pour améliorer le temps de chargement des pages

Web Performance Best Practices
Let’s make the web faster : Tutorials

Ressources Yahoo! pour améliorer le temps de chargement des pages

Best Practices for Speeding Up Your Web Site

Autres sources expliquant comment mettre en place la compression gzip et la mise en cache

How to enable gzip compression on website pages (forum Google)
Guide .htaccess : Améliorer la vitesse de transfert de site en permettant la mise en cache des fichiers (10ème titre de la page)
Un tutoriel de la mise en cache