On prête rarement attention à la vitesse de son site internet.
C’est pourtant un point fondamental, à trois égards :
- Un site rapide va faciliter le crawl du site par les robots de moteurs de recherche.
- Depuis peu, la vitesse du site est un critère de l’algorithme de positionnement de Google.
- Les visiteurs s’en rendent compte, savez vous que pour Amazon, un délai de latence de 100ms coûte 1% des ventes1 …
Voici 10 conseils pour optimiser la vitesse de votre site. Dans ce premier post, nous allons uniquement voir des optimisations faciles à faire, exit donc les optimisations serveurs ou les optimisations nécessitant un développement conséquent (mise en cache par exemple).
La première chose à faire est de mesurer la vitesse de votre site pour pouvoir ensuite analyser les impacts qu’ont vos optimisations.
Vous pouvez par exemple utiliser l’excellente extension Firebug (disponible pour Firefox et Google Chrome). Cette extension va également vous montrer quels sont les éléments qui mettent le plus de temps à charger.
- Rassemblez vos scripts CSS dans un seul fichier et compressez le pour réduire le poids de votre page (de nombreux services en ligne existent). De même pour vos fichiers Javascript.
- Placez vos fichiers Javascript en bas de page, ils mettent du temps à se charger et bloquent les téléchargements en parallèle.
- Optimisez le poids de vos images. Inutile d’avoir une image de 1000 pixels de largeur si vous l’affichez en 400 pixels. Il est également possible de jouer sur le taux de qualité de l’image.
- Evitez au maximum l’inclusion d’éléments externes (images, bouton like de Facebook, scripts divers, …). Techniquement, cela oblige votre serveur à faire des appels DNS supplémentaires, et ça coûte du temps.
- Utilisez d’autres domaines pour vos contenus statiques : malgré le conseil ci-dessus, il peut être utile de mettre tous vos éléments statiques (scripts, images) sur d’autres domaines, optimisant ainsi les téléchargements en parallèle. Ex : static1.votresite.com/style.css static2.votresite.com/image.jpg . N’utilisez cependant pas plus de 3 ou 4 domaines.
- Vous utilisez probablement Google Analytics, pensez à utiliser le code asynchrone.
- Abandonnez définitivement les iframes.
- Faites la chasse aux erreurs 404 : les images introuvables par exemple gaspillent beaucoup de temps. Il est par exemple classique d’oublier le fichier favicon.ico, ce qui génère une 404.
- Utilisez des sprites CSS : un tout petit peu plus compliqué à mettre en place, cette astuce consiste à regrouper toutes les images et autres pictos récurrents dans un seul et même fichier. Cela permet de ne faire qu’un seul et unique appel au serveur pour toutes ces images. Vous n’avez rien compris ? Regardez ici, Google utilise cette technique.
- Activez le cache du navigateur, ainsi, les élements récurrents ne seront chargé qu’une seule fois pendant toute la durée de la mise en cache. Dans votre fichier .htacess, ajoutez Header set Cache-Control « max-age=604800, public » (604800 correspond aux nombres de seconde en une semaine). Attention, ce conseil ne fonctionne pas forcément pour tous les hébergeurs.
En appliquant ces quelques conseils, vous devriez économisez quelques précieuses millisecondes (voir même secondes !).
Dans Google Webmaster Tools, vous trouverez un graphique vous présentant les performances de votre site.
N’hésitez pas si vous avez d’autres conseils à partager.
Prochainement, nous verrons d’autres moyens plus complexes d’optimiser la vitesse d’un site.
Petite digression, je vous propose de (re)visionner la pub prouvant la vitesse du navigateur Google Chrome.
Bonjour,
J’avais plutôt entendu parler de l’externalisation du JavaScript (dans un .js) plutôt que de le mettre en bas de page. Quoique n’étant pas dév., j’imagine que faire appel à plusieurs fichiers .js augmente inutilement le nombre de requêtes vers le serveur. Qu’en pensez-vous ?
Merci pour cet article.
Les deux conseils sont valables, on peut externaliser le fichier ET l’inclure en bas de page ;-)
Youtube abandonne les balises OBJET et impose l’iframe pour ses inserts de vidéo.
Ca ralenti ou c’est équivalent?
J’en utilise beaucoup sur mes pages.
http://www.lundimail.be (dont la home, sans vidéo, s’ouvre lentement, je trouve).
Ton site est effectivement très long à s’ouvrir.
Il y a probablement un problème quelque part (du côté de l’hébergeur ?) puisque le premier GET met 4s à répondre, ce qui est énorme !
Merci pour la réponse.
Du côté de l’hébergeur (OVH), j’ai scindé mon espace pour plusieurs sites (multi-dom), et les autres sites semblent s’ouvrir assez rapidement http://www.fetedelamusiqueliege.be/ ou http://www.ajtilff.be + 2 ou 3 autres dont celui que vous venez de tester: http://www.lundimail.be qui est LE SEUL sous wordpress.
Merci encore
(maintenant, je vais voir mon ami Google pour savoir ce qu’est le GET, même si j’en ai une petite idée, vu le contexte)
Sur wordpress, ce n’est pas évident de rassemblez les js et CSS. Je vais l’essayer prochainement sur mon blog. Il va y avoir des bugs dans l’air.
J’ajouterais que l’utilisation d’un CDN est une excellent façon d’optimiser et d’augmenter les performances d’un site en allégeant les charges du serveur.
Tout a fait exact pour le CDN, mais réservé pour de gros sites.
As-tu un ordre d’idée des tarifs pour l’utilisation d’un CDN ?
On peut aussi compresser les templates HTML :)
Bonjour,
Merci beaucoup pour ces conseils car je travail justement à réduire le temps de chargement de mon annuaire.
Cordialement
Bonjour,
Merci pour cet article, j’ai eu du de bons rappels en mémoire :)
Il y aura t-il un article où sera traité les optimisations plus complexes ?
J’utilise cloud Flare comme CDN et ça donne d’excellents résultats
De plus il y a un option de chargement asynchrone automatique et d’autres optimisations
vraiment sympas
Pour mon ecommerce la page d’accueil faisait 800ko et chargeait en 4s , avec le CDN la page est passée a 500ko et charge en 2,5s
Lorsque je l’ai mis en place Google a crawlé 1000 pages en 30min et crawle environ 18000 pages / jour autant dire que mon magento n’aurait jamais pu tenu seul même optimisé avec un cache
J’espère que tout ce crawl sera bénéfique pour mon référencement