L’optimisation des performances d’un site web est souvent oubliée ou reléguée au second plan, et pourtant, elle apporte son lot de bénéfices. Nous allons voir, ensemble, comment peuvent être améliorées les performances de ton site web et pourquoi il est utile de s’en préoccuper.
Tu ne visualise pas encore quels sont les avantages d’avoir de bonnes performances ?
Tu aimerais bien savoir comment mesurer et comprendre les performances de ton site ?
Ou encore, tu ne sais tout simplement pas comment rendre ton site plus performant ?
On t’explique tout pas-à-pas, juste ici.
Je te souhaite une bonne lecture !
Les avantages d’avoir de bonnes performances
Lorsque l’on parle ici de bonnes performances, c’est que cela a, en grande partie, un impact sur ton trafic. Et le trafic de ton site peut-être lié à ces deux catégories principales :
Le référencement SEO : Il fait partie des performances de ton site web, car le temps de chargement - le temps d’affichage - de ton site compte beaucoup pour Google. Si la première page met plus de 3 secondes à s’ouvrir tu as potentiellement déjà perdu un visiteur ou un client. Google veut répondre de manière efficace à ses utilisateurs. Son but premier est de satisfaire son audience - comme toi tu as pour vocation de satisfaire ta clientèle. Donc, si ton site n’est pas suffisamment performant, ton référencement en sera impacté.
L’expérience utilisateur : Nous avons mis le doigt sur un point sensible. Les performances d’un site web sont mesurables à l’aide d’outils - dont nous allons parler plus bas. Puisque nous sommes inondés d’informations au quotidien il est impératif que le contenu que tu souhaites proposer soit réactif.
Lorsque tu ouvres un site web tu n’as pas envie d’attendre une minute que tout s’affiche - une minute ça ne fait pas long dit comme ça, mais aujourd’hui les pages web chargent en quelques secondes - pour pouvoir interagir avec le contenu ou trouver l’information qui te manque tant !
En optimisant les performances de ton site web tu évites le rebond et tu maximise tes chances d’augmenter ton taux de conversion.
💡
Taux de rebond : C’est le pourcentage de visiteurs qui ne parcourent qu’une seule page de ton site et qui ne restent pas plus de quelques secondes sur cette page.
💡
Taux de conversion : C’est le pourcentage de visiteurs qui interagissent avec le contenu que tu proposes (achat d’un produit ou d’un service, l’inscription à un programme ou à une newsletter, le téléchargement d’un catalogue).
Comment faire pour connaître les performances de ton site web ?
Pour savoir ce qu’il y a à améliorer, il faut bien commencer par un test de performance de ton site web. Pour cela plusieurs outils gratuits d’audit sont à ta disposition.
Ces outils mesurent les performances d’un site sur une échelle allant de 0 % à 100 %. Le but n’est bien évidemment pas d’atteindre 100 % ! Il te faut, avant tout, améliorer ton site actuel. Si tu atteint les 85% ou 90% tu peux considérer que ton site a de bonnes performances.
Pour être plus clair, prenons l’exemple de l’optimum de Pareto : 80% des effets sont le produit de seulement 20% des causes. Donc 80% de réussite, ça demandera peu d’efforts, comparé à 100%.
Chacun de ces outils te donnera des informations sur tes axes d’améliorations. Ensuite c’est à toi de jouer.
N’hésite pas à utiliser plusieurs de ces outils pour cibler les axes d’améliorations les plus pertinents.
Maintenant, voici les outils utilisés par la team Eid Lab pour analyser les performances de ton site web.
PageSpeed Insight
l’outil de chez Google qui te donne tout plein d’infos sur les performance, l’accessibilité, les applications web progressive (PWA) et bien d’autres encore.
Lighthouse
est une extension Chrome - s’adapte à d’autres explorateurs -, qui te permet de mesurer les performances de ton site en direct sur la page. En revanche, cet outil te permet de tester un site en local. Attention, les résultats peuvent varier, car il dépend, entre autre, de ta connexion internet. Si celle-ci fluctue, la vitesse de ton chargement vari aussi et donc le test de performance peut être erroné.
GTmetrix
est le plus fiable. Lorsque tu te rend sur cet outil il te faut entrer l’URL du site web que tu souhaites analyser. Cette fois le test est effectué via un autre ordinateur, qui possède une connexion fiable et constante. L’analyse restera donc fidèle aux performances de ton site web actuel.
Google met en place des critères de qualité pour les performances d’un site web : les Signaux Web Essentiels ou Core Web Vitals. Beaucoup d’outils e base sur les rapports pour estimer les performances d’un site.
Bien entendu cette liste est non exhaustive, libre à toi de tester plusieurs de ces outils pour optimiser, au mieux, les performances de ton site web.
Améliorer la vitesse de chargement de ton site web.
Pour améliorer la vitesse de chargement de ton site tu peux avoir recours à plusieurs techniques.
Certaines sont accessibles à tous et permettent d’améliorer les performances de quelques pourcent.
Pour d’autres, il te faudra des connaissances techniques plus poussées ou encore l’aide de tutos ou de professionnels.
Mais tout de suite, parlons de ce que tu peux faire à ton échelle pour booster tes performances et améliorer ton trafic.
Que puis-je faire ?
Commençons par les outils que tu peux déjà mettre en place sur ton site web ! Ces modifications te sont normalement accessibles si le site t’appartient et que tu as accès à un dashboard.
Le mieux que tu puisses faire en premier lieu est de compresser tes images. On ne te demande pas d’en appauvrir la qualité mais bien de les redimensionner.
Si, à l’origine, ton image est de 3000x4000px adapte-la aux dimensions de ton site en réduisant sa taille. Il est également possible que tu veuilles combler plus d’espace sur ton site et que l’image soit agrandie comme, 5000x6000px. Nous te conseillons de la ramener à sa taille originelle pour qu’elle soit moins lourde à charger pour ton site.
2. Les plug-ins sont tes alliés et tes ennemis. Lorsque tu crées ton site web avec un outil CMS ou “pur no code” - tout ce qu’il faut savoir sur les outils de création d’un site - des plug-ins sont disponibles pour que tu puisses étoffer ton contenu ou ajouter des fonctionnalités.
Alerte ! Ces plug-ins sont très lourds à supporter pour ton site et réduisent considérablement ton temps de chargement.
Notre conseil : Supprime les plug-ins que tu n’utilise pas pour ton business en ligne. Installe les plug-ins qui te permettent d’augmenter les performances de ton site - nous y reviendrons.
3. Le lazy loading, tout est dans le nom. Afin que ton site ne charge pas toutes tes images et vidéos en même temps, il est important de différer le chargement de celle-ci.
Je m‘explique. Lorsque l’on ouvre un site internet la page charge tout ce qu’elle contient pour un affichage simultané et cela lui demande BEAUCOUP de temps pour tout charger d’une seule traite.
Si au contraire, ton contenu visuel charge au fur et à mesure que l’utilisateur scroll sur ta page, la vitesse de chargement en est optimisé ! Au lieu de tout charger d’un coup, ton site fait au cas par cas selon la navigation de l’utilisateur.
Malin !
4. Ne pas avoir peur de supprimer son contenu. Si l’une des pages de ton site internet est obsolète ou qu’elle ne génère absolument aucun trafic, supprime-la. Car, même si tu te dis qu’elle peut jouer sur ton SEO en terme de caractères et de mot-clé, en réalité elles ne font que pénaliser le contenu pertinent et visité sur les autres pages. Alors hop ! On supprime.
5. Laisse tes vidéos sur un hébergeur - youtube ou vimeo par exemple. Dès que tu intègres des vidéos à ton site internet, tu alourdis considérablement ce dernier. Un hébergeur vidéo est également un CDN ce qui explique la rapidité de lecture de ta vidéo sur ton site web.
Pour éviter de demander à ton site web de charger des vidéos trop lourdes, ajoute simplement le lien vers celles-ci. Tu auras donc le visuel de ta vidéo sur le site et la lecture se fera aussi, of course. En revanche, le chargement dépend de l’hébergeur et non pas de ton propre site.
Si tu souhaites intégrer des vidéos sur ton site, fais en sorte qu’elles soient courtes et bien optimisées.
Aller encore plus loin.
On entre dans la phase deux. Des améliorations un peu plus techniques mais pas impossibles.
Minifier le code et compresser les images, est une solution pour alléger ton site web. Pour vulgariser, nous te conseillons de retirer les dépendances inutiles, retirer les espaces les sauts de ligne et les séparateurs qui ont pu être insérés dans le code pour aider les développeurs à s’y retrouver. de supprimer le code “mort”.
Pour réduire le poids du code tu peux aussi demander à ton développeur de supprimer le code “mort”. Ce sont des lignes de code qui ne servent à rien. Il ne régit aucune interaction et n’a pas d’impact sur ton visuel. Pour les images même topo. Attention aux dimensions et aux chargements simultanés.
2. Mettre en place des CDN, ou Réseau de Diffusion de Contenu pour les french. Le CDN est un réseau de serveurs interconnectés. Lorsque tu te connecte à une page, il est possible que celle-ci interroge un serveur situé en Australie ou au Canada. La communication se fait donc de manière assez lente.
Le CDN, en plus de l’hébergeur, stock ton site sur différents serveurs dans le monde. Par exemple, si tu es en France et que ton lecteur se situe aux Etats-Unis, le CDN mis en place sur ton site va calculer quel est le réseau le plus proche de celui-ci - admettons New-York - il va utiliser les données stockées là-bas pour réduire, considérablement, la vitesse de chargement pour l’utilisateur.
Les CDN sont les points les plus importants à mettre en place ! Si tu es capable de le faire par toi-même, c’est bien joué. Si tu ne te sens pas de le faire tu peux demander un coup de pouce autour de toi ou auprès d’un professionnel comme un freelance ou une agence de développement. Nous te recommandons d’installer un CDN pour les fichiers lourds comme tes vidéos et tes images. Et, un CDN pour l’ensemble de ton site internet.
Maintenant que nous avons une vision globale - non exhaustive - des principales améliorations à mettre en place pour optimiser tes performances, passons à la pratique.
Quels outils et techniques utiliser pour améliorer les performances de mon site web ?
C’est bien beau tout ça mais, concrètement, comment on s’y prend ?
Voici une liste des actions à mener pour appliquer les points que nous avons cité juste au-dessus.
Les techniques et outils d’optimisation
Concernant la compression de tes images - sans effet de transparence ou avec du texte - nous te conseillons d’utiliser un format JPEG, le rendu sera bien meilleur que sur un format PNG. Celui-ci étant un format plus ancien il est facilement lisible sur tous les navigateurs et gardera une meilleure qualité d’image lors de la compression. Contrairement au PNG, qui lui, sera utile pour des photos avec effet. Ce format accepte mal la compression, donc tu perdra plus rapidement en qualité d’image.
D’autres formats d’images sont disponibles pour limiter la perte de qualité :
JPEG 2000 : très populaire auprès des photographe, attention ! Il n’est disponible que sur Safari.
GIF : Connu de tous et utile pour charger des images animés. Il fonctionne sur tous les navigateurs. Attention, il ne prend que 256 couleurs en charge et réduit donc drastiquement la qualité de l’image de base.
TIFF - Tag Image File Format : Considéré par beaucoup comme le meilleur format d’image. Il est beaucoup utilisé par les photographes, les rédacteur et éditeurs d’images professionnels. Il permet l’affichage de photo en haute qualité. Pour qu’il fonctionne sur les principaux navigateurs il faudra installer un plug-in.
SVG : Créé par W3C - qui est W3C - il utilise le type de fichier d’image graphique vectorielle. Ce qui veut dire qu’il peut être mis à échelle sans perdre en qualité. Il est préférable de l’utiliser pour votre logo ou vos illustrations numériques. Il est lu par tous les principaux navigateurs.
AI : Nous vient de Adobe Illustrator, un format de fichier qui peut s’apparenter au SVG. Souvent utilisé pour développer des supports marketing.
BMP : Ou plutôt Bitmap, créé pas Microsoft possède les mêmes propriétés que le format PNG, il n’est pas très populaire mais il est accessible sur les principaux navigateurs.
Et sinon, plus récent c’est possible ?
Voilà, voilà ça arrive…
Sur le marché de nouveau format de fichier ont fait leur apparition. Faisons un rapide tour d’horizon :
Le format AVIF : Créé par Alliance for Open Media - qui comprend de grandes marques de médias comme Microsoft, Amazon et Netflix. Ce format prend en charge la compression avec et sans perte. Les résultats fournis sont de meilleurs qualités que JPEG pour les premiers test effectués par Netflix. Disponible sur Chrome, Firefox et Opera.
Le format HEIF : Permet de lire les images, les séquences et les métadonnées. Il utilise également les extension de fichier heif et heifs. Il n’est pas pris en charge nativement par les principaux navigateurs. Adopté par Apple depuis 2015.
Le format WebP : Il remplace certains des meilleurs formats d’image comme JPEG ou PNG. Il réalise des compressions avec peu de perte de qualité et peut produire de petites images net ! La plupart des navigateurs prennent se format en charge - Chrome, Firefox, Edge, Safari et Opera.
Pour compresser tes photos, les logiciels de retouches photo présent sur PC et MAC sont très utiles, sinon tu peux te servir de Gimp, Kraken ou Squoosh.app.
Pour pousser un peu plus loin ton lazy loading, en plus des images, tu peux retarder ou empêcher le chargement de certaines fonctionnalités de ton site web. Comme un menu déroulant - qui ne sera pas systématiquement utilisé par le visiteur. Une technique bonus pour optimiser ton site si tu as des analytics c’est de déplacer ceux-ci dans un service worker.
💡
Service worker : Processus d’exécution indépendant qui permet d’effectuer des opérations sans alourdir le processus d’exécution principal. Car sur un site web il n’y a qu’un seul processus d’exécution celui du visuel, appelé couramment UI Thread.
Ce que je vais dire est légèrement en contradiction avec ce qu’il est écrit au dessus, mais si besoin, télécharge un plug-in adapté au logiciel que tu utilises pour appliquer le lazy loading. Un plug-in tout de même très utile, parce que même si le plug-in fait son poids, il empêche au reste de ton site d’en prendre !
Petite astuce : Place ton contenu rédactionnel en dessous des lignes de flottaison, cela lui permet de n’être lu qu’une seule fois et une partie du contenu suivant sera déjà chargé.
💡
Ligne de flottaison : Ligne virtuelle en dessous de laquelle le contenu d’un site web ou d’une application mobile n’apparaît plus à l’écran. Le contenu situé sous la ligne n’est visible que si l’utilisateur scroll sur la page.
Nous n’avons pas encore abordé le sujet des caches de requêtes HTTP. Pour faire simple, un site standard à besoin de nombreuses requêtes HTTP pour se charger. Les caches permettent de réduire le temps de réponse de ces requêtes, donc d’accélérer le chargement de ton site.
Certains éléments sont invisibles pour l’utilisateur, d’autres sont carrément inutiles. Fais donc bien le tri dans ce qui doit être affiché. Sur ton WordPress, il est possible d’installer des extensions pour t’aider à cacher ces requêtes - WP Rocket, Hyper Cache, Cache Enabler ou encore Comet Cache.
Pour minifier ton code - CSS, HTML et JavaScript - voici quelques outils qui te seront utiles :
Minifier.org : Simple et efficace, cet outil “nettoie” ton code des éléments superflus. Il est gratuit et traite les fichiers CSS et JS.
Better WordPress Minify : Vous l’avez compris c’est le plug-in WordPress, il est efficace et puissant, il optimise la compatibilité avec d’autres plug-ins et les thèmes WordPress. Le plug-in est gratuit et il traite les fichiers CSS et JS.
WP Super Minify : Encore un plug-in pour WordPress, il est très bon pour minifier ses fichiers. Son avantage, il calcul les performances que tu as gagné après son installation. Le plug-in est gratuit et il prend en charge le CSS, le JS et le HTML.
Next.Js : Est un outil utilisé par de nombreux développeurs, il est magique, car il minifie le code tout seul.
Comme je te l’expliquais plus haut, tu dois absolument choisir les plugins qui ont un impact minime sur les performances sur ton site web. Même si leur fonctionnalités sont très alléchantes je te propose de les limiter au strict nécessaire.
Les plug-ins pour la mise en place de lazy loading et de CDN sont hyper importants pour optimiser les performances du site. Ils prennent de la place mais ils sont là pour te faire gagner en vitesse de chargement et donc améliorer tes performances.
Pour résumer
Commence par analyser les performances de ton site web grâce aux outils d’analyse. Une fois que tu as cerné les différents problèmes met l’accent sur ce que tu peux commencer par faire toi-même :
Compresser et redimensionner tes images,
Héberger tes vidéos longues durées sur une application externe,
Supprimer les contenus obsolètes ou qui ne génèrent pas de trafic,
Supprimer les plug-ins qui ne sont pas nécessaires au bon fonctionnement de ton site,
Privilégier les plug-ins lazy load et CDN pour optimiser tes performances.
Pour les améliorations plus techniques, il est possible de te former grâce à des tutoriels ou tu peux demander de l’aide à une agence de développement ou un développeur freelance, pour :
Installer un maximum de caches CDN pour relocaliser les données de ton site et donc réduire le temps de chargement de tes pages partout dans le monde,
Minifier le code de ton site web pour alléger celui-ci,
Différer le chargement de tes images et de tes fonctionnalités pour éviter que tout le contenu du site ne se charge en une seule fois à l’ouverture (lazy loading).
Nous venons de voir les principaux axes à travailler pour que tu puisses analyser les performances de ton site web, en toute autonomie, et quels sont les points d’améliorations à prioriser.
J’espère que ce contenu t’a plu et qu’il ta aidé à comprendre les rouages des performances d'un site web.
Si ce contenu peut être utile à l’une de tes connaissances, n’hésite pas à le partager !
Á bientôt !
Si tu veux aller plus loin, tu peux consulter notre livre blanc : Améliorer le trafic de votre site web
