Optimiser la vitesse de son site pour le SEO

On dit souvent qu’une personne doit avoir moins d’une seconde de chargement au niveau d’un site. On parle même d’être en dessous des 300-350 ms.

Après avoir parlé la semaine dernière des facteurs directs et indirects en SEO, je vous propose aujourd’hui de voir un petit peu plus en détail l’intérêt de la vitesse de chargement au sein d’un site. Je ferais donc le tour sur l’importance des performances, puis je vous donnerais ensuite quelques points à vérifier pour pouvoir descendre vos millisecondes de chargement. Je finirais avec quelques outils bien sympas.

A noter que cet article n’est pas un cours d’administration système complet, je n’irait donc pas dans le détail des configurations. Chaque projet est unique, utilise une plateforme de travail différente, et il est difficile de lister toutes les optimisations à effectuer pour chacun de vous. Je serais donc assez large et vous donnerais seulement les grands axes et quelques utilitaires. A vous d’adapter ;)

Pourquoi optimiser sa vitesse ?

Tout d’abord, je voudrais vous expliquer pourquoi il faut optimiser sa vitesse de chargement. En effet, à l’heure où tout va vite, j’aimerais que vous preniez conscience que 5 à 10 secondes de chargement, c’est long. C’est pour cela que je vous propose de voir sous plusieurs angles l’importance de cette optimisation.

L’expérience utilisateur

Lorsqu’un internaute rentre sur votre site, il veut l’information directement, sans attente. Si celui-ci est bloqué parce que le contenu ne charge pas ou parce que celui-ci met du temps à s’afficher, il va partir et « blacklister » en quelque sorte votre site dans sa tête.

Sans vouloir rentrer dans la psychologie des internautes, un site lent fait preuve de beaucoup de gênes. Ainsi, comme je le disais en introduction, vous ne pouvez pas vous permettre d’avoir 10 secondes de chargement par page. Essayez au moins de descendre vers 1 seconde en moyenne, vos visiteurs vous remercieront.

Maintenant que j’ai parlé du confort de vos internautes, parlons de vous. Vous n’aimez pas naviguer sur un site lent ? Vous n’aimez pas non plus vous occuper de votre site lorsqu’il met une plombe à charger votre administration ?

Pensez donc à vos utilisateurs et à l’impression que vous donnez lorsque qu’il rentre sur votre site internet. Aussi, pensez à vous et votre entreprise dans la gestion de votre projet.

Le SEO, le crawl et l’indexation

Google possède un robot : Googlebot. Pareil pour Bing, Yahoo et les autres moteurs. Ceux-ci naviguent de lien en lien (de page en page) sur votre site et analyse par la suite chacune de vos pages. Si le bot est ralenti par votre vitesse, le crawl et l’indexation se font plus lentement. Si le système de crawl met quelques secondes à charger votre page, cela se répercutera sur le temps de crawl total de votre site en entier. Puis, n’oublions pas qu’un site rapide est au menu depuis longtemps et qu’en 2014, l’accès par mobile est important.

Les mobiles

Justement, les mobiles. Je parle aussi bien des tablettes que des smartphones. Ceux-ci sont très importants aujourd’hui, on les utilise tous les jours, de plus en plus, et disposer d’une version mobile ou responsive est quelque chose de très important en SEO comme de manière générale.

Il faut savoir qu’un mobile n’a généralement pas une connexion stable. En fonction du réseau de chacun et de la performance de téléchargement, le chargement d’un site internet peut vraiment être très long. Il convient donc de minimiser le temps de chargement pour éviter de voir ses visiteurs partir, faute de patience.

A cause de cela

Enfin, pour finir sur les raisons qui font qu’un chargement rapide est important, sachez que certaines études ont montré que le chargement d’un site influait directement sur le nombre de pages vue par visiteur.

De plus, la plupart des sites e-commerce ont constaté qu’une amélioration du temps de chargement augmentait les ventes et l’intérêt pour le site et ses produits en général. Si je n’avais qu’un exemple à donner : Amazon. Celui-ci perd 1 % de ses ventes s’il se permet 100 ms de chargement supplémentaire, c’est juste énorme ! Et c’est pour cela que c’est important encore une fois !

Si vous voulez en savoir plus sur l’impact des performances, n’hésitez pas à regarder cet excellent article de Seomix (Daniel Roch) sur le temps de chargement et les sites e-commerce. Profitez en pour faire un petit tour sur son site consacré à WordPress, il aide beaucoup ;)

Quels sont les points à vérifier ?

Comme dis en première partie, je ne rentrerai pas dans le détail des configurations. En effet, n’étant pas administrateur système de formation, je ne peux pas me permettre de vous donner des directives précises. De toute façon, cela serait trop long pour moi comme pour vous.

Cependant, comme j’ai quand même touché un petit peu à cet univers-là auparavant, je vais tout de même vous donner les grandes lignes afin que vous puissiez faire des optimisations pour améliorer votre vitesse. J’en profiterai pour vous dire ce que j’ai fait sur ce blog WordPress.

#1 – L’hébergement web

Tout d’abord, partons du début, l’hébergement web. Cet élément n’est pas à négliger de manière générale. Choisissez-en un en fonction de vos besoins et mettez-vous dans la tête qu’il n’est pas intéressant de faire des économies ici en choisissant un mutualisé bas de gamme qui bug tout le temps, surtout si vous avez un site e-commerce.

Pour un blog ou un site avec peu de trafic, vous pouvez partir sur un mutualisé moyenne gamme avec une base de données qui tient bien la route. Ce n’est pas cher et c’est relativement fiable. Choisissez juste bien votre hébergeur.

Pour les sites avec un petit peu plus de trafic, vous pouvez commencer avec des petites machines dédiées pour ensuite augmenter en fonction de vos besoins, vous trouverez de larges gammes chez la plupart des hébergeurs disponibles sur la toile.

Enfin, pour les sites à fort trafic ou qui demande un uptime quasi-permanent, vous pouvez vous dirigez vers des solutions plus conséquente en haute disponibilité comme le cloud ou les solutions virtualisées en général. Cela coute cher, mais ça vaut le coup quand on est un gros site internet ou que l’on veut du sur-mesure ou de la qualité.

Pour ma part, sachez que je suis hébergé via une solution haute disponibilité mutualisée et virtualisée chez Hostme.fr.

#2 – La configuration logicielle

Généralement, nous possédons un hébergement sous Linux avec le trio Apache, Php et MySql. Apache est un serveur HTTP, Php un interpréteur de langage, et MySql un système de base de données. A noter qu’il existe beaucoup d’alternative à ces logiciels comme Nginx, IIS, Python, ASP, PostgreSQL, etc.

Ceux-ci ont besoin d’être particulièrement bien configurés pour pouvoir traiter un maximum de requêtes sans pour autant charger le serveur physique. Il vous faut donc trouver le bon équilibre pour pouvoir améliorer la vitesse sans trop avoir de pertes.

Pour les hébergements mutualisés, vous n’avez généralement pas le choix puisque vous n’avez qu’accès aux fichiers .htaccess qui vous permettent de modifier la configuration de manière simple. Pour les autres, je vous invite à faire une recherche sur internet en fonction de votre CMS ou autre pour pouvoir configurer vos logiciels de manière efficace.

Pour ma part, j’utilise Nginx + Php + Mysql.

#3 – Le système de cache serveur

Au niveau de votre serveur, vous avez souvent besoin de logiciel d’interprétation de langage comme Php par exemple. Le problème, c’est que la configuration de base consomme quand même pas mal de ressources serveur. C’est pour cela que l’on a inventé les systèmes de cache serveur. Pour Php, il y a une extension qui s’appelle APC. Elle permet de mettre en cache le code intermédiaire précompilé pour améliorer les performances. Sans rentrer dans le détail, c’est quelque chose d’indispensable lorsque vous avez la main sur votre configuration de Php.

Pour ma part, c’est l’extension citée (APC) que j’utilise.

#4 – La compression des pages

Un site internet, c’est gros, c’est lourd, c’est long à télécharger. C’est pour cela qu’il faut compresser ses données. Sur linux, on utilise très généralement la compression Gzip et/ou le mod deflate. Vous pouvez d’ailleurs en voir l’activation dans les en-têtes HTTP de vos pages sur la ligne content-encoding. A noter qu’il existe plusieurs méthodes de compression disponible sur la plupart des systèmes.

Ici, sur ce blog, j’ai configuré côté serveur au niveau de Nginx et côté client au niveau de mon plugin de cache (wp super-cache).

#5 – Le CDN

Le principe du CDN (Content Delivery Network) est de fournir des données rapidement dans tous les endroits du monde. C’est un espèce de gros réseaux de machines reliées entre-elles qui délivrent des données.

Pour un site internet, un CDN est souvent placé « devant » le serveur HTTP (celui qui fournit les données). Celui-ci distribue les ressources statiques comme les images, les documents PDF, etc. Cela permet d’alléger le serveur web qui ne s’occupe plus alors que de travailler les ressources dynamiques comme Php (ce qui n’est pas entièrement vrai d’ailleurs, du statique passe toujours un petit peu).

Auparavant, les CDN n’étaient pas très répandu du fait de leur coût ou de leur inefficacité (dû principalement à des bugs), mais avec l’arrivée du cloud computing ces dernières années, cela s’est démocratisé et nous pouvons trouver de très bonnes solutions, performantes et peu coûteuse. Il y en a notamment une qui me vient à l’esprit, c’est Cloudflare.

Pour ma part, j’ai choisi de ne pas en avoir pour le moment, mon site étant relativement jeune, je n’en ressens pas le besoin. Mais essayer, c’est l’adopter. Petite anecdote, faire un CDN avec DropBox ne fonctionne pas bien :D

#6 – Les bases de données

Les bases de données emmagasinent vos contenus comme vos articles, configurations, etc. Le problème, c’est qu’au fur et à mesure qu’elles travaillent, celles-ci créent des fichiers lourds pouvant être optimisés. C’est pour cela qu’il est bon d’optimiser au mieux sa base de données. De plus, il faut veiller à bien configurer votre serveur de base de données.

Construisez donc bien vos tables, faites quelques choses d’efficace et fiable (si vous codez à la main) et n’hésitez pas à l’optimiser de temps en temps via des requêtes SQL que vous pourrez trouver sur le net. Pareil, réglez bien les ratios clients dans votre configuration ainsi que les différents points stratégiques.

A noter que vous pouvez utiliser des utilitaires pour optimiser les tables. Sur mon blog, j’ai installé un plugin WordPress qui s’appelle Optimize DB. Je clique, ça optimise.

#7 – Le système de cache du site

Et là, nous rentrons dans quelque chose d’hyper important : le cache de votre site. On en entend souvent parler dans la communauté avec W3 Total Cache, WP-Super Cache, etc (WordPress). C’est un peu la même chose sur tous les sites. Vous devez mettre en place un système de cache au sein du site afin de créer des fichiers plats pour vos visiteurs.

Je vous conseille de bien configurer chaque système en fonction de votre serveur HTTP, de votre hébergement et de votre site en général. Par exemple, ici, avec Nginx, j’ai dû procédé avec mon admin système à une configuration côté serveur et côté admin WordPress, notamment avec le plugin Wp Super-cache.

#8 – Les images

Sujet récurrent mais important, les images trop grosses ralentissent la navigation, le chargement, etc. Lorsque vous mettez des images, pas besoin d’avoir une qualité de malade, sauf éventuellement si vous êtes un photographe voulant exposer ses clichés reflex originaux. Vraiment, mettez vos images à la bonne taille et utilisez une résolution de 72px/pouce max, c’est amplement suffisant !

Ensuite, quand vous exportez, choisissez bien votre format. Pour les photos détaillées et non-transparentes, prenez du Jpeg. Pour les schémas, les choses basiques et/ou ayant besoin de transparence, prenez du PNG ou du GIF, ça passe crème comme dirait certain.

Sur mon blog, à titre d’information, je suis les principes énoncés ci-dessus et j’utilise en plus de cela le plugin EWWW Image Optimizer qui comme son nom l’indique optimise mes images.

#9 – Sous-domaines pour les assets

Une autre optimisation pour les images ou les médias en général : la création de sous-domaines dédiés aux assets. Lorsque vous vous connectez à une page web, votre navigateur gère par défaut un certain nombre de connexion par sous-domaine (4, 6, 8…). Il fait une sorte de file d’attente de requêtes HTTP. Cela met des limites car il lui faut attendre qu’une requête soit terminée pour qu’il puisse en lancer une autre.

Or, si vous mettez en place plusieurs sous-domaines pour vos images par exemple, cela va vous permettre de démarrer plusieurs groupes de connexions HTTP en simultanée, ce qui permettra d’un côté, de gérer et créer une file d’attente pour les requêtes « standards », et de l’autre, de faire différente file d’attente pour vos requêtes « images/assets ». Cela permet de faire un partage de ressources en quelque sorte.

#10 – Le CSS et les Scripts

Les fichiers CSS et les Script du style Javascript, etc… sont des ressources à optimiser. Tout d’abord, enlevez tout ce qui est inutile : Moins de chose à traiter = Plus de performances. Après, vous pourrez continuer en compressant chaque fichier et en simplifiant le code. Vous pouvez aussi regrouper tous vos fichiers en un seul. A noter qu’il existe des utilitaires pour compresser.

Aussi, pensez à utiliser au maximum des fichiers externes, notamment pour le CSS. Cela évite de tout mélanger et d’interpréter de lourdes pages. De plus, n’hésitez pas à déclarer vos scripts en bas de page HTML, juste avant la fermeture du document, cela permettra au navigateur d’interpréter le JS après votre contenu et votre CSS.

#11 – Les traitements récurrents

Alors ça, c’est un peu long je dois vous l’avouer, et c’est un peu compliqué aussi : Réduire le nombre de traitement de manière générale. En gros, il faut tout faire pour éviter de faire appel à tout et n’importe quoi n’importe quand, c’est-à-dire éviter de faire quinze mille appels de fonction dans une page web, éviter d’installer des widgets à gogo, etc.

Plus vous aurez de choses à traiter sur une page, plus votre site sera lent. Vraiment, essayez de faire le tri, surtout sur WordPress, je sais comment on est. On regarde les plugins et « Oh il est cool celui là, oh et celui ci aussi, oh et pourquoi pas ça aussi ». Vous m’aurez compris, éviter de faire travailler votre serveur pour des choses inutiles.

Ce qui peut être bien, c’est de remplacer les fonctions dont les résultats ne changent jamais par du code en dur statique. Par exemple, sur WordPress, il y a une fonction qui me vient à l’esprit, l’encodage. Il y a une fonction qui écrit l’encodage dans votre head, par exemple UTF-8. Si cela ne change jamais sur votre site, remplacez l’appel de fonction par UTF-8 tout simplement. Si vous faites ça pour chaque page, cela peut vite réduire le temps de rendu de votre page. A vous de trouver comment diminuer votre nombre de traitements.

#12 – Le poids des pages

Point évident mais essentiel, n’alourdissez pas vos pages de manière générale. Evitez de mettre trop plein d’images, des sliders, des vidéos, de la pub, du flash, etc. Vous pouvez faire quelque chose de très simple, de léger, mais terriblement efficace !

#13 – Le code

Je sais ce que vous allez me dire, votre code vous convient et vous l’aimez comme il est, mais peut être que ça vous fera changer d’avis.

Un jour, j’ai surpris Google Chrome corriger des balises et des erreurs de code d’une manière considérable. Je ne pouvais même pas distinguer où est-ce qu’il y avait erreur, il ne mentionnait rien. A noter que je ne parle pas d’une vieille erreur de fermeture de balise, mais vraiment d’autre chose de plus important. Pour le coup, Google Chrome ralentissait car le code était mauvais, il devait repasser derrière le développeur.

Depuis ce temps, j’essaye de produire du code avec encore moins d’erreur qu’auparavant afin qu’il soit interprété de manière efficace par tout navigateur ou tout robot.

Je vous suggère d’essayer d’utiliser les techniques actuelles, surtout pour le HTML et le CSS, une mise à jour des connaissances, c’est rapide avec ces langages. De plus, essayez de ne pas surcharger votre code, etc. C’est important !

Pour en savoir plus, vous pouvez me retrouver dans un article chez Miss-SEO-Girl sur quelque 21 erreurs HTML et CSS à éviter.

#14 – Le reste

Je finis avec le reste, ceux qui ne m’est pas venu à l’esprit ou qui n’est pas assez généraliste pour être cité. Je pense aux petites ou grosses choses qui sont propres à chaque site, plateforme, CMS, etc.

Par exemple, j’ai un plugin pour les Gravatar sur WordPress, j’ai trouvé cette extension grâce au bouquin de Daniel Roch dont je ne vais pas tarder à faire la critique sur ce même blog d’ailleurs. Essayez de trouver vous aussi les points à optimiser en fonction de votre site. L’optimisation, c’est plein de petites choses qui vous font grappiller des millisecondes ;)

Les utilitaires

Avant de terminer cet article assez long, je vous propose des liens vers quelques utilitaires utiles à l’optimisation de site. Désolé, c’est sur Firefox, mais j’ai décidé de virer Chrome il y a bien longtemps, si vous avez des idées de bonnes extensions, poster un commentaire ;)

Firebug : Un outil très connu et largement utilisé dans le monde du web. Il permet de regarder le code, de regarder les ressources réseaux, etc. Vous pouvez notamment lui ajouter Pagespeed et Yslow.

PageSpeed : Justement, j’en parlais juste avant, cet utilitaire crée par Google vous donne une liste des choses à effectuer pour optimiser votre site. Il vous donne notamment une note sur 100. Je vous conseille 85 minimum.

Yslow : Un petit peu pareil que Pagespeed mais crée par un des concurrents à Google : Yahoo. Celui-ci fonctionne avec un système de notation par lettres (A pour bien, F pour mauvais). Il est très complémentaire à Pagespeed. Note de B pas trop mal.

Internet Supervision : Celui-ci vous permet de regarder un peu partout dans le monde votre vitesse. Utilitaire très simple et utile à mon goût ! Il en existe d’autre, mais celui-ci je l’aime bien :)

GT Metrix : A la vue du nombre de commentaire qui en parle, je me permets de le rajouter car il est très performant. Il renferme la plupart des solutions ci-dessus.

Conclusion

Comme nous avons pu le voir, le monde de l’optimisation, c’est du boulot et il y a vraiment pas mal de choses à effectuer. De plus, nous avons vu que l’optimisation d’un site est de loin un critère très important dans la vie d’un site, aussi bien pour nous utilisateur que pour nos chers amis les moteurs.

J’espère que ce petit (gros) mémo vous aura plu est qu’il n’était pas trop long et ennuyant à lire, mais je me devais de passer par pas mal de choses pour ceux d’entre vous qui seraient intéressés par l’optimisation (et encore j’ai pas tout dit). Ceci dit, n’hésitez pas à me poser toutes vos questions ou à commenter cet article en postant un commentaire et n’hésitez pas à le faire tourner ! Comme ça, je pourrais voir si mon serveur tient la charge :D

Source photo : ventsolaire.net – clubic.com – infowebmaster.fr