Un site plus eco-friendly
Aujourd’hui, l’urgence climatique et ses conséquences sur nos vies quotidiennes ne peuvent plus être négligées. Parmis les nombreuse sources de pollution, l’internet en multipliant les clouds, les serveurs et autres data-centers, est devenu très énergivore comme le montre cette infographie de l’empreinte du numérique en France (étude de l’ADEME et l’Arcep).
En tant que web designer, je me sens obligé de tenir compte de tous ces paramètres et d’essayer à mon petit niveau de faire en sorte que les sites que je dévelloperai à l’avenir soient le plus eco-friendly possible. Mais comment faire ?
Voici une liste de 20 propositions qui peuvent améliorer l’impact écologique (article source):
LE DESIGN ET LE CONTENU
1- LE SEO
En optimisant le SEO d’un site web pour son classement dans les moteurs de recherche, nous aidons les internautes à trouver les informations qu’ils souhaitent rapidement. Lorsque le référencement est efficace, ils passent moins de temps à naviguer sur le web et visitent moins de pages qui ne répondent pas à leurs besoins. Cela signifie que moins d’énergie est gaspillée et que l’énergie consommée est utilisée pour apporter une réelle valeur ajoutée à l’utilisateur.
2 – LA RÉDACTION DU CONTENU
La rédaction des textes a un impact sur l’efficacité des sites web car elle influe sur le temps que les internautes passent à les parcourir. En général, nous souhaitons que les internautes passent beaucoup de temps sur le site pour se plonger dans notre contenu. Mais nous ne voulons pas qu’ils perdent leur temps à parcourir un contenu qui ne leur apporte rien. Par conséquent, une rédaction claire et efficace peut contribuer à réduire le temps perdu sur l’internet et par conséquent le gaspillage d’énergie.
3 – L’EXPÉRIENCE UTILISATEUR (UX)
Un des éléments essentiels À une bonne expérience utilisateur, c’est la réduction des frictions dans leur parcours. Nous voulons que les utilisateurs puissent trouver ce qu’ils veulent et 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 donc réduit une fois de plus la quantité d’énergie gaspillée à naviguer vers des pages qui ne servent pas le bon objectif et font perdre du temps à essayer de comprendre ce qu’ils doivent faire ensuite.
4-RÉDUIRE LE NOMBRE D’IMAGES
Sur la plupart des sites web, les images sont responsables d’une grande partie du poids des pages. Plus vous utilisez d’images et plus les fichiers à transférer sont volumineux donc l’énergie utilisée est plus importante. Les créateurs de contenu doivent réfléchir soigneusement à l’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 se posant ces questions et en réduisant au maximum les images, sans compromettre l’expérience de l’utilisateur, on contribuera à réduire la consommation d’énergie.
5-LE NOMBRE DE VIDÉOS
Bien qu’elle soit moins utilisée que les images, la vidéo est de plus en plus populaire 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, on peut se demander si les vidéos sont vraiment nécessaires. Si c’est le cas, voyons si nous pouvons réduire la quantité de vidéos diffusées en supprimant la lecture automatique et en gardant un contenu assez court. Un site avec des vidéos en cours de lecture peut être jusqu’à deux fois plus lourd qu’un site sans vidéo en termes de poids de page et va créer une charge beaucoup plus importante sur le CPU de l’utilisateur, ce qui entraîne une consommation d’énergie bien plus grande.
6-LES POLICES DE CARACTÈRES
Les polices de caractères peuvent améliorer l’attrait visuel des sites, mais peuvent aussi rajouter du poids. 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 personnalisées, les concepteurs devraient envisager les options suivantes :
– Utiliser des polices 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 charger de fichiers puisqu’elles se trouvent déjà sur l’appareil de l’utilisateur.
– Utiliser moins de variantes de polices. Nous pouvons ressentir le besoin d’utiliser des polices personnalisées, mais essayons d’être frugal dans le nombre de polices que nous choisissons et dans le nombre de graisses sélectionnées.
LE DÉVELOPPEMENT
7-UN CODE PROPRE ET CLAIR
Même si ça parait évident, un code propre, simple et bien structuré est une très bonne chose en soi. Évitez les doublons et écrivez des requêtes efficaces. Le code doit être une machine bien huilée et légère.
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 Frameworks et des bibliothèques existantes, assurez-vous qu’ils sont également affinés et adaptés pour fournir efficacement la fonctionnalité dont vous avez besoin, et que vous n’enfoncez 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-UtiliseR moins de JavaScript
Le JavaScript a un impact sur l’efficacité des sites de deux façons : en ajoutant du poids aux fichiers de la page Web et en augmentant la quantité de traitements requise par l’appareil de l’utilisateur. Le deuxième point s’applique au 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, qui à son tour augmente 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.
Cherchez des moyens de réaliser des interactions, des fonctionnalités et des animations frontales en utilisant des technologies plus efficaces comme le CSS, ou au moins en utilisant efficacement le 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 et porter atteinte à leur vie privée.
webpagetest.org est un excellent outil pour mesurer les performances, les données et l’impact énergétique des scripts publicitaires.
Le nouvel inspecteur web de Safari dispose d’un outil utile pour aider à évaluer l’impact énergétique d’une page web sur l’appareil de l’utilisateur.
9-OptimiseR Les imageS
Comme indiqué plus haut, les images sont l’une des principales sources 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 pour compresser les fichiers d’images sans perte de qualité visible.
Utilisez le format de fichier le plus efficace pour chaque image, par exemple WebP au lieu de JPEG.
En suivant ces étapes, 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 DE CARACTÈRES
Il existe des stratégies techniques qui peuvent être utilisées pour minimiser la taille des polices sur les sites 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 modernes tels que WOFF et WOFF2, qui utilisent des méthodes de compression supérieures à celles des formats TTF, OFT et SVG.
– Créez des sous-ensembles 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 cet article (en anglais)
11-UTILISER AMP (ACCELERATED MOBILE PAGES)
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-CONSTRUIRE DES PAGES WEB STATIQUES
Les sites Web alimentés par des 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 PWA permet aux sites d’exploiter des fonctionnalités que l’on ne trouve normalement que dans les applications natives. 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 des 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. Cela peut également contribuer à améliorer les temps de chargement et l’expérience de l’utilisateur, sans réel inconvénient.
HÉBERGEUR WEB
Les sites web consomment beaucoup d’énergie dans les Data Centers et lors de la transmission des données vers et depuis le Data Center. 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 vue, 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 surcharge 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.
La mise en place peut s’avérer compliquée, mais de nombreux hébergeurs tels que Kinsta et WP Engine proposent désormais cette option en tant que fonctionnalité prête à l’emploi, 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 indice 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 watt 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, comme ceux de Google, peuvent avoir un PUE de 1,11.
16-UTILISER UN DATA CENTER PROCHE DE VOS UTILISATEURS
Une grande partie de l’énergie utilisée par l’internet sert à transmettre les données à travers 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 data center proche de votre public cible vous aidera à 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 data center proche de votre public principal sera bon pour l’expérience utilisateur et pour la planète.
17-UTILISER UN CDN (CONTENT DELIVERY NETWORKS)
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.
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 suggère 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 de l’énergie sur les sites Web il y a de nombreuses années et elle s’est estompée 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-UTILISER LA DERNIÈRE VERSION DE PHP
Katalin Juhasz de Kinsta, suggère de réfléchir à la technologie qui fonctionne 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’applique également aux alternatives PHP.
CONCLUSION
Il est primordial que nous éliminions 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 Safari web inspector puissent nous 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 eeb ou d’une meilleure expérience utilisateur. Un site plus efficace est fondamentalement un meilleur site donc plus eco-friendly !