4 techniques faciles pour améliorer la performance de son site web
Introduction
Votre site web, c’est le reflet de votre structure sur internet. C’est une vitrine importante et le pilier majeur de votre communication numérique. L’expérience vécue par vos utilisateurs est donc essentielle. 1 visite de site web sur 3 est jugées frustrante. Elle compte tant pour l’image renvoyée par votre structure que pour votre référencement naturel. Qu’il s’agisse d’un site internet créé par vos soins ou par un professionnel, des actions sont possibles pour en améliorer sa performance.
La première des choses à faire, c’est de réaliser un état des lieux pour identifier les forces et faiblesses actuelles de votre site. Pour ce faire, j’utilise l’outil Lighthouse. Il s’agit d’une extension de Google Chrome qui permet de réaliser une évaluation de la performance de votre site. Lorsque je parle ici de performance, j’entends principalement la vitesse de chargement.
Rapport performance by Lighthouse
Nous n’allons pas ici rentrer dans le détail du rapport, mais je vous invite à le réaliser pour votre site. Quel que soit le résultat, voici 4 techniques qui sont garanties d’améliorer la performance globale de votre site.
Utiliser les bons formats d’image
Mettre ses images à la bonne taille
Différer le chargement de certaines ressources
Eliminer les ressources inutiles
1. Utiliser les bons formats d’image
Le rôle des images
Les images de votre site internet jouent un rôle important dans la séduction et l’illustration. Mais aussi dans sa vitesse de chargement. Pour faire simple, à chaque visite de votre site, les ressources qui le composent sont appelées du serveur. C’est par exemple des images, vidéos, documents, fiches de style, pages HTML, etc. Plus une ressource est lourde, plus elle va mettre du temps à charger. Si elle met du temps à charger, elle bloque le chargement d’autres ressources et votre site s’en retrouve plus lent.
Utiliser les bons formats d’image permet de vous assurer de limiter leur impact sur le temps de chargement. En effet, il existe différents formats sous lesquels sont enregistrés des fichiers de type image. Ils ont chacun leurs spécificités, notamment leur compression, qui conditionne le poids final de l’image. Cela veut dire que choisir le bon format d’image vous permet d’en optimiser son poids. Ainsi, vous facilitez globalement le chargement des ressources de votre site internet.
Les formats d’image existants
Jpeg (Joint Photographic Experts Group) C’est le format le plus « classique ». Concerne les images composées de Pixels. Ce format est particulièrement utilisé pour son excellent ratio qualité / compression.
Jpeg 2000 Format hérité du Jpeg classique qui améliore le taux de compression sans déperdition de qualité.
Jpeg XR Permet des gains de performance important par rapport au Jpeg.
Png (Portable Network Graphics) C’est le format des logos et de toutes images « sans fond ». Il a été initialement créé pour remplacer le Gif. Particulièrement adapté pour le Web.
Gif (Graphics Interchange Format) Format dédié à internet. Sa palette de couleurs limitée lui permet d’avoir un poids léger.
WebP Développé par Google. Il est plus adapté que ses prédécesseurs aux résolutions et tailles actuelles d’écrans.
AVIF Le format le plus récent de tous. Il est à la fois adapté aux spécifications actuelles et avec des performances fortes. Il est désormais supporté par la plupart des logiciels.
Aujourd’hui, je vous conseille d’exploiter les formats les plus récents. En effet, ceux-ci sont les plus adaptés et les plus performants. Dans le doute, le format Jpeg sera toujours un bon choix, sauf si vous avez besoin d’un visuel sans fond.
2. Mettre ses images à la bonne taille
Lorsque vous mettez une image sur votre site internet, la taille (largeur x longueur) de celle-ci est contrainte par son emplacement. En fonction de l’endroit où vous l’affichez et peu importe sa taille d’origine, le contenant de l’image en contraindra la taille. Concrètement, si vous mettez en ligne une image de 4000×3000 pixels pour qu’elle s’affiche à côté d’un texte dans un emplacement de 400×300 pixels ; elle s’affichera à la taille de ce dernier. Cependant, une image avec autant de pixels pèse largement plus lourd. Et dans ce cas, elle pèse plus lourd que nécessaire puisqu’il n’est pas prévu qu’elle s’affiche dans cette version sur le site. A chaque visite du site, le serveur devra donc charger une image 10 fois plus lourde que nécessaire. On pourrait penser que cela en améliore la qualité, ce qui est vrai. Cependant l’œil n’est pas capable de faire la différence entre les deux. Privilégiez donc toujours l’image la plus légère et à la taille adaptée.
Illustration taille d’image intégrée sur site web Heyo
Lors de la conception et même de la mise à jour de votre site internet, vous devez toujours vous assurer que les images sont redimensionnées à la bonne taille. Lorsqu’une image « sort » de l’appareil photo, elle est généralement avec une forte définition et résolution, pour la meilleure qualité possible. Ces images sont destinées à être imprimées et doivent impérativement être redimensionnées pour le Web. Même une image qui doit illustrer le fond du site dans toute sa largeur n’a pas besoin d’être dans sa taille d’origine.
Il est à noter que cela concerne les images « classiques », composées de pixels. Certaines images dites « vectorielles » ne sont pas concernées par ces questions car non composées de pixels. Elles sont constituées de figures et formules mathématiques. Cela concerne les logos ou des images sous forme de dessins. Le format le plus populaire pour le web est le SVG (Scalable Vector Graphics). Il a été développé pour le Web et les images vectorielles. Il est particulièrement utilisé pour la cartographie, les logos et la téléphonie mobile.
NB : enregistrez systématiquement des copies des images que vous redimensionnez. Il est toujours possible de réduire la définition ou la résolution d’une image mais jamais l’inverse.
3. Différer le chargement de certaines ressources
Au-delà des images dont nous avons déjà amplement parlé, d’autres ressources sont chargées du serveur. Il s’agit de ressources de types différents. Images, textes, feuilles de style ou scripts. Certaines d’entre elles ne sont pas nécessaires à charger immédiatement. Il est possible d’en différer le chargement pour prioriser les ressources essentielles.
Suivant le type de site dont vous disposez, c’est une tâche qui peut s’avérer plus ou moins ardue. Si votre site web a été réalisé par un professionnel, vous pouvez simplement lui demander de le mettre en place. C’est une technique qui est connue notamment sous le nom de « lazy loading ». Dans le cas où vous utilisez un CMS libre de droit comme WordPress, des plugins existent pour automatiser cela. Enfin, si votre site a été réalisé via un éditeur en ligne, vous ne pourrez malheureusement pas forcément le faire. Il est cependant possible que l’éditeur que vous utilisez propose des options dans ce sens dans sa version payante.
4. Eliminer les ressources inutiles
Cette partie concerne exclusivement les sites créés via CMS ou par un professionnel. Lors de la création d’un site et tout au long de sa vie, certaines ressources peuvent être ajoutées et finalement plus utilisées. Un plugin qui ne remplit finalement pas sa fonction ; une feuille de style utilisée initialement puis remplacée. Parfois, il est utile de faire le « ménage » afin d’éviter que ces dernières soient chargées alors qu’elles n’ont pas d’utilité pour le site. Il existe également des plugins qui permettent d’automatiser ce genre de choses.
Autres techniques
Ces 4 techniques sont les principales, à réaliser en priorité. Cependant, en fonction de votre situation, il est possible que d’autres techniques puissent améliorer la performance de votre site.
Automatiser la mise en cache Il est possible de faire en sorte d’utiliser le navigateur de l’utilisateur pour mettre en cache des ressources. Ainsi, à la prochaine visite de l’utilisateur, les ressources ne seront pas appelées du serveur, faisant économiser du temps de chargement.
Mettre en place la compression de texte Si vous avez accès à votre serveur, vous pouvez le configurer pour mettre en place la compression de texte.
Réduire la réponse initiale du serveur En fonction du thème ou des plugins utilisés, il est possible de réduire le temps de la réponse du serveur. Il faut parfois procéder à une amélioration du serveur pour améliorer cela.
Maintenir la proportion des images Vous devez idéalement mettre les images à la bonne taille, mais à minima il faut maintenir la proportion des visuels.
Conclusion
La performance de votre site internet, c’est un gage de l’expérience vécue par le client. Plus votre site sera performant, plus il chargera rapidement, meilleure sera l’expérience client. Soignez la performance en appliquant ces quelques techniques. De plus, un site qui fonctionne bien aura plus de chance d’être correctement référencé. Enfin, il est à noter que c’est quelque chose à toujours garder en tête. Nouvelles images ajoutées, ressources inutilisées, il faut constamment avoir en tête l’impact sur le chargement.
3 réponses