Au cours des deux dernières années, nous avons beaucoup parlé de l’empreinte carbone des sites Web. L’impact carbone du web est en grande partie dû à la consommation d'électricité. La question est la suivante :
En tant que professionnels du web, pouvons-nous contribuer à rendre le web plus économe en énergie ?
Cet article a pour but de répondre exactement à cette question, en fournissant une liste pratique des principales choses que vous pouvez faire pour minimiser le gaspillage d'énergie et vous assurer que les produits que vous créez sont aussi efficaces que possible.
De plus, presque toutes les mesures énumérées ici pour rendre un site Web plus économe en énergie améliorent également les performances et l’expérience des utilisateurs !
Quelques informations sur la consommation d'énergie des sites web
Si ce sujet est nouveau pour vous, sachez que l’internet - y compris les centres de données, les réseaux de télécommunications et les appareils des utilisateurs finaux comme les téléphones et les ordinateurs portables - consomme beaucoup d'électricité. En fait, si vous additionnez le tout, l’internet utilise à peu près la même quantité d'électricité que le Royaume-Uni, l’une des plus grandes économies du monde.
Alors que nous continuons à consommer de plus en plus de données internet dans notre vie quotidienne, la quantité d'électricité consommée par l’internet augmente rapidement. On ne le voit pas, on ne le pense pas, mais cette énorme consommation d'énergie de l’internet a une énorme empreinte carbone, et c’est un problème que nous devons résoudre.
Pour ceux d’entre nous qui travaillent dans la conception et le développement de sites web, voici comment nous pouvons le faire :
Conception et contenu
Lorsque nous parlons de l’efficacité énergétique des sites Web, il est facile de penser qu’il s’agit d’un sujet purement technique. Pourtant, l’efficacité peut être améliorée avant même la création d’un site Web. La conception et le contenu ont un impact important sur l’efficacité énergétique et les éléments suivants sont des domaines clés auxquels il faut penser.
1. SEO
L’optimisation des moteurs de recherche peut sembler n’avoir aucun rapport avec l’efficacité d’un site web, mais en pratique, les objectifs de l’optimisation des moteurs de recherche sont intrinsèquement liés à l’objectif de réduction de la consommation d'énergie. En optimisant un site web pour le classement dans les moteurs de recherche, nous aidons les gens à trouver les informations qu’ils souhaitent rapidement et facilement. Lorsque le référencement est efficace, les internautes passent moins de temps à naviguer sur le web à la recherche d’informations et visitent moins de pages qui ne répondent pas à leurs besoins. Cela signifie que moins d'énergie est consommée et que l'énergie consommée est utilisée pour apporter une réelle valeur ajoutée à l’utilisateur.
2. Rédaction de textes
Tout comme l’optimisation des moteurs de recherche, la rédaction a un impact sur l’efficacité des sites Web, car elle influe sur le temps que les internautes passent à les parcourir. Parfois, nous souhaitons que les internautes passent beaucoup de temps sur un site Web pour se plonger dans notre contenu. Ce que nous ne voulons pas, c’est qu’ils perdent leur temps à parcourir un contenu qui ne leur apporte que peu ou pas de valeur. Par conséquent, une rédaction claire et efficace peut contribuer à réduire le temps perdu sur l’internet et, partant, le gaspillage d'énergie.
3. Expérience utilisateur (UX)
L’un des éléments essentiels d’une bonne expérience utilisateur est la réduction des frictions dans les parcours des utilisateurs. Nous voulons que les gens soient en mesure de trouver ce qu’ils veulent et d’effectuer les actions dont ils ont besoin de la manière la plus simple possible. Une bonne expérience utilisateur rend l’utilisation du web plus facile et plus agréable pour tout le monde, et réduit une fois de plus la quantité d'énergie gaspillée à naviguer vers des pages qui ne servent pas le bon objectif et à regarder fixement des pages web en essayant de déchiffrer ce qu’ils doivent faire ensuite.
4. Réduire les images
Sur la plupart des sites Web, les images sont celles qui contribuent le plus au poids des pages. Plus vous utilisez d’images et plus les fichiers d’images sont volumineux, plus les données doivent être transférées et plus l'énergie utilisée est importante. Indépendamment de toute optimisation technique, les concepteurs et les créateurs de contenu doivent réfléchir soigneusement à leur utilisation des images.
- L’image apporte-t-elle réellement une valeur ajoutée à l’utilisateur ?
- Communique-t-elle des informations utiles ?
- Le même impact pourrait-il être obtenu si l’image était plus petite ?
- Pourrions-nous réduire les images qui ne sont pas visibles pour l’utilisateur, comme dans les carrousels ?
- Pourrions-nous obtenir le même effet avec un graphique vectoriel (ou même un style CSS) au lieu d’une photo ?
En posant ces questions et en réduisant au maximum les images sans compromettre l’expérience de l’utilisateur, vous contribuerez à réduire la consommation d'énergie.
5. Réduire les vidéos
Bien qu’elle soit moins utilisée que les images, la vidéo est de plus en plus populaire comme format de contenu sur le web, et c’est de loin la forme de contenu la plus gourmande en données et en traitement. Comme pour les images, demandez-vous si les vidéos sont vraiment nécessaires. Si c’est le cas, voyez si vous pouvez réduire la quantité de vidéos diffusées en supprimant la lecture automatique des vidéos et en gardant un contenu vidéo court. Un site Web avec des vidéos en cours de lecture peut être un, voire deux ordres de grandeur plus lourd qu’un site Web sans vidéo en termes de poids de page et crée une charge beaucoup plus importante sur le CPU de l’utilisateur, ce qui entraîne une consommation d'énergie beaucoup plus importante.
6. Choisissez les polices avec soin
Les polices Web peuvent améliorer l’attrait visuel des sites Web, mais peuvent ajouter un poids important aux fichiers des sites Web sur lesquels elles sont utilisées. Un seul fichier de police peut peser jusqu'à 250 Ko, et ce uniquement pour la police standard. Si vous voulez du gras, ajoutez 250 Ko supplémentaires !
Pour aider à réduire l’impact des polices web personnalisées, les concepteurs devraient envisager les options suivantes :
- Utilisez les polices du système lorsque cela est possible. Elles ne sont pas toujours aussi jolies, mais des polices telles que Arial et Times New Roman peuvent être utilisées sans avoir à charger le moindre fichier de police, puisqu’elles se trouvent déjà sur l’appareil de l’utilisateur.
- Utilisez moins de variantes de polices. Vous pouvez ressentir le besoin d’utiliser des polices web personnalisées, mais essayez d'être frugal dans le nombre de polices que vous choisissez et dans le nombre de poids différents que vous utilisez pour chaque police.
Développement
Les développeurs ont une grande influence sur l’efficacité énergétique des sites Web qu’ils créent et entretiennent. Bien que certaines décisions prises par les concepteurs et les créateurs de contenu échappent aux développeurs, il existe plusieurs domaines dans lesquels les développeurs ont un contrôle total et des domaines dans lesquels ils ont la capacité d’optimiser le contenu et les conceptions qui leur sont donnés.
7. Écrivez du code propre
Cela va sans doute sans dire, mais un code propre et rationalisé est une bonne chose en soi. Gardez un code propre et simple, évitez les doublons et écrivez des requêtes efficaces. Le code en arrière-plan doit être une machine bien huilée et allégée.
N’oubliez pas que cela ne s’applique pas seulement au code que vous écrivez, mais aussi à celui que vous empruntez. Si vous utilisez des cadres et des bibliothèques existants, assurez-vous qu’ils sont également affinés et adaptés pour fournir efficacement la fonctionnalité dont vous avez besoin, et que vous ne frappez pas un clou avec un marteau. Si vous utilisez un système de gestion de contenu (CMS) comme WordPress, évitez les plugins inutiles qui ajoutent de la lourdeur et choisissez des plugins qui minimisent la charge du serveur et n’ajoutent pas de poids inutile sur le front-end.
8. Utilisez moins de JavaScript
Les JS ont un impact sur l’efficacité des sites Web de deux manières : en ajoutant du poids aux fichiers de la page Web et en augmentant la quantité de traitement requise par l’appareil de l’utilisateur. Le deuxième point s’applique aux JS beaucoup plus qu’aux autres types de fichiers.
La fonctionnalité pilotée par JS est traitée sur l’ordinateur ou le téléphone de l’utilisateur et augmente l’utilisation du CPU, ce qui accroît la consommation d'énergie de l’appareil. Vous entendez le ronronnement des ventilateurs de refroidissement de votre ordinateur portable ? C’est de l'énergie gaspillée.
Recherchez des moyens de réaliser des interactions, des fonctionnalités et des animations frontales à l’aide de technologies plus efficaces comme les CSS, ou au moins d’utiliser efficacement les JS. Il convient d’accorder une attention particulière aux scripts de suivi et de publicité qui offrent rarement une valeur ajoutée à l’utilisateur, mais qui peuvent alourdir considérablement les fichiers, entraîner une utilisation importante du processeur, ralentir les sites Web et porter atteinte à leur vie privée.
Le nouvel inspecteur web de Safari dispose d’un outil utile pour aider à évaluer l’impact énergétique d’une page web sur le périphérique de l’utilisateur final, et cet article par les développeurs de WebKit d’Apple fournit des conseils détaillés.
9. Optimiser les images
Comme indiqué plus haut, les images sont l’un des éléments qui contribuent le plus à la quantité de données transférées sur la plupart des pages Web. Outre les décisions prises par les concepteurs et les créateurs de contenu quant à l’utilisation des images, il existe des décisions techniques qui affectent de manière significative la taille du fichier des images affichées sur une page. Il s’agit notamment de :
- Chargez les images à l'échelle correcte au lieu de compter sur le CSS pour les redimensionner, afin d'éviter de charger des images plus grandes que l'échelle à laquelle elles seront affichées.
- Utilisez un outil tel que TinyPNG ou ShortPixel pour compresser les fichiers d’images sans perte visible de qualité.
- Utilisez le format de fichier le plus efficace pour chaque image, par exemple WebP au lieu de JPEG.
Lorsque ces étapes sont respectées, il est possible de réduire considérablement la taille des fichiers d’image, de diminuer la consommation d'énergie et d’améliorer les temps de chargement sans inconvénient perceptible pour les visiteurs du site Web.
10. Optimiser les polices
Il existe des stratégies techniques qui peuvent être utilisées pour minimiser la taille des polices sur les sites web et nous avons constaté que même avec des polices personnalisées, cela peut entraîner des réductions de taille de fichier allant jusqu'à 97 %. Essayez ces techniques pour réduire la taille des fichiers de polices :
- Utilisez des formats de fichiers de polices Web modernes tels que WOFF et WOFF2, qui utilisent des méthodes de compression supérieures à celles des formats TTF, OFT et SVG.
- Sous-ensemble de polices pour n’inclure que les caractères nécessaires sur le site Web.
Pour plus d’informations sur l’optimisation des performances et de la taille des polices Web, consultez l’article de Josh.
11. Utilisez les pages mobiles accélérées (AMP)
AMP est conçu pour accélérer le chargement du contenu sur les appareils mobiles en supprimant le code inutile et le poids des fichiers, ce qui permet d’obtenir une version minimaliste de la page Web originale. En théorie, les technologies comme AMP ne sont pas d’une grande aide si le site Web est efficace au départ, mais dans les cas où les pages Web originales ne sont pas aussi légères qu’elles devraient l'être, AMP peut être un outil utile pour éliminer le superflu et fournir aux utilisateurs mobiles une version plus légère et plus économe en énergie.
Il convient également de noter que Google donne la priorité au contenu AMP dans les résultats de recherche mobile pour les sujets liés à l’actualité en particulier, ce qui peut contribuer à accroître la visibilité de votre contenu. L’inconvénient est que votre contenu peut être servi sur un domaine Google et que certains des éléments supprimés par AMP peuvent être des éléments que vous considérez comme importants. Il s’agit d’un outil puissant, à utiliser avec précaution.
12. Créer des pages Web statiques
Les sites Web alimentés par un CMS effectuent des requêtes dans la base de données du site et génèrent des pages de manière dynamique. En termes simples, cela signifie que le serveur Web doit réfléchir aux informations à renvoyer à l’utilisateur à chaque fois que celui-ci essaie de charger une page, ce qui entraîne une augmentation de la consommation d'énergie du serveur. L’une des solutions (énumérées ci-dessous) consiste à utiliser une technologie de mise en cache du serveur, mais dans certains cas, il peut être possible de simplement mettre en place un serveur de pages Web statiques sans aucune base de données.
Cela peut se faire en écrivant les pages Web sous forme de fichiers statiques en HTML, CSS et JS, ou en utilisant un générateur de site statique ou un hébergeur statique spécialisé pour convertir votre site Web alimenté par un CMS en fichiers statiques.
13. Utiliser la technologie Progressive Web App (PWA)
La technologie des applications Web progressives permet aux sites Web d’exploiter des fonctionnalités qui ne sont normalement disponibles que dans les applications natives. L’une des principales caractéristiques d’une PWA est la possibilité de mettre en cache les fichiers sur l’appareil de l’utilisateur, ce qui signifie que le contenu et les ressources ne doivent pas être rechargés lors de visites répétées. Cela peut réduire considérablement la quantité de données chargées par les visiteurs récurrents, en particulier sur les appareils mobiles pour lesquels le transfert de données est plus énergivore que les connexions filaires. Comme la plupart des choses, cela peut également contribuer à améliorer les temps de chargement et l’expérience de l’utilisateur, sans réel inconvénient.
Hébergement Web
Les sites web consomment beaucoup d'énergie dans le centre de données et lors de la transmission des données vers et depuis le centre de données. Un choix judicieux des services d’hébergement Web peut donc avoir un impact important sur l’efficacité énergétique et la vitesse des pages Web. Voici les principaux points à prendre en compte.
14. Utiliser la mise en cache du serveur
Pour les sites Web qui utilisent un CMS tel que WordPress ou Drupal, les pages sont générées dynamiquement à chaque fois qu’une personne visite une page Web. Cette méthode est très inefficace car elle nécessite un traitement par le serveur pour chaque page affichée, ce qui augmente la consommation d'énergie du serveur web.
Les technologies de mise en cache comme Varnish pré-génèrent des versions statiques de chaque page, de sorte que la charge du serveur peut être considérablement réduite pour la plupart des visiteurs. Cela réduit considérablement la consommation d'énergie du serveur et fait une grande différence dans les temps de chargement des pages.
Il peut être compliqué à mettre en place, mais de nombreux hébergeurs, tels que Kinsta et WP Engine proposent désormais cette option en tant que fonctionnalité standard, ce qui signifie que l’efficacité énergétique et les performances de votre site web peuvent être améliorées avec peu d’efforts de votre part.
15. Choisissez des hôtes ayant un PUE élevé
L’efficacité énergétique des centres de données est généralement évaluée à l’aide d’une mesure appelée efficacité de l’utilisation de l'énergie, ou PUE. Le PUE est déterminé en divisant la quantité d'énergie entrant dans le centre de données par la quantité d'énergie utilisée pour faire fonctionner les ordinateurs qui s’y trouvent. Cela met ensuite en évidence la quantité d'énergie gaspillée pour des activités non informatiques telles que le refroidissement. Le PUE typique d’un centre de données est d’environ 1,67, ce qui signifie que pour chaque 1,67 watts entrant dans le centre de données, seul 1 watt est utilisé pour alimenter les systèmes informatiques. Les centres de données à haut rendement, tels que ceux gérés par Google peut avoir un PUE aussi élevé que 1,11.
16. Utilisez un centre de données proche de vos utilisateurs
Une grande partie de l'énergie utilisée par l’internet sert à transmettre les données par les réseaux de télécommunications. Il va sans dire que plus les informations doivent voyager loin, plus elles consomment d'énergie pendant leur trajet. Par conséquent, le choix d’un centre de données proche de votre public cible contribuera à réduire la consommation d'énergie. Par exemple, vous pouvez trouver un pack d’hébergement web bon marché auprès d’une société d’hébergement basée aux États-Unis, mais si vos visiteurs cibles se trouvent au Royaume-Uni ou en Allemagne, l'énergie sera gaspillée pour transmettre les données à travers l’Atlantique. De plus, cette distance supplémentaire peut également entraîner un retard dans le temps de chargement des pages. Le fait d’installer votre site web dans un centre de données proche de votre public principal sera bon pour l’expérience utilisateur et pour la planète.
17. Utilisez un CDN
C’est très bien de situer votre centre de données à proximité de votre principal groupe d’audience, mais dans les cas où votre audience est répartie dans le monde entier, ce n’est pas si facile. Les réseaux de diffusion de contenu (CDN) offrent une excellente solution à ce problème, en fournissant des ressources telles que des fichiers d’images à partir d’un réseau de centres de données répartis dans le monde entier. Cela signifie que, dans la plupart des cas, les fichiers les plus volumineux seront chargés à partir de l’emplacement du CDN dans la région de l’utilisateur, ce qui réduit la distance parcourue par les données à chaque fois qu’une page est chargée. Une fois encore, cela améliore l’efficacité énergétique et les temps de chargement des pages.
Conclusion
Il est primordial d'éliminer le gaspillage d'énergie dans l’industrie du web. La consommation d'énergie des sites web peut être difficile, voire impossible, à mesurer avec précision (bien que des outils tels que Website Carbon et l’inspecteur Web Safari peuvent vous aider), mais il y a néanmoins de nombreuses choses que nous pouvons faire pour éliminer le gaspillage et améliorer l’efficacité. La plupart de ces actions ne sont pas fondamentalement difficiles, elles nécessitent simplement une attention aux détails et une réflexion approfondie dans chaque aspect de la conception, de la création de contenu, du développement et de l’hébergement.
Mieux encore, presque tout ce que nous pouvons faire pour aider les sites Web à être plus efficaces sur le plan énergétique les rendra également meilleurs à d’autres égards, qu’il s’agisse d’un meilleur référencement, de meilleures performances Web ou d’une meilleure expérience utilisateur à d’autres égards. Un site Web plus efficace est fondamentalement un meilleur site Web.
Si vous avez des astuces pour réduire la consommation d'énergie des sites Web, n’hésitez pas à nous contacter et à nous en faire part !
Par ailleurs, si vous souhaitez créer un site Web plus écologique, lisez et suivez les conseils suivants signer le Manifesto du Web durable.
Conseils supplémentaires !
Depuis la publication de cet article, nous avons reçu d’autres suggestions sur la façon de réduire la consommation d'énergie des sites Web.
18. Bloquer les bots
Akshat Choudhary de BlogVault a suggéré que le blocage des bots pourrait réduire la consommation d'énergie. Il a déclaré que “les bots utilisent souvent 50% des ressources telles que le traitement et la bande passante.”
19. Mode Sombre
Hazel Ho a suggéré de réduire les espaces blancs et d’adopter le mode sombre. Les sites Web sombres ont été l’une des premières techniques popularisées pour économiser l'énergie sur les sites Web il y a de nombreuses années. Cette technique a disparu avec l’avènement des écrans LCD, qui, contrairement aux écrans CRT, ont un rétroéclairage permanent, utilisant la même énergie quelle que soit la couleur réellement visible sur l'écran. Cependant, avec l’avènement des écrans OLED qui éclairent chaque pixel individuellement, l’utilisation de couleurs plus sombres est à nouveau une technique viable pour réduire l'énergie sur les appareils des utilisateurs finaux.
20. Utilisez la dernière version de PHP
Katalin Juhasz, de Kinsta, nous a contactés pour nous suggérer de réfléchir à la technologie utilisée sur les serveurs afin de nous assurer que nous utilisons les versions les plus efficaces disponibles. Plus précisément, elle a indiqué que les nouvelles versions de PHP sont non seulement plus rapides, mais qu’elles utilisent également moins de ressources serveur et donc moins d'énergie. Kinsta a écrit sur les avantages des nouvelles versions de PHP et l’impact sur les performances dans cet article. Il ne fait aucun doute que cela s’appliquera également aux alternatives PHP.