Comment améliorer la vitesse de son site? 🚀

C’est LA grande question que l’on se pose lorsque l’on créé son site. Malheureusement il est difficiles de trouver des réponses concrètes qui permettent vraiment de changer de manière radicale les choses. Chez Noir sur Bleu, on aime être transparent et vous apporter des solutions claires et efficaces. C’est pourquoi on vous dévoile dans cet article comment améliorer la vitesse de son site considérablement en appliquant nos conseils.

Qu’est-ce que la vitesse d’un site et comment est-elle calculée?

La vitesse d’un site correspond à la durée de chargement des pages et de ses éléments lorsqu’un internaute clique sur une des URL. Afin de garantir une utilisation optimale de ton site pour ton visiteur, il est important de veiller à ce que l’ensemble de tes pages se chargent rapidement. En ayant un site lent, tu risques de faire fuir ton visiteur, impatient, qui ira chercher l’information chez l’un de tes concurrents.

Pour calculer la vitesse de ton site, les moteurs de recherches se basent sur plusieurs critères. Ici nous parlerons de Google qui est de loin le navigateur le plus utilisé par la population mondiale.

Comme je viens de l’annoncer, Google utilise plusieurs critères pour évaluer les performances de ton site, nous allons les décortiquer.

Le LCP: C’est le temps qu’il faut pour afficher le plus gros élément visible de ta page (souvent une image, une vidéo ou un gros bloc de texte) à l’écran.

Pourquoi c’est important ?
Parce que c’est ce que l’internaute attend de voir en premier. Plus le LCP est rapide, plus le visiteur reste. Au-delà de 2,5 secondes, Google commence à râler.

Le FCP: C’est le moment où le premier élément visible s’affiche sur l’écran. Ça peut être un bout de texte, une image, un logo… bref, le tout premier truc qui apparaît.

Pourquoi c’est important ?
Parce que ça montre à ton visiteur que le site démarre et qu’il n’est pas planté. Si ça prend trop de temps, il ferme la page.

Le TBT: C’est le temps total où ton site bloque et reste inutilisable parce que le navigateur est occupé à charger des scripts (comme des plugins, animations, pubs…).

Pourquoi c’est important ?
Parce que pendant ce temps-là, ton visiteur ne peut rien faire (cliquer, scroller, lire…). Et plus ça dure, plus il se barre. Google conseille de rester sous 200 ms.

Le CLS: C’est le score qui mesure à quel point ta page saute dans tous les sens pendant le chargement. Par exemple : tu veux cliquer sur un bouton et hop, il bouge parce qu’une image vient de se charger au-dessus.

Pourquoi c’est important ?
Parce que c’est ultra pénible pour les visiteurs. Un bon CLS, c’est un site qui reste stable pendant le chargement.

Maintenant que nous savons comment Google calcule la vitesse de ton site, je vais t’apprendre à optimiser afin de gagner en performances. Mais tout d’abord, il est important que tu comprennes l’intérêt de travailler la vitesse de ton site, voici pourquoi.

Pourquoi améliorer la vitesse de son site?

Cette étape est souvent négligée par les développeurs, webmaster ou autodidacte qui construisent eux-mêmes leur site, pourtant il y a un véritable enjeu derrière le travail fourni.

L’UX (expérience utilisateur): Comme je l’ai rappelé en introduction, un site lent ça énerve. De nos jours, nous voulons trouver les informations que nous recherchons rapidement et facilement. Une page qui mouline c’est 80% de chance de faire fuir ton visiteur. Au-delà de perdre un visiteur, tu viens peut-être de perdre un futur client pour une histoire de quelques secondes… pas cool !

Le référencement: Les notes que Google attribue à ton site ne sont pas seulement pour faire jolie, elles t’indiquent clairement l’état de santé de ton site. Et un site en mauvaise santé ce n’est pas bon pour ta visibilité.

Impact sur ton CA: Amazon a constaté que chaque 100 millisecondes de temps de chargement supplémentaire leur faisait perdre 1% de chiffre d’affaires. Pour une petite entreprise ou un site e-commerce, c’est tout aussi vrai : si ton site met 4 secondes à charger au lieu de 2, tu risques de perdre des ventes simplement parce que l’utilisateur n’a pas la patience d’attendre. C’est donc directement de l’argent que tu laisses filer pour un problème technique évitable.

Le poids du mobile: Aujourd’hui, plus de 60% des visites web se font via un smartphone. Or, les connexions mobiles peuvent être instables ou moins rapides qu’une connexion fibre. Si ton site n’est pas optimisé et met plus de 3 secondes à s’afficher sur mobile, plus de la moitié des visiteurs abandonneront avant même d’avoir vu ta première image. En résumé : un site lent sur mobile = perte de clients potentiels + mauvaise image pour ton business.

Comment connaître la vitesse de mon site?

Pour connaitre la vitesse de ton site, différentes solutions s’offrent à toi, la plus connue reste cependant d’utiliser directement l’outil de Google (Page Speed Insights), car au final, c’est lui qui va décider de où il affiche ton site dans la SERP.

Il y a cependant d’autre manière d’analyser la vitesse de ton site, notamment via les outils SEO comme Semrush, UberSuggest ou encore Ahhrefs.

Je te laisse le lien de Page Speed Insights qui est totalement gratuit et qui te permettra déjà de faire une première analyse.

Page Speed Insights: https://pagespeed.web.dev/

Comment améliorer mes notes Page Speed Insights?

Tu viens de lancer ton test et tu te rends compte que tes notes sont moyenne voire dans le rouge? Google t’alerte sur les performances de ton site et t’informe qu’il faut les corriger.

Mais alors comment faire?

Je vais te donner plusieurs techniques qui m’ont personnellement permis d’obtenir des notes entre 95 et 100 sur chacun des critères calculés par Google.

Le choix du CMS et de l’hébergeur

Une de mes plus grandes erreurs dans mes débuts de Webmaster à été de choisir un CMS et un hébergement qui ne faisaient pas l’affaire; et ça m’a coûté très très cher.

Je vais te donner ici les CMS que je privilégierais et au contraire ceux que j’éviterais si je devais tout recommencer.

Les + :

WordPress
PrestaShop

Les – :

Wix

Bien évidemment, ces avis n’engagent que moi et tu es totalement libre de choisir le CMS qui te convient le plus.

Certains CMS ont leur propre hébergement (exemple: Wix ou Shopify) mais si tu souhaites passer par un outil te permettant de choisir ton propre hébergeur, alors il faudra être méticuleux dans ta sélection.

Voici notre avis sur les hébergeurs (qui n’engagent que nous encore une fois).

Les + :

O2 Switch: Français, service client ultra rapide, accessible et qui offre de bonnes performances

Les – :

OVH: Interface pouvant être compliqué, performances inférieures, service client pas toujours réactif.

Le format et le poids de tes images

Souvent, lorsque l’on audit les sites de nos clients, un même problème revient: le format et le poids des médias. Si tu veux que ton site performe, il faut absolument que tes contenus multimédias soient optimisés.

Pour cela je te recommande deux choses:

Choisi un format WEBP ou AVIF, ce sont les deux formats les plus légers. En convertissant tes fichiers dans ce format tu pourras économiser jusqu’à 90% d’espace par médias.

Compresse tes fichiers, ça ne prend que quelques secondes et te permet de réduire de manière considérable leur poids.

En appliquant ces deux conseils, tu fais déjà un grand pas vers un site ultra-rapide 😉

Le gestionnaire de cache

C’est un élément qu’on oublie souvent quand on débute dans la création de site, et pourtant c’est une des techniques les plus efficaces pour améliorer les performances de ton site.

Le gestionnaire de cache qu’est-ce que c’est ?
Pour faire simple : c’est un système qui va stocker des versions « prêtes à être envoyées » de tes pages pour éviter que ton serveur refasse les mêmes calculs à chaque fois qu’un internaute arrive sur ton site. Ça rend le chargement beaucoup plus rapide.

Si tu es sur WordPress, voici les extensions que je recommande :

Les + :

WP Rocket : c’est payant (compte 49€ par an), mais clairement le meilleur à mes yeux. Ultra simple à configurer et super efficace.
W3 Total Cache : gratuit et assez complet, mais un peu plus technique à paramétrer.
LiteSpeed Cache : top si ton hébergeur utilise LiteSpeed (comme O2 Switch).

Les – :

Aucune extension. Ne pas mettre de gestionnaire de cache sur ton site, c’est te tirer une balle dans le pied.

Prends 10 minutes pour installer et configurer un gestionnaire de cache, et tu verras immédiatement la différence sur ton score Page Speed Insights 😉

Aller plus loin dans l’amélioration des performances

Une fois que vous avez appliqué l’ensemble des conseils que l’on a vu ci-dessus, on va regarder comment aller encore plus loin pour obtenir des performances optimales et ainsi passer à un site ultra-rapide !

Audit de votre site avec l’outil ScreamingFrog

L’outil ScreamingFrog vous permet d’auditer gratuitement votre site jusqu’à 500 URL, il va vous donner des informations concrètes sur les points à améliorer tout en vous expliquant comment le faire.

Prenons un exemple:

Je lance l’audit d’un site internet, je me rends dans l’onglet « problèmes ». Je remarque que des images sont trop volumineuse, en cliquant dessus j’obtiens le détail du problème, la solution pour le corriger ainsi que les URL des images à optimiser.

Vous pouvez ensuite parcourir l’ensemble de l’audit pour effectuer vos modifications et rendre votre site hyper clean !

Limiter les animations sur votre site internet

On est d’accord, les animations c’est joli ! Quand on voit tout ce qu’il est désormais possible de faire on a envie d’en mettre partout mais ce n’est pas forcément la meilleure des idées.

En effet, surcharger d’animations risquerait de vous pénaliser car ça alourdit considérablement votre site. Et qui dit site plus lourd = site plus lent à charger.

Trouvez le juste milieu entre les animations vraiment pertinentes pour vos utilisateurs et supprimez celle qui ne le sont pas, vous marquerez des points auprès de Google, on vous l’assure !

Le choix de vos polices

Et oui, ça compte ! Les polices Google Fonts sont plus lentes à charger que les polices système, on te préconise donc de privilégier les polices de bases (Arial, Helvetica, Verdana…)

Réduire le nombre de plugins et scripts inutiles

Un autre problème qu’on retrouve souvent dans les audits : des sites remplis de plugins inutiles qui tournent en arrière-plan et les ralentissent considérablement.

Le conseil Noir sur Bleu:

Liste tous tes plugins/extensions et demande-toi lesquels sont réellement indispensables.
Supprime ceux qui font doublon ou que tu n’utilises plus.
Évite aussi les scripts externes inutiles (genre : compteur de visiteurs en temps réel ou animations gadgets qui ne servent à rien).

Moins ton site à de plugins plus ton site est léger. Plus ton site est léger, plus il est rapide. C’est aussi simple que ça.

Conclusion: Tu as désormais toutes les bases pour rendre ton site léger et rapide, il ne te reste plus qu’à appliquer nos conseils ! Pense à capturer tes score Pages Speed Insights avant de commencer à optimiser ton site ça te permettra de faire le comparatif avant/après.

Si cet article t’a plu et t’as servi, n’hésite pas à nous envoyer l’évolution de ton score grâce à nos conseils !

Effectuer ces modifications te semble compliqué? On s’en occupe pour toi !

Besoin d'aide? Contactez notre support par mail ou par téléphone du lundi au vendredi.

Noir sur Bleu

Nos services

Légal

Contact