La vitesse du site web

Supergirl : améliorer la vitesse du site web

« Rrrogntudjû, ça rame ! ». Si on m’avait donné 1 € à chaque fois que j’ai prononcé cette élégante phrase devant mon navigateur internet, je n’aurais plus besoin de développer des sites web pour gagner ma vie. Le niveau de patience d’un utilisateur d’internet étant en général inversement proportionnel au nombre de pages qu’il visite, la vitesse d’affichage d’une page web est un critère primordial à considérer pour retenir son attention. Nous allons donc voir dans cet article comment et pourquoi améliorer la vitesse du site web.

Pourquoi la vitesse du site web est importante

C’est vrai, après tout, prenons le temps de vivre. On peut bien attendre 3 secondes qu’une page web se charge, non ? Non. En tous cas les gens ne le font pas. Si une page met plus de 3 secondes à se charger, zou ils filent ailleurs.

Trois secondes : c’est le temps au bout duquel la moitié des internautes renoncent à charger une page.

Squelette devant son ordinateur : la vitesse du site web est trop faible
Jean-Louis après avoir attendu une page web pendant 4 secondes.

Il y a une deuxième raison fondamentale : Google. De toute façon, quand on veut faire du web, Google est la justification de tout.

  • Règle web n° 1 : Google a toujours raison
  • Règle web n° 2 : si Google a tort, se reporter à la règle n° 1

Google sait tout, Google voit tout. C’est pénible, c’est vrai mais c’est pas comme si on avait le choix… Si votre site est trop lent, Google le saura donc si vous voulez avoir une chance de sortir avant la page 12 dans les résultats de recherche, il faut que la vitesse du site web soit excellente.

Bon soyons honnête, pour une fois cette pratique Google se justifie.

Quels outils pour mesurer la vitesse de chargement d’une page web ?

Avant d’essayer d’améliorer la vitesse du site web, il faut la mesurer. Et oui. Et il y a plusieurs outils en ligne très pratiques pour ça.

Seul ce qui se mesure peut s’améliorer.

Albert Einstein

Evidemment Einstein n’a jamais dit ça mais ça fait quand même très classe d’avoir une citation d’Albert Einstein dans son article. Tout le monde le fait, alors bon…

Nous utilisons principalment GT-Metrix pour mesurer les performances de nos sites. Il faut renseigner l’url de la page à tester et on obtient par exemple ceci pour la page d’accueil de l’excellent site FairWeb Factory :

Mesure de la vitesse du site web avec GT-Metrix
Et encore là, j’étais en petite forme.

Tous nos sites sont scrupuleusement passés au test avant livraison. Et ceux qui ne passent pas le test sont impitoyablement remis sur le métier et améliorés grâce aux renseignements techniques que nous fournissent des outils comme GT-Metrix.

Ces outils d’analyse combinés à notre expérience font que nous livrons systématiquement des sites aux performances optimisées à nos clients.

Le choc des mots, le poids des photos

Première bonne pratique à respecter lors de la rédaction : ne pas avoir de contenu trop lourd. Et disons-le tout de suite, quelle que soit la qualité de votre prose, ce ne sont pas les textes qui alourdissent une page. Ce sont les images.

Alors, quel poids pour une bonne image ? Difficile à dire, ça dépend du contexte mais définitivement, le mégaoctet, c’est non. Si le poids de votre image se mesure en Mo, c’est probablement qu’elle est trop lourde. Il peut être intéressant de recadrer l’image (pas la peine de sortir du 5000 px de large si ça s’affiche en 500 px sur le site) et/ou de la compresser.

Il existe aujourd’hui des outils de compression d’images en ligne simples et gratuits comme par exemple TinyPNG. Un compresseur va dégrader l’image pour économiser de la place mémoire mais de telle sorte que ce sera invisible à l’oeil.

Voici un exemple, je vous mets au défi de voir une différence de qualité entre les deux images :

Pourtant la deuxième a un poids inférieur de 33% à celui de la première. A la livraison d’un site, toutes les images que nous implémentons pour vous sont passées à la moulinette TinyPNG avant publication et nous formons nos clients à faire de même pour l’utilisation ultérieure de leur site. Plus un site comporte d’images, plus cette bonne pratique sera rentable.

La minification du code pour améliorer la vitesse du site web

On ne dirait pas comme ça mais un site web c’est ça :

Code javascript, exemple

Enfin, c’est ça multiplié par le nombre de fichiers utilisés par le site (quelques centaines au bas mot). Pour que ce code soit lisible et modifiable, il est écrit de façon aéré, avec beaucoup d’espaces et parfois des commentaires. Tous ces caractères inutiles pour le serveur peuvent ralentir l’exécution du code et une bonne pratique consiste à les éliminer pour ne garder du code que la substantifique moelle :

améliorer la vitesse du site web grâce au javascript minifié

Ok, c’est moins funky comme ça mais allez savoir pourquoi, les serveurs web préfèrent. Evidemment, il n’est pas question de faire ça à la main, sur tous nos sites nous confions cette tâche à un plugin très performant : WP-Rocket.

En parlant de WP-Rocket : la mise en cache

L’excellent plugin WP-Rocket fourmille d’autres fonctionnalités destinées à l’optimisation de la vitesse d’affichage. La plus importante est la mise en cache des pages du site. On dit qu’on va « cacher » les pages. Vous allez me dire que c’est dommage de cacher les pages du site web si on veut que les gens le voient ! J’ai dit « cacher », pas « cacher », c’est pourtant clair…

Le principe de la mise en cache : une sorte de photocopie du site

Comprendre le cache est un peu technique, je vais utiliser une analogie. Admettons que vous vouliez transmettre un document écrit imprimé à quelqu’un. Un client par exemple. Vous avez le choix : vous pouvez soit réécrire le document à la main devant votre client, soit lui fournir une photocopie. Si vous avez 30 clients à qui vous devez fournir le même document, vous allez très vite opter pour la photocopie.

Et bien le cache c’est un peu ça. On prépare les pages à l’avance pour qu’elles soient plus rapidement servies aux utilisateurs du site web. Les gains en terme de performance sont en général assez considérables, d’autant plus que le site est riche en contenus.

Le cache II, le retour

Il existe une deuxième sorte de mémoire-cache : le cache navigateur. Votre navigateur internet (Firefox, Google Chrome, Safari…) apprend à chaque fois que vous visitez des pages web. En particulier, il sait si vous êtes déjà venu sur une page. Si c’est le cas et qu’il constate qu’il n’y a pas eu de modifications depuis votre dernière visite, il va vous resservir la page qu’il avait gardée en mémoire pour gagner du temps.

Tout ça se contrôle et lorsque nous livrons un site web, le cache navigateur est paramétré de façon optimale en fonction du type de page que vous allez visiter. La vitesse du site web s’en trouve encore augmentée.

Le choix de l’hébergeur est essentiel pour la vitesse du site web

Même si vous êtes le meilleur pilote de formule 1 du monde, si on vous file une Twingo, vous ne gagnerez pas un grand prix… Voilà pourquoi il faut choisir un très bon hébergeur.

Les qualités d’un bon hébergeur sont :

  • la rapidité de ses serveurs et des technologies mises en place
  • les possibilités de paramétrages offertes par l’interface
  • la disponibilité et la qualité du service client
  • l’indépendance : les data-centers doivent être intégralement gérés en interne
  • le pays d’origine : plus les serveurs sont proches des utilisateurs du site, mieux c’est

Les plus gros (OVH, 1&1, Magic Online) sont forcément limités sur au moins un de ces points. Souvent ils présentent plusieurs offres à des prix différents et négligent techniquement ou commercialement les offres les moins chères. Nous nous sommes tournés depuis quelques années vers de « petits » hébergeurs indépendants comme o2switch ou Infomaniak qui remplissent assez bien ces conditions. Préférez les indépendants souvent beaucoup plus proches de leurs clients.

Le but de cet article n’est pas de détailler de manière exhaustive les qualités et défauts de chaque hébergeur. Il s’agit plutôt de vous montrer que c’est pour nous un soucis primordial lorsque nous montons un site web. Pour plus de détails, je vous renvoie à ce comparatif très bien fait.

Le thème personnalisé ou le thème déjà tout prêt ?

Je prévois prochainement de rédiger un article complet sur ce sujet : faut-il préférer un thème WordPress premium, déjà prêt, vite installé et donc moins cher ou un thème personnalisé ? Je ne discuterai donc pas ici des mérites comparés des deux solutions mais simplement de l’influence de ce choix sur la vitesse du site web.

Les thèmes premium à la mode présentent tous un niveau de personnalisation élevé. On peut donc, sans écrire de code choisir pas mal d’éléments : positionnement, polices de caractère, couleurs… Mais pour obtenir ce résultat, les développeurs du thème ont dû prévoir à l’avance tous les cas de figure possibles. Et ainsi, on se retrouve avec une part importante du code qui ne sert à rien sur un projet précis, un bricolage dont la plus grande partie est inutile, lourd à traîner. L’exécution du code et donc la vitesse d’affichage peuvent s’en trouver considérablement ralentie.

Et ça, encore une fois, Google voit ce genre de choses, va donc considérer que votre site n’est pas optimisé et peut vous pénaliser dans les résultats de recherche.

En conclusion

Optimiser la vitesse de son site web est une combinaison de différents techniques : code minimaliste, plugins performants, bonnes pratiques de rédaction de contenu…

Chez FairWeb Factory, quand nous développons un site web pour un client, nous mettons tout en oeuvre pour livrer un site le plus rapide possible afin de retenir l’attention des visiteurs et d’optimiser le référencement.

N’hésitez pas à nous contacter pour plus de détails sur ces questions.

Références