Accélérez votre site en optimisant le chargement, réduisant le poids des fichiers et l'expérience utilisateur pour augmenter SEO et conversions.
Thomas Haurum
Y a-t-il quelque chose de plus frustrant que d’atterrir sur un site web douloureusement lent ? Non, probablement pas.
Notre patience est limitée lorsque nous recherchons des informations ou des produits en ligne. Si un site est lent à charger, nous passons simplement au suivant.
Une mauvaise vitesse ne cause que des problèmes. Elle crée une mauvaise expérience pour l’utilisateur – et donc pour vous en tant que propriétaire de site. Vous risquez de perdre des commandes potentielles, et Google remarque que les visiteurs quittent vite votre site.
Alors, comment éviter ça ? L’accent doit être mis sur l’optimisation de la vitesse.
L’optimisation de la vitesse est une discipline complexe impliquant connaissances théoriques et compétences techniques. Mais pourquoi tant d’attention maintenant ?
Alors que Google adapte son algorithme pour offrir de meilleurs résultats, l’optimisation de la vitesse prend une place de plus en plus importante. Google a annoncé récemment que la vitesse de votre site est un facteur direct de classement. Serez-vous pénalisé si votre site est lent ? – Tout indique que oui.
Au-delà de l’algorithme, la vitesse a une fonction immédiate : satisfaire vos utilisateurs. Vous gagnez ou perdez votre audience dès la première seconde. Conséquences d’un site avec plus d’une seconde d’attente :
C’est simple : la vitesse de chargement affecte l’expérience utilisateur, votre taux de conversion et vos résultats.
En résumé, pas d’excuses : agissez sur la vitesse de votre site ! C’est essentiel pour toute ambition numérique.
Dans cet article, je vous présente les bases incontournables d’un site rapide.
Pour commencer, analysez la performance actuelle de votre site. Il existe de nombreux outils pour identifier où concentrer vos efforts. Personnellement, je préfère GTmetrix : outil gratuit, complet et très convivial. L’interface est intuitive et note votre site sur 100. En plus du score global, vous obtenez des notes sur chaque paramètre pour localiser les problèmes.
La méthode d’optimisation dépend beaucoup de la structure de votre site – et, bien sûr, de votre niveau technique. La plupart des CMS open source permettent d’optimiser grâce à différents plugins, économisant parfois un développeur.
Si votre site ressemble à la majorité, commencez par ces leviers classiques d’optimisation. Les voici :
Les plugins sont très utiles et enrichissent l’apparence et le fonctionnement de votre site. Mais ! Beaucoup sont les pires ennemis de la vitesse. Plus vous en avez, plus de fichiers sont appelés sur votre site, ce qui ralentit le navigateur. Au-delà de la quantité, la qualité importe aussi : selon le code ou la compression, cela varie énormément. En plus, les mauvais plugins peuvent mettre en péril la sécurité de votre site.
Je recommande donc de sélectionner avec soin. N’installez que les plugins réellement utiles à votre activité, oubliez les gadgets inutiles.
Étape fondamentale : toujours compresser vos images. Deux aspects : recadrage (longueur et largeur) et compression (Ko/Mo). Pensez aux deux, et traitez-les ensemble.
Recadrage
Première question : où utiliserez-vous l’image ? Par exemple, une image destinée à une grande bannière doit avoir la taille appropriée. Pour trouver la taille d’une image :
Vous pourrez ainsi voir la taille réelle et la taille d’affichage actuelle.
Avec ces infos, redimensionnez précisément votre image.
Compression
Beaucoup ne veulent pas sacrifier la qualité car leurs produits doivent bien apparaître – c’est sain. Toutefois, il est possible de compresser sans perte de qualité. Moins de bytes, même qualité. Cela se fait via compression avec ou sans perte. En réduisant le nombre de couleurs, la taille du fichier diminue, sans que ce soit visible à l’œil nu.
Si votre site est sous WordPress, utilisez le plugin Smush Image Compression and Optimization qui compresse automatiquement les images à l’upload. Sinon, passez-les par TinyPNG.com avant de les importer.
Chaque fois que vous référencez un fichier, le navigateur fait une requête serveur, générant parfois un délai qui impacte la vitesse du site.
Exemple
Vous gérez votre boutique en ligne depuis plus de 5 ans et utilisez divers outils : MailChimp, SleekNote, Pixels, Analytics, Hotjar, CrazyEgg, plugin Messenger Facebook, tracking LinkedIn… Vous avez trois polices différentes pour le texte, une autre pour les titres, une en italique pour les avis clients, et 17 fichiers JavaScript différents pour chaque effet graphique.
Tous ces outils ont certes des arguments, mais au final, c’est la vitesse du site qui trinque.
Rationalisez et priorisez vos requêtes
Avez-vous vraiment besoin de toutes ces polices ? Ou utilisez-vous réellement le tracker LinkedIn ? Supprimez tout ce qui est superflu et inefficace.
Combinez vos fichiers CSS et JavaScript
Au lieu de faire référence à cinq fichiers JavaScript, regroupez tout en un seul. Demandez à votre développeur ou utilisez un plugin (par exemple Autoptimize pour WordPress).
Vous avez sans doute entendu parler du cache, mais à quoi sert-il ? En termes simples, il s’agit d’un espace de stockage temporaire pour données des sites déjà visités. Lors de votre première visite, votre navigateur charge tous les fichiers depuis le serveur. À la suivante, il pioche dans le cache local, ce qui accélère considérablement l’accès.
Si vous n’avez pas encore activé de système de cache, pas de panique : des plugins existent pour la plupart des CMS.
Peu de gens le savent, mais la version de PHP influe grandement sur la vitesse du site. Ce changement ne se fait pas via le site, mais votre hébergeur (Unoeuro, One.com, SurfTown, etc).
Les versions disponibles vont de PHP 5.0 à 7.4.
Nous conseillons de mettre à jour vers la dernière version disponible. Attention cependant : cela peut affecter l’affichage du site.
N’hésitez pas à solliciter votre développeur pour la mise à jour et appliquer ces astuces rapides. Vous et vos clients y gagnerez.
Autres articles utiles :
Google propose plus d’options pour les A/B tests
Pourquoi Google passe-t-il son indexation au Mobile First ?
WeMarket possède une solide expérience en création de sites – en savoir plus ici.
At WeMarket, we offer businesses a benchmark report that compares their marketing efforts with their key competitors. You decide which competitors we should compare against.
We specialise in selling physical goods online and growing webshops – and now you can benefit from this expertise, even if you’re not already a client.
It’s completely free.
