Performance et écoconception web
Comment optimiser la vitesse de chargement de son site internet ?
40% des utilisateurs quittent un site internet qui met plus de 3 secondes à charger. De plus, la vitesse de chargement d’un site internet est un critère important pris en compte par les robots d’indexation des moteurs de recherche. Si vous voulez être dans les premiers résultats, vous devez faire en sorte que le chargement des pages de votre site se fasse en 3 secondes maximum. En respectant ça, vous améliorerez aussi l’expérience de vos utilisateurs puisqu’ils n’attendront pas longtemps avant l’affichage des pages. Et qui dit chargement rapide dit site web léger donc plus éco-responsable ! Dans cet article, on vous donne quelques pistes pour optimiser la vitesse de chargement de votre site internet. Bonne lecture !
Choisir votre type d’hébergement
Serveur dédié ou serveur mutualisé ? Ces deux types de serveurs ont leurs avantages et inconvénients notamment vis-à-vis du prix. Ce qui nous intéresse ici c’est la bande passante. L’avantage du serveur dédié est qu’il offre de meilleures performances car votre site sera le seul présent dessus contrairement au serveur mutualisé que vous devrez partager avec d’autres sites internet. Cependant, héberger votre site sur un serveur dédié va vous coûter sensiblement plus cher. À moins que vous soyez une grande organisation avec un volume très élevé de visiteurs et des besoins e-commerce particuliers, on vous recommande de vous diriger vers un serveur mutualisé. Pour celui-ci, il faudra alors simplement faire attention à la bande passante et vérifier qu’elle n’est pas restreinte car ça impacterait négativement votre site en le ralentissant. En effet, même s’il y a une limite de bande passante pour chaque site sur un serveur mutualisé, il est possible que l’un d’eux dépasse cette limite. Enfin, il faut privilégier le stockage SSD qui est plus rapide que le stockage HDD. Vous hésitez encore dans le choix de votre serveur ? On a écrit un article récemment pour vous aider à choisir l’hébergeur le plus écoresponsable possible.
Paramétrer un CDN
Un CDN (Content Delivery Network) est un groupe de serveurs dispersé à travers le monde. Il permet à votre site web de charger plus rapidement en jouant le rôle d’un intermédiaire entre le centre d’hébergement principal et votre utilisateur. Pour cela, il répartit des morceaux de votre site, comme des fichiers javascript ou des images, sur un CDN qui est conçu pour le charger plus rapidement pour les utilisateurs à travers le globe.
Éviter d’utiliser trop de widgets et de plugins
Les plugins et widgets permettent d’étendre les fonctionnalités de votre site mais ils prennent une place conséquente dans le code. Cela demandera au robot un temps de lecture plus long et augmentera donc le temps de chargement des pages. On vous en parlait plus en détail dans notre article sur les 25 bonnes pratiques pour réduire l’empreinte environnementale de votre site internet. Alors faites attention à ne pas trop en accumuler et demandez-vous de quelles fonctionnalités vous avez vraiment besoin pour ne pas alourdir le code de votre site. Assurez-vous aussi que vos extensions sont mises à jour régulièrement pour des questions de sécurité et qu’elles ne produisent pas du contenu dupliqué ou supplémentaire qui ne serait pas pertinent pour vous.
Utiliser la mise en cache
Si vous activez la mise en cache du navigateur, vous autorisez le stockage temporaire de données sur le périphérique des utilisateurs. Cela leur évite de télécharger les mêmes données à chaque visite et réduit donc le temps de chargement des pages ! En effet, lorsqu’ils accèderont à votre site, ce plugin affichera la version statique de vos pages et évitera de devoir la charger depuis 0 à chaque visite. Alors assurez-vous de choisir un thème qui est compatible avec les plugins de mise en cache pour que votre site puisse fonctionner correctement lorsqu’ils sont actifs. Pour comprendre davantage la notion de mise en cache, jetez un œil à notre article pour bien choisir un thème WordPress léger et rapide.
Optimiser les fichiers CSS et javascript
Les fichiers CSS et javascript sont des fichiers conséquents. C’est pourquoi il est bien de s’assurer qu’ils ne contiennent pas de déclarations, commentaires, sauts de lignes et espaces inutiles afin de les rendre les plus légers possible. En effet, ces langages de programmations permettent à votre site d’être plus attrayant avec par exemple des animations, des couleurs, des typographies ou encore des formats d’images. Toutes ces ressources doivent donc être lues et téléchargées avant l’affichage des pages mais certaines sont assez lourdes et c’est ce qui ralenti l’affichage du site. Dans une démarche d’écoconception numérique, il est d’ailleurs fortement recommandé de ne pas utiliser d’animations superflues. Vous avez aussi la possibilité de minifier et compresser vos fichiers CSS : cela veut dire que vous retirez tous les espaces blancs et les lignes de code inutiles pour réduire sa taille. Même si les fichiers perdent en lisibilité pour les humains, les navigateurs n’auront aucun mal à les lire. Néanmoins, il est tout de même préférable de garder une copie du code d’origine si un développeur doit le modifier.
Le lazy loading
Il est important de distinguer la vitesse de chargement d’une page et la vitesse d’affichage de cette dernière. En effet, il est tout à fait possible d’afficher une page rapidement sans que la totalité de ses composants soit chargée. Ça permet d’augmenter la vitesse de chargement perçue par l’utilisateur, ce qui est important d’un point de vue UX et conversions.
Pour accélérer la vitesse d’affichage d’un site web, le lazy loading va donc décaler le chargement des divers scripts de la page web, afin de favoriser un affichage rapide des contenus et composants visibles par les utilisateurs. Ça consiste par exemple à ne charger que les images situées au-dessus de la ligne de flottaison alors que les autres images sont chargées au fur et à mesure que l’utilisateur déroule le contenu. Pour mettre en place du Lazy Loading, il existe des plugins facilement installables sur WordPress, comme a3 Lazy Load.
Compresser les images et choisir le bon format
Les images sont beaucoup utilisées sur les sites internet mais elles peuvent demander un temps de chargement assez long. Néanmoins, il existe des solutions : en choisissant le format adapté et en réduisant leur taille :
- Le format Jpeg est destiné aux photographies de haute qualité et peut être plus compressé que le format Png
- Le format Png est un format parfait pour les effets de transparence, de texte et les images graphiques comme les infographies
- Le format WebP est un format créé par Google qui permet d’avoir une excellente qualité d’image pour une petite taille et est facilement compressible. Mais attention ! Il n’est pas lu par tous les navigateurs et n’est pas disponible sur les principaux logiciels de graphisme (sauf installation d’un plugin)
- Le format SVG, ou vectoriel, est encore plus idéal que le Png pour les illustrations et les icônes grâce à sa qualité et son adaptabilité tout en restant très léger
Donc le mieux pour alléger votre site internet est d’éviter, si vous le pouvez, les formats Jpeg et Png et de surtout privilégier le format vectoriel beaucoup plus léger et adaptable sans perte de qualité !
Utiliser des plateformes de stockage externes
Si votre site est constitué de plusieurs fichiers lourds comme des vidéos, il est préférable de ne pas les héberger directement sur votre site mais sur des hébergeurs externes comme YouTube. Cela permettra aux utilisateurs de visualiser vos vidéos sans pour autant quitter votre site en plus de l’alléger !
Vous avez maintenant tout en main pour alléger votre site et augmenter sa vitesse de chargement et par conséquent sa performance. Votre référencement et vos conversions vous diront merci ! Et ne l’oubliez pas : si votre site charge rapidement, les utilisateurs resteront dessus et cela augmentera le trafic ! Cela aura pour conséquence de donner encore plus de valeur à vos pages aux yeux des moteurs de recherches.
Et si vous voulez concevoir un site rapide, pensez à l’écoconception web. Cette démarche respectueuse de l’environnement prend en compte les meilleures pratiques en termes de développement web et de performance.