Eco-conception web : 5 bonnes pratiques pour créer un site web éco-responsable
Nous le savons désormais, le numérique et les nouvelles technologies ont un impact majeur sur notre environnement, notamment à cause de l’énergie incroyable utilisée pour stocker et faire circuler toutes nos données. Face au dérèglement climatique, le secteur du numérique doit également être transformé en devenant plus sobre. Un site internet représente évidemment une part non négligeable dans cette consommation de ressources (énergie des datacenters, requêtes serveurs, stockage des données…) c’est la raison pour laquelle il est essentiel aujourd’hui d’appliquer certaines bonnes pratiques afin de limiter l’impact écologique de son site internet.
Découvrez ci-dessous nos 5 conseils pour un site éco-conçu !
Bonus : Toutes ces pratiques vous permettront à la fois de limiter l’impact écologique de votre site… mais également d’optimiser votre référencement naturel !
1 • Compresser et limiter les photos et vidéos
Il peut être tentant, pour des raisons de design ou bien en lien directement avec votre activité, d’illustrer votre site à l’aide de nombreuses photos et vidéos. Cependant, outre l’impact en termes de performances sur la vitesse de chargement notamment, utiliser des médias lourds sur votre site c’est également utiliser plus de stockage et donc de rendre votre site plus énergivore.
Malgré tout cela, il faut être conscient que certaines activités (site e-commerce par exemple) ont un réel besoin d’utiliser du visuel afin de maximiser l’expérience utilisateur et convertir, dans ce cas, les visiteurs en clients.
C’est dans ces situations là qu’il est alors important de procéder à la compression des médias :
Pour les images
- Réduire la résolution : En effet, vous n’aurez jamais besoin d’afficher une image en 4000x3000px sur votre site. Il est donc conseillé de redimensionner cette image en 1600x1200px (pour une image de fond de section par exemple) et 800x600px pour une image d’illustration simple.
- Compression du poids : Il peut être difficile de trouver le meilleur compromis entre réduction de poids et perte de qualité limitée. Cependant, il est vivement conseillé de rester en dessous des 100ko par image.
Bon à savoir #1 : Exemples d’outils pour compresser et redimensionner en ligne vos images
Bon à savoir #2 : Le SVG, l’alternative pour les illustrations et logos
Si votre charte graphique vous impose d’utiliser principalement des illustrations vectorielles, il peut être interessant d’opter pour l’utilisation d’illustrations au format SVG plutôt que JPG ou PNG. Le SVG présente l’énorme avantage d’être en général plus léger et, étant un format vectoriel, ne pixelise par quelque soit la résolution d’affichage.
Pour les vidéos
- Hébergement externe : Une plateforme comme YouTube, spécialisée en hébergement vidéo, va vous permettre d’intégrer facilement votre vidéo sans pour autant surcharger votre serveur. De plus, YouTube applique systématiquement une compression sans perte à chaque vidéo uploadée afin d’alléger les fichiers.
- Résolution et bitrate : Si vous êtes le créateur ou la créatrice de la vidéo que vous souhaitez uploader sur votre site (et non sur une plateforme), nous vous invitons à diminuer le bitrate de compression vidéo à l’export, une valeur correspondant aux standards du web est d’environ 10 à 12 mb/s. Cependant, en fonction du type de vidéo (Images filmées ou MotionDesign), de sa résolution d’origine et de son intégration, vous pourrez descendre bien en dessous de ces valeurs.
2 • Optimiser la vitesse de chargement et diminuer le nombre de requêtes
Second point essentiel, soulager votre serveur ! En effet, un site lent et envoyant énormément de requêtes va avoir tendance à être plus énergivore (en plus de pénaliser votre SEO).
Pour remédier à un site internet trop lent, il faut d’abord identifier quelles sont les raisons de cette lenteur. En règle générale, les médias sont un premier facteur de lenteur (cf le point précédent), mais si on admet que vous avez bien suivi nos conseils sur l’optimisation des médias, alors le problème doit bien se trouver autre part ! Voici les deux étapes essentielles à l’optimisation globale de votre site afin de réduire sa consommation de ressources serveurs :
Diminuer le nombre de requêtes
Premier point, réduire l’envoi de requêtes à votre serveur en désactivant certaines fonctionnalités.
Une visite sur votre site déclenche automatiquement une requête appelée requête HTTP. Le serveur envoie au navigateur web (Chrome, Firefox, Safari…) du visiteur tous les fichiers qui composent votre site web pour que celui-ci puisse l’afficher.
Ces échanges avec le serveur vont avoir un impact sur le temps de chargement et le besoins d’énergie des serveurs.
La première chose à faire est donc de repérer les éléments, extensions (plugins) et fonctionnalités non essentiels au fonctionnement de votre site et de tout simplement les désactiver de l’ensemble du site. Si certaines de ces fonctionnalités sont utiles seulement sur quelques pages, il est de bon ton de les désactiver alors sur les pages sur lesquelles elles ne sont pas utilisées, réduisant ainsi l’envoi de requêtes inutiles.
Exemple : Votre formulaire de contact se trouve sur votre page contact, vous pouvez donc désactiver le module et ses scripts sur votre page d’accueil.
Second point, la minification du code. Cette étape va vous permettre de condenser votre code et le réduire à l’essentiel, limitant là encore le volume de requêtes vers le serveur.
Optimiser la vitesse de mon site internet
Si vous avez suivi les points présentés précédemment, vous avez déjà optimisé la vitesse de chargement de votre site, félicitations ! Enfin, pour terminer sur cette optimisation il est essentiel d’installer un système de cache sur votre site internet. En quoi cela consiste ? Le cache, comme son nom l’indique, va permettre à l’utilisateur de mettre en cache votre site internet lors de sa première visite (sauvegarder les pages visitées dans son navigateur) et donc d’afficher de manière presque instantanée les pages de votre site lors de sa prochaine visite.
Bon à savoir #3 : Extensions de cache pour un site WordPress
3 • Optimiser son arborescence et limiter les pages inutiles
Vous l’aurez compris, le but ici est d’éviter tout chargement inutile. C’est donc de manière logique que nous nous tournons maintenant du côté de l’arborescence de votre site internet. En effet, il peut souvent arriver que l’on souhaite segmenter les informations sur notre site, et donc créer un nombre conséquent de pages. Si cette pratique est plutôt bénéfique du point de vue SEO (quand les pages sont de qualité bien entendu), elle l’est beaucoup moins du point de vue de l’éco conception web.
Il est intéressant alors de faire un point sur l’arborescence et la structure de son site : est-ce que toutes mes pages sont essentielles ? Apportent-elles des informations ou du contenu de qualité pour l’internaute ? Est-ce qu’il n’est pas plutôt possible de regrouper le contenu de 2 ou 3 pages sur une seule ?
Attention cependant si vous décidez de regrouper certaines pages ! Pensez à effectuer une redirection des URLs des pages supprimées vers la nouvelle, Google vous en remerciera. 😉
4 • Bannir la lecture automatique de vidéos
Formidable outil de communication, la vidéo est plus que jamais une pierre angulaire d’une communication d’entreprise, ce n’est pas nous qui vous dirons le contraire !
Cependant, outre l’application d’une réduction de poids ou de son hébergement externe, comme expliqué plus haut, la vidéo sur le web s’accompagne d’une autre bonne pratique : la désactivation de la lecture automatique.
En effet, la lecture automatique impose à l’utilisateur une consommation de données plus ou moins élevée, ce qui va à l’encontre du principe de site web éco-friendly. Cette lecture automatique est d’autant plus pénalisante pour le visiteur visitant votre site à partir d’un smartphone en connexion 4G/5G.
Dans le cas où vous avez absolument besoin d’avoir une vidéo en lecture automatique sur votre site (par exemple en fond de section), pensez à activer l’option de lecture seulement dans le champ de vision. Cette fonctionnalité très utile va lancer la lecture automatique de la vidéo seulement lorsque celle-ci arrivera dans le champ de vision du visiteur et va la stopper dès lors que la vidéo sortira du champ de vision.
5 • Choisir un hébergeur éco-responsable
Nous avions déjà écrit un article sur l’intérêt de choisir un hébergeur de site web éco-responsable, accessible ici.
Pour résumer, un hébergeur vert est un hébergeur qui s’engage à utiliser une énergie verte (issue des énergies renouvelables) pour alimenter ses structures et serveurs, mais aussi à adopter une démarche RSE forte.
C’est peut être là la première action à mener pour rendre votre site éco-responsable ! Pour vous aiguiller dans votre recherche, voici deux hébergeurs verts que nous utilisons et vous conseillons :
O2Switch, l'hébergeur français éco-responsable
O2switch est un hébergeur français basé à Clermont Ferrand. La société stocke toutes les données sur des datacenters 100% français et met en place toute une série d’actions dans le but d’améliorer sans cesse sa démarche RSE : optimisation du refroidissement des serveurs, utilisation de serveurs « low voltage », approvisionnement de matériel en circuit court…
Découvrez l’offre unique O2Switch en cliquant sur la bannière ci-dessous : 
Infomaniak, l'hébergeur vert made in Suisse !
Infomaniak est un hébergeur basé en Suisse ancré dans une profonde démarche écologique et ce depuis des années. C’est chez Infomaniak que nos sites sont d’ailleurs hébergés. Outre leur démarche RSE, Infomaniak propose un service de qualité et performant à des prix raisonnables.
Découvrez nos ressources concernant Infomaniak :
Conclusion
Vous l’aurez vu, la plupart de ces pratiques relèvent en fait du bon sens. En effet, les besoins pour faire un premier pas vers l’éco-conception web ne sont pas si complexes et farfelus que ça ! De plus, comme précisé en début d’article, ces bonnes pratiques vous permettrons également d’optimiser le référencement naturel (SEO) de votre site.
Si vous avez un site web, n’hésitez pas à tester son empreinte carbone sur WebsiteCarbon ! Pour voir le test de notre site, c’est par ici.
Si vous souhaitez être accompagné sur l’optimisation de votre site vitrine ou site e-commerce n’hésitez pas à nous contacter !
Code promo o2switch : 10% de remise supplémentaire sur votre hébergement
Chez Epifyt, notre mission est de fournir à nos clients des solutions digitales optimales et personnalisées. En tant…
Read Post
Epifyt : votre agence web à Aix-en-Provence
Epifyt, votre agence web innovante, est fière d’annoncer son installation dans la magnifique ville d’Aix-en-Provence.…
Read Post
Comment créer une fiche d’établissement Google et l’optimiser pour attirer plus de clients locaux
Avoir une présence en ligne est essentiel pour toute entreprise souhaitant attirer des clients locaux. L’un des…
Read Post
Optimiser son site web pour le référencement local : les meilleures pratiques
Le référencement local revêt une importance capitale pour les entreprises cherchant à prospérer au niveau local.…
Read Post
Vidéaste de formation, je me suis diversifié depuis plusieurs années dans le domaine du web et de la communication visuelle en général. J’ai rejoint Thibault au sein d’Epifyt début 2022 afin d’enrichir notre gamme d’offres et ainsi toujours mieux vous accompagner dans la réalisation de vos projets !