Avoir un site rapide: pourquoi et comment ?

Si pour beaucoup, l’optimisation de leur site web pour le rendre plus rapide est une partie du travail qui leur demande tellement d’attention, c’est que ce n’est pas une tâche anodine. En tant qu’utilisateur, vous avez certainement déjà ronchonné quand vous étiez face à une page qui mettait plusieurs secondes à charger. Pire, il y a même de grandes chances pour que vous ayez fermé la page avant même la fin du chargement pour aller trouver votre réponse ailleurs. Et vous n’êtes pas le seul.

jet

Le visiteur n’attend pas

C’est une des deux grandes raisons pour lesquelles votre site doit charger rapidement: c’est ce que l’utilisateur veut.
Lorsque vous êtes dans un magasin et que vous avez le choix entre une caisse avec une longue file d’attente, et une caisse où vous pourrez passer sans patienter, vous ferai en sorte de ne pas perdre votre temps. C’est pareil pour vos visiteurs, pourquoi iraient-ils sur votre site lent, alors que d’autres fournissent la même information beaucoup plus rapidement ?

Ce n’est d’ailleurs pas un hasard si la page d’accueil de Google est si épurée et contient même des erreurs pour faire en sorte qu’elle se charge plus rapidement.

L’utilisateur est au centre de votre site web, c’est lui qui vous fait vivre, et vous n’avez d’autre choix que de le contenter en optimisant votre site.

Un site rapide pour un meilleur référencement

Selon votre type de business, satisfaire vos visiteurs n’est pas suffisant: les moteurs de recherche sont votre deuxième priorité. Et eux aussi aiment les sites rapides. Google a d’ailleurs indiqué en 2010 que la vitesse est un des critères de leur algorithme.

Et ce n’est pas étonnant pour le géant de la recherche qui veut à tout prix améliorer la qualité de ses résultats, pour avoir une meilleure expérience utilisateur (et donc conserver sa suprématie et continuer à se remplir les poches). La rapidité du site est donc un critère de qualité. Un site lent n’est pas agréable pour l’utilisateur, et pourra donc être pénalisé dans les SERP.

Mais ce n’est certainement pas la seule raison. Plus le site est lent, plus le Google Bot passera du temps pour crawler les différentes pages. Le temps passé à inspecter votre site est du temps qui ne peut être consacré au reste du web. Et le temps, c’est de l’argent. Il y a donc fort à parier que Google retiendra que votre site est lent, et s’y rendra beaucoup moins souvent. Si votre contenu n’évolue pas fréquemment, ce ne sera peut-être pas pénalisant, mais on imagine bien le préjudice énorme pour des sites d’actualités par exemple.

Pour résumer: un site rapide, c’est important pour Google et pour vos visiteurs. Il peut aussi être important de mentionner qu’un site optimisé sollicitera moins votre serveur et celui-ci pourra donc accueillir plus de visiteurs pour une même configuration. Au contraire, un site lent fort fréquenté risque de devenir encore plus lent voir être totalement indisponible, ce qui pourrait coûter cher.

Évaluer la vitesse de son site

Avant de passer à l’action, il est important d’ausculter votre site. Il existe différents outils pour cela dont ces deux-ci:

  • Pingdom: Un outil qui vous donnera non seulement le temps de chargement de votre site, mais également un score sur 100 avec des indications sur tout ce qui peut poser problème. Enfin, vous aurez aussi une indication de votre vitesse par rapport aux autres sites (Par exemple: Your website is faster than 77% of all tested websites)
  • PageSpeed Insights: Un outil fournit par Google qui analysera également la vitesse de votre site et vous donnera un score sur 100 (pour mobile et pour desktop) avec des pistes sur ce qui vient dégrader votre score.

Rendre son site plus rapide

Il y a de nombreuses possibilités pour améliorer la vitesse de votre site web. Selon la technologie que vous utilisez, ou si vous avez votre propre serveur, certaines ne pourront peut-être pas être mises en places. Je tâche de présenter les principales idées ici, mais la liste n’est certainement pas complète.

Optimiser son code

C’est en général ce qui pose le plus problème: un code ou contenu non optimisé. Voici donc quelques astuces pour améliorer tout ça.

  • Réduisez la taille de vos fichiers: Plus vos fichiers sont légers, plus ils seront envoyés rapidement. Cela est valable pour tout type de fichier. Par exemple, évitez d’avoir des commentaires à rallonge dans votre code HTML, CSS ou javascript en production. Pensez également à compresser suffisamment vos images. On voit souvent des images pesant plusieurs mégaoctets, sur la page d’accueil. C’est évidemment une pratique à proscrire. Augmentez la compression de vos jpg, diminuez le nombre de couleurs dans vos png, redimensionnez vos images pour les afficher en taille réelle (inutile de faire télécharger une image immense si c’est pour l’afficher en miniature), … Ce sont les premiers éléments qui peuvent peser lourd dans la balance.
  • Minifiez vos fichiers: L’objectif ici est toujours d’avoir des fichiers les plus légers possibles. Minifier son code consiste à le rendre beaucoup plus compact. Par exemple, enlever les espaces non nécessaires, raccourcir les noms de variables, … Il existe de nombreux outils permettant de faire cela pour vous, comme par exemple MinifyCSS ou MinifyJS. Même si vous gagnerez parfois jusqu’à 25% en taille, cela a par contre un inconvénient de taille: votre code devient plus ou moins illisible. Autant dire que vous allez devoir gérer correctement vos copies de développements qui sont non-minifiées, et les copies en production qui sont minifiées.
  • Combinez vos fichiers: Évitez d’avoir 15 fichiers javascript à charger sur chaque page. Regroupez les en un seul. La raison est simple: il sera plus rapide de télécharger un seul gros fichier que d’en télécharger 15 petits. La réflexion est la même pour vos fichiers CSS. N’allez cependant pas dans l’extrême en pensant que ce sera alors mieux de mettre directement votre code javascript ou CSS dans le fichier HTML. C’est totalement faux ! Par exemple, un robot chargera le fichier HTML pour connaître le contenu, mais ne s’intéressera pas au CSS qui s’occupe de l’affichage. Il est donc bien important de toujours avoir le CSS dans un fichier à part, et non pas directement dans le fichier HTML (que ce soit dans la balise style, ou en inline).
  • Utilisez les sprites CSS: Il s’agit d’une technique permettant de réduire le nombre d’images à charger sur votre site. Par exemple, imaginons un bouton ayant une image de fond, qui change lors du passage de la souris sur ce bouton. L’idée naïve serait d’utiliser pour cela deux images, alors que vous pouvez en fait les regrouper en une seule, et jouer au moyen de CSS pour déplacer l’image de fond et en afficher la partie voulue. Vous pouvez donc au final regrouper de nombreuses images en une seule. Si vous désirez savoir comment mettre cela en place, je vous conseille le tuto d’Alsacreations.
  • Evitez les éléments externes: Si, pour afficher votre site, vous avez besoin de ressources (images, javascripts, …) hébergées ailleurs, cela représente un risque. En effet, vous n’avez aucun contrôle sur la disponibilité de ces fichiers, qui pourront à tout moment être téléchargés très lentement, alors que votre site à vous ne rencontre aucun problème, et dès lors pénaliser le chargement complet de votre page. Hébergez vos fichiers chez vous, et vous resterez maître de la situation. Dans certains cas, comme par exemple récupérer jQuery depuis les CDN de Google, on peut y trouver des avantages… A vous de peser le pour et le contre et de faire votre choix.
  • Optimisez votre code côté serveur: Si vous utilisez par exemple du PHP, pensez à l’optimiser au maximum en évitant les opérations inutiles. Vous pouvez chronométrer l’exécution de votre script (par exemple avec la fonction microtime) et ainsi voir les parties de votre code qui prennent le plus de temps, et dès lors tâcher de les améliorer si possible.
  • Optimisez votre base de données et vos requêtes: Les requêtes SQL, si elles sont mal écrites, ou si la structure de vos tables n’est pas adéquate, pourront ralentir votre script. Pensez dès lors à bien utiliser les index, et à utiliser correctement les jointures pour limiter le nombre de requêtes.

Optimiser son serveur

Si vous êtes sur un hébergement mutualisé, il y a très peu de chances que vous puissiez réaliser les actions qui suivent. Par contre, si vous avez votre serveur dédié, vous allez pouvoir vous faire plaisir. Ayant mes propres serveurs depuis peu, j’ai encore peu d’expérience, et j’espère donc pouvoir compléter ou éclaircir certains des points suivants dans de prochains articles.

  • Le cache côté serveur: Si vous utilisez PHP, Memcache va vous permettre de stocker certaines données en RAM, et d’y accéder ensuite beaucoup plus rapidement. Par exemple, si sur votre site vous affichez la liste des derniers articles publiés, cette liste ne sera modifiée que très rarement (quand vous publiez un article). Par contre, cette liste est récupérée dans la base de données à chaque fois qu’une page est affichée. Vous pourriez soulager votre serveur de base de données en mettant la liste des derniers articles en cache. Si vous avez compris le principe, Memcache vous sera certainement très utile, surtout si vous êtes face à un fort trafic.
  • Le cache côté client: Il y a de nombreux fichiers que vous modifiez très rarement, comme par exemple les images qui font partie de votre design, ou des fichiers CSS, JS, … Il est possible de faire en sorte que le navigateur ne recharge pas ces fichiers lors de chaque page affichée, en lui précisant la date à laquelle le fichier va expirer. Tant que le fichier sera valide, il utilisera cette version, et sinon, il demandera à nouveau le fichier au serveur. Pour cela, on peut par exemple utiliser les en-têtes Expires ou Cache-Control du protocole HTTP. Je n’ai par contre encore jamais eu l’occasion de les utiliser, donc je ne peux pas vous en dire plus.
  • La compression des fichiers: Encore une fois dans le but de rendre le transfert des fichiers plus rapide, il est possible de demander à Apache de compresser les fichiers (si le navigateur faisant la demande est prêt à recevoir des fichiers compressés). Je n’ai là non plus pas encore pris le temps de mettre cela en place, mais ce ne sont que quelques lignes dans la configuration Apache, rien de bien compliqué à trouver.
  • Plugin de cache pour votre CMS: C’est bien connu, les CMS (par exemple WordPress) peuvent vite devenir des usines à gaz. Un plugin de cache devient donc alors rapidement incontournable, comme par exemple le traditionnel WP Super Cache

En conclusion

Pour résumer, la rapidité d’un site est un critère capital de réussite. Pour atteindre le meilleur niveau possible, il est important de bien analyser à quel moment vous perdez du temps, et de tenter d’y remédier le plus efficacement possible, soit en ayant des fichiers plus légers, en améliorant son code ou en configurant mieux son serveur.

Et vous, avez-vous d’autres astuces pour accélérer vos sites ?

facebooktwittergoogle_pluspinterestlinkedintumblrmailfacebooktwittergoogle_pluspinterestlinkedintumblrmail

Un commentaire

  1. Bonjour Julien,

    Ton article est comme d'habitude toujours aussi intéressant.

    Je voulais juste revenir sur la partie ou tu parles de wordpress, je me permet de rajouter une couche en proposant à tes lecteurs le CMS Pluxml, c'est un script gratuit et surtout sans base de donnée.

    Sur le forum que nous fréquentons, j'ai même fait un topic dans la partie pluxml qui s'appelle "Pluxml ou un site à 8 €", je te le dis comme cela car je ne sais pas si tu autorises les liens dans le commentaire ;)

    Pour les personnes qui veulent voir autre chose que wordpress, essayez le ça vous coûte rien ;)
    Reply
    • Salut Jimmy,
      Merci pour ton avis !
      C'est plus fort que toi, partout où tu passes, tu ne peux t'empêcher de prôner PluXML :D Je n'ai jamais eu l'occasion de l'utiliser (j'ai par contre vu tes nombreux sites qui l'utilisent), et je pense que ça peut être une bonne alternative à Wordpress dans certain cas. Certainement moins usine à gaz...
      Ce qui me rebute un peu plus, c'est qu'il y a, je pense, moins de thèmes disponibles. Mais j'imagine que ça va bien augmenter au fur et à mesure que la communauté grandira.

      Le coup de tout stocker dans des fichiers et non dans une base de données me fait un peu peur niveau performance si c'est pour un site à fort trafic. Je pense que c'est plus adapté pour de petits projets.

      Et en effet, pas de possibilité de poster de liens dans les commentaires. Pour ceux qui voudraient lire ton topic sur PluXML, rendez-vous sur rankseo.fr
  2. Merci pour ces très bons conseils. On peut également mettre en cache les images, styles css et scripts js dans un sous-domaine, avec un htaccess adéquat. Un mini-cdn perso !
    L'utilisation de pluxml est aussi un très bon choix ;) Il faudrait comparer un site worpdress et un site pluxml avec le même contenu...
    Reply

Laisser un commentaire.