Le développement durable est défini par le rapport Brundtland de la Commission Européenne en 1987 de la manière suivante : "Un développement qui répond aux besoins des générations présentes sans compromettre la capacité des générations futures à répondre aux leurs". Cette définition est plus que jamais d'actualité. Il est urgent d'agir, si nous souhaitons continuer à profiter des bienfaits que nous apporte notre planète sans que cela remette en cause la qualité de vie des générations futures.

Souvent, nous avons l'impression que nous n'avons pas le pouvoir de changer les choses, car nous ne sommes ni dirigeants d'un pays ni PDG d'une grande entreprise. Néanmoins, ces dernières années ont montré que lorsque les citoyens du monde changent de regard, changent leurs habitudes, prennent conscience des enjeux, alors c'est toute notre société qui évolue. À nous, donc, de changer nos pratiques, dans notre vie de tous les jours, mais également dans notre vie de développeur !

1. Le green IT

Le numérique semble à tort ne pas avoir de conséquences écologiques, car il semble immatériel. Il nécessite néanmoins des équipements informatiques à la fois chez les utilisateurs (ordinateurs, tablettes, smartphones et box internet), au niveau des réseaux informatiques (switches, routeurs, antennes…) ainsi que dans les datacenters (serveurs, climatiseurs, onduleurs…). Tous ces équipements ont une empreinte écologique due à leur utilisation, mais également au niveau de leur production (la production représente les ¾ des impacts environnementaux globaux). Les impacts écologiques sont de plusieurs ordres : la consommation d'électricité, l'utilisation de minerais rares, la pollution de grande quantité d'eau, mais également du sol et de l'air, la production de nombreux déchets… Cela a entre autres pour conséquence une production de 4% des gaz à effets de serre et cela croit d'environ 6 à 9% par an ! Ces chiffres proviennent de l'Adem et du Shift Project. N'hésitez pas à consulter leurs rapports pour plus d'informations.

1.1. Le green for IT

Cette démarche vise à rendre plus écologique le monde numérique. Il y a différentes facettes qui permettent cela :

• Sensibiliser le public aux conséquences de leurs actes numériques
• Revoir nos usages, nos pratiques
• Repenser notre besoin en équipements informatiques
• Faire durer le plus possible ces équipements
• Écoconcevoir nos services numériques
• Faire des choix responsables pour notre hébergeur, notre fournisseur d'électricité…

Dans cet article, le focus est fait sur la partie écoconception web.

1.2. L'IT for Green

Le numérique est également une formidable opportunité pour réduire notre empreinte écologique. Il peut permettre d'éviter des déplacements. Par exemple, une plateforme de covoiturage permet d'éviter que des voitures ne circulent pour une seule personne. Une solution de vidéoconférence est un autre exemple permettant d'éviter un certain nombre de déplacements. Le numérique peut également éviter du gaspillage. Par exemple avec une solution permettant une meilleure gestion des stocks ou d'optimiser l'utilisation de ressources…

2. La conception du service numérique

Cette étape est cruciale pour créer un service numérique avec une faible empreinte environnementale. Les plus gros leviers de gain green IT sont accessibles durant cette étape. Par la suite, il est possible d'effectuer des améliorations, mais celles-ci auront des impacts beaucoup plus faibles.

La conception d'un service numérique peut aboutir à des solutions utilisant peu de technologie ou des technologies anciennes et avec un faible impact écologique. Ces solutions se nomment low-tech en opposition à la high-tech. Cela peut par exemple avoir un service numérique consultable même sur un matériel ancien ou avec un réseau de faible débit…

Il est également possible d'utiliser des solutions n’utilisant pas du tout de technologie, c'est la no-tech. Par exemple, l'utilisation de chiens pour détecter précocement à l'odeur certains cancers permet d'obtenir de meilleurs résultats qu'avec une intelligence artificielle.

Bien souvent, les meilleures solutions allient plusieurs niveaux technologiques parmi les trois (no-tech, low-tech et high-tech). Il existe au Rwanda et au Ghana des livraisons de sang, médicaments et de vaccins par drone vers des communautés éloignées. Les commandes sont passées par SMS, ce qui est une bonne solution puisque ces pays n'ont pas une couverture suffisante pour utiliser internet. La solution alliant high-tech (drone) et low-tech (SMS) est une solution très écologique puisqu'elle a une empreinte écologique bien moindre que l'acheminement par voie terrestre et permet de sauver beaucoup de vies grâce à sa bien meilleure rapidité d'acheminement.

Lorsque le service numérique est repensé de fond en comble pour trouver une solution novatrice et à fort impact écologique, cela se nomme une action de facteur 4 par opposition à celles ayant un impact plus faible nommé facteur 1.

Pour illustrer cela de manière imagée, prenons l'exemple de la réalisation d'un déplacement avec un véhicule. La solution de la voiture thermique correspond à une solution qui n'a pas été écoconçue. La solution d'une voiture électrique est une solution de facteur 1 : elle n'a pas remis en question l'utilisation de la voiture, mais à chercher à optimiser écologiquement parlant cette solution. Enfin, l'utilisation d'un vélo est une solution de facteur 4 : l'impact est réduit drastiquement.

Dans nos choix, il faut se méfier des reports. Cela est peut se produire lorsqu'une solution permet de réduire l'empreinte environnementale directe, mais augmente son empreinte indirecte. C'est par exemple le cas d'un véhicule électrique. À l'usage, son empreinte est bien moindre par rapport à un véhicule thermique, mais il faut créer et recycler les batteries de ces véhicules, ce qui est plus polluant que la création et le recyclage d'un réservoir de carburant.

Enfin, une solution peut être globalement meilleure, mais cela décuple son utilisation et au final a une empreinte écologique plus importante. C'est par exemple ce qui s'est passé avec la mise en place de la 5G en Corée du Sud.

2.1. Les fonctionnalités utiles

Alizée Colin (lebondigital.com) indique « un site est fini lorsqu’il n’y a plus rien à enlever et non à ajouter ». Cette phrase surprenante résume très bien la qualité première attendue pour un site internet écoconçu : la frugalité. Nous avons tous tendance à vouloir enrichir nos sites internet de nouvelles fonctionnalités, de nouvelles pages. Le terme enrichir fait penser que le site s'améliore, mais en fait c'est comme des aliments trop riches : ils nous font grossir et nous retrouvons en surcharge pondérale voire obèse ! Il en va de même pour les logiciels et en particulier les sites internet, certaines personnes parlent d'obésiciel ou de gras numérique ! Il est donc nécessaire de commencer une cure d'amincissement pour nos sites existants et de faire attention au régime alimentaire de nos futures créations.

Près de la moitié (45%) des fonctionnalités d'une application ne sont jamais ou très rarement utilisées. Il est donc stratégiquement plus intéressant de se concentrer sur les fonctionnalités vraiment utiles. Moins de lignes de code à produire cela a pour conséquence plus de temps à consacrer à la qualité du code, à l'accessibilité, à la sécurité, au respect des règles du green IT…

Cette bonne pratique est difficile à mettre en œuvre, car il faut convaincre ses clients, sa hiérarchie et ses collègues et faire preuve de beaucoup de pédagogie ! Pourtant sur le papier c'est la plus simple à réaliser puisque justement, il y a moins de chose à créer. Néanmoins c'est sans l'ombre d'un doute, celle qui aura le plus gros impact sur l'empreinte numérique de votre site internet ! Comme quoi la paresse est une bien belle qualité !

Pour chaque page internet ou fonctionnalité, il est important de se poser la question de sa réelle utilité et une fois en place de consulter les statistiques d'utilisation pour vérifier de sa pertinence.

Il est préférable d'adopter une approche "mobile first", c'est-à-dire en concevant le site en premier lieu pour les smartphones avant d'envisager les plus grands écrans. La faible taille de l'écran, nous incite à nous concentrer sur l'essentiel.

2.2. Le design

Le design d'un site est très important pour le marketing, pour l'image de marque, pour donner envie au visiteur… Et les graphistes effectuent souvent un travail très esthétique et attrayant. Néanmoins, il faut bien être conscient que le style appliqué à une page doit être considéré comme un plus permettant d'embellir la page, mais ne doit en aucun cas être essentiel pour la consultation ou l'interaction avec la page.

Pour concevoir une interface élégante et à la fois légère, il est important que les graphistes sachent ce qui est techniquement possible de faire pour donner du style uniquement avec du CSS sans avoir recours à des images. S'il est possible de se passer d'images pour styliser une bordure par exemple, cela permet d'économiser des ressources.

Il est possible par exemple de donner une ombre à une zone en utilisant la propriété CSS box-shadow. Les bordures peuvent être agrémentées de bords arrondis avec la propriété border-radius. Une image de fond peut avantageusement être remplacée par un fond en dégradé de couleur. Les différentes valeurs de la propriété background permettent de créer des effets très variés : linear-gradient(…), radial-gradient(…) et conic-gradient(…).

D'autres effets sont prévus lorsque les CSS4 seront implémentées par les navigateurs…

3. Les images

Les images sont un élément fondamental pour un site internet. Elles permettent de lui donner une identité graphique et de le rendre attrayant. Néanmoins, il faut être attentif à deux choses : d'une part, le poids qu'elles représentent et d'autre part, l'information qu'elles apportent.

Concernant le poids, les images sont beaucoup plus volumineuses que le contenu textuel évoqué jusqu'à présent (HTML, CSS et JavaScript). Il va donc être nécessaire de choisir attentivement leur nombre (lesquelles sont réellement nécessaires ?), leur taille et leur format.

Concernant l'accessibilité, il faut être attentif à ce que l'image soit correctement retranscrite aux internautes utilisant un lecteur d'écran.

3.1. Le nombre d'images

Le premier réflexe à avoir pour un site écoconçu est l'évitement. Il faut donc se poser la question de l'apport d'une image pour le site. Si elle n'a pas une plus-value importante, il peut être judicieux de ne pas la mettre ! De plus, de nos jours, une charte graphique simple, épurée et avec seulement quelques images bien mises en valeur est beaucoup plus tendance qu'un site surchargé d'images.

3.2. Les formats d'images

Il existe une multitude de formats d'images supportés par le web. D'une part les formats matriciels (PNG, JPEG, GIF…) et de l'autre les formats vectoriels (SVG principalement). Les formats matriciels définissent la couleur de chaque pixel de l'image alors que les formats vectoriels définissent des formes géométriques (rectangles, ellipses, segments de droite, courbes…).

3.2.1. Les logos, les icônes et les schémas

Le SVG est un format vectoriel. L'avantage de ce format est que, quel que soit le facteur de zoom, l'image est toujours parfaite sans aucun effet de pixélisation. Ce format est donc bien adapté pour un logo, un schéma, un dessin ou une icône, mais il n'est pas adapté pour une photo puisque celle-ci peut difficilement être réduite à des formes géométriques à moins de souhaiter un effet artistique particulier ! Le SVG est un langage utilisant des balises comme le HTML. Il est donc possible de l'éditer à l'aide d'un éditeur de texte.

Exemple :

Ce fichier peut sembler complexe, mais il possible de le comprendre dans les grandes lignes. Tout d'abord, il contient une balise racine <svg>. Celle-ci contient une balise <defs> incluant une balise <style> définissant deux styles : ap qui est utilisé pour l'arrière-plan et pp pour le premier plan. La première balise <rect> définit un rectangle couvrant toute l'image et permet de colorier tout le fond avec la couleur bleu. La seconde balise <rect> permet de dessiner le rectangle blanc du bas du logo. Enfin les balises <path> définissent des chemins constitués de courbes (définie à l'aide de points de contrôle de courbes de Bézier), d'arcs de cercle et de segments de droite.

Cette image pèse moins de 2Ko. Une image au format PNG équivalente avec un format de 100×100 pixels pèse 4 Ko soit plus de deux fois plus avec l'inconvénient d'obtenir une image pixélisée si elle est zoomée.

Il est possible de créer des images vectorielles avec des outils tels que Inkscape (sous licence GNU GPL), Adobe Illustrator (propriétaire) ou d'utiliser des convertisseurs en ligne.

Le format PNG est un format d'image ouvert contrairement au GIF (Graphics Interchange Format) qui est propriétaire. Il utilise une compression sans perte et est bien adapté aux images ayant des grands aplats de couleurs unies (permettant une compression efficace). Même si la règle d'utiliser le format SVG pour les logos, schémas et icônes fonctionne plutôt bien, il se peut qu'une image PNG soit plus légère si l'image est très complexe et requière la définition d'un très grand nombre de chemins en SVG. Il ne faut donc pas hésiter à comparer.

Les fonts icônes sont une police de caractères où chaque caractère représente une icône à la place d'un caractère. Cela a l'avantage de ne nécessiter le téléchargement que d'un seul fichier, la font, pour l'ensemble des icônes du site. Les caractères d'une police sont toujours définis vectoriellement afin de pouvoir parfaitement s'afficher, quelle que soit la taille de la police.

3.2.2. Les images animées

Il y a quelques décennies, le GIF animé était la grande tendance du web : le site était actif et donnait une image dynamique… De nos jours, c'est beaucoup moins à la mode et c'est une bonne chose ! D'une part, cela constitue un élément de distraction qui est perturbant pour la plupart des personnes, mais qui peut rendre le reste du contenu inaccessible pour des personnes ayant des troubles de l'attention par exemple. D'autre part, un GIF animé est plus consommateur de ressources qu'une courte vidéo équivalente, qu'un PNG animé (Animated Portable Network Graphics) ou qu'un SVG animé. Ce dernier est à privilégier, car en plus d'être très léger, il n'est pas toujours parfaitement lisse, quelle que soit la taille d'affichage.

Dans un SVG animé, les éléments graphiques qui doivent bouger ensemble doivent être regroupés à l'aide d'une balise <g>. Au sein de celle-ci une balise <animateTransform> est ajoutée. Celle-ci est paramétrée avec différents attributs. L'attribut type pour indiquer le type de mouvement :

Les attributs begin et dur définissent respectivement le moment du commencement du mouvement et sa durée. Ces deux valeurs sont indiquées en secondes avec un s derrière. Exemple : 2s pour deux secondes.

Les attributs from et to permettent de définir la position initiale et la position finale pour la transformation.

Par exemple, en reprenant le logo de l'ENI, il est possible de l'animer en ajoutant une rotation.

3.2.3.  Les photographies

Les APN ont des capteurs de plus en plus performants et produisent donc des photographies avec une meilleure résolution. Le problème est que ces fichiers images sont également de plus en plus gros. Il est donc important de faire un choix quant au format utilisé, au taux de compression, à la taille et à la résolution pour ces photographies.

Le format JPEG utilise une compression avec perte ou sans perte. Il est donc nécessaire de choisir le bon compromis entre une image parfaite et un poids d'image faible. Néanmoins la perte de qualité de l'image due à sa compression permet d'obtenir pour une photo des fichiers moins volumineux qu'avec du PNG. L'avantage de ce format est qu'il est supporté parfaitement par tous les navigateurs.

Ces dernières années de nouveaux formats d'images ont fait leur apparition. Ils ont pour objectifs de proposer des alternatives au format JPEG en corrigeant ses défauts (artefacts visibles avec une forte compression et non support de la transparence).

Le format WebP est un format proposé par Google permettant une meilleure compression que le JPEG à qualité équivalente. Le gain est d'environ 30%. Le problème est que ce format n'est supporté que récemment par la plupart des navigateurs.

Le format AVIF est un format à usage gratuit proposé par une alliance de grosses entreprises (Microsoft, Google, Vimeo, Amazon, Netflix…). Il est encore plus performant que le WebP (gain de l'ordre de 20%). Attention : ce format n’est pas supporté par défaut par tous les navigateurs.

Avec les dernières versions de GIMP, il est possible d'exporter une image dans le format WebP ou AVIF. Il est également possible d'utiliser un convertisseur en ligne ou installé sur votre machine.

Exemple avec une image de test :

Il est possible de proposer plusieurs formats d'image afin de limiter l'utilisation du réseau et que n'importe quel navigateur puisse afficher l'image. Pour cela, la balise <picture> permet lister les fichiers à utiliser par ordre de préférence. Si le navigateur ne supporte pas le format alors il passe au suivant. À la fin, une balise <img> permet d'afficher une image si aucun des formats précédents n'est supporté. C'est sur cette balise <img> que doit être positionnée l'alternative textuelle à l'image (cf. paragraphe les alternatives textuelles) et le type de chargement (cf. paragraphe le chargement paresseux) qui sont utilisés quel que soit le format d'image utilisé par le navigateur.

Syntaxe :

<picture>
  <source srcset="image 1" type="type MIME de l'image 1"> 
 <source srcset="image 2" type="type MIME de l'image 2">
…
  <img src="image n" alt="..." loading="eager|lazy">
</picture>

Exemple :

Seule l'image supportée par le navigateur est téléchargée. Dans cet exemple, Chrome télécharge l'image au format AVIF. Firefox télécharge l'image au format WebP et Internet Explorer télécharge l'image au format JPEG. Il est possible de vérifier cela en consultant l'onglet réseau des outils du développeur de chaque navigateur.

Le fait de stocker plusieurs images sur le serveur à la place d'une seule est écologiquement très vite rentabilisé, car il faut deux fois plus d'énergie pour transporter une donnée que pour la stocker pendant un an (source GreenIT.fr).

Pour utiliser différents formats pour une image de fond, cela est plus compliqué. Avec les CSS 4 (encore à l'état de brouillon), il devrait être possible d'utiliser également un ensemble d'images pour que le navigateur utilise celle qu'il est capable d'afficher. Firefox est le premier et le seul navigateur à le proposer pour le moment.

Exemple :

La première règle background-image est définie pour les navigateurs ne supportant pas encore image-set et la seconde règle background-image écrase celle-ci si le navigateur le supporte.

À l'heure actuelle, pour réaliser l'équivalent sur l'ensemble des navigateurs, il est nécessaire d'utiliser un code JavaScript afin d'ajouter des classes (webp ou notwebp, avif ou notavif) à la balise HTML selon le support de ces formats par le navigateur. Vous pouvez trouver par exemple sur GitHub leechy/imgsupport qui réalise cela.

Dans le fichier HTML :

Il suffit ensuite d'écrire des règles CSS en tenant compte de ces classes :

Dans cet exemple, un navigateur supportant le format AVIF prend en compte que la première règle CSS. Un navigateur supportant WebP, mais pas AVIF met en œuvre uniquement la seconde. Il est important de bien préciser dans ce cas .notavif, car sinon les deux premières règles sont appliquées et les deux images sont chargées ! Enfin les navigateurs ne supportant ni AVIF, ni WebP utilisent la dernière règle CSS.

3.2.4. La transparence

Un critère de choix important pour la sélection du format d'une image est le support de la transparence. Parmi les formats cités précédemment, seul le format JPEG ne gère pas la transparence. Les formats SVG, PNG, WebP et AVIF supportent sans problème la transparence.

3.3. La taille

La taille des écrans des visiteurs de nos sites web est extrêmement variable allant de l'écran d'un petit smartphone à celui d'une grande télévision. Il n'est pas nécessaire de faire charger des images immenses pour les afficher en tout petit sur un smartphone. Pour une image au format vectoriel, il n'y a pas de problème, mais pour les images au format matriciel, il est préférable d'utiliser différentes résolutions d'images. Cela permet un gain substantiel puisque toujours avec l'image de test précédente voici la taille des fichiers :

En téléchargeant l'image à la bonne dimension, il est possible de diviser presque par dix son poids.

À nouveau, la balise <picture> vient à notre rescousse pour proposer différentes images en fonction de la taille de l'écran (ou plus précisément de la taille du viewport si le navigateur n'est pas en plein écran). Il est possible d'utiliser des media queries pour choisir l'image avec la résolution la mieux adaptée.

Syntaxe :

<picture>
  <source srcset="image 1" media="mediaquery pour l'image 1">
  <source srcset="image 2" media="mediaquery pour l'image 2">
…
  <img src="image n" alt="…">
</picture>

Exemple :

Il est également possible de proposer uniquement des photos de petite taille, quelle que soit la taille de l'écran avec éventuellement un lien pour télécharger l'image avec une meilleure résolution.

3.4. La compression

Les formats JPEG, WebP et AVIF possèdent tous des algorithmes de compression avec ou sans perte. Il est possible régler le taux de la compression pour ajuster le compromis entre la qualité de l'image et son poids. Une image JPEG provenant d'un appareil photo ou d'un smartphone n'est généralement pas ou peu compressé. Il est donc possible d'obtenir un gain significatif en ajustant ce taux. Il est possible de comprimer assez fortement une image tout en conservant une image de bonne qualité pour un site internet (mais pas pour un tirage photo). D'une image à une autre, le taux de compression acceptable n'est pas le même. Par exemple, avec le format JPEG, une photographie avec un ciel dégradé ne peut pas subir un fort taux de compression sans que l'image subisse des artefacts visibles.

Finalement, il est souvent nécessaire de produire beaucoup d'images :

• Pour les formats supportés par les différents navigateurs ;
• Pour les tailles différentes ;
• Pour tester différents facteurs de compression.

Réaliser cela image par image avec un logiciel de retouche d'images est très chronophage. Il est donc intéressant d'automatiser cela. Par exemple, il est possible d'utiliser un convertisseur tel que joedrago/colorist (sur GitHub) et d'écrire un script permettant avec son aide de générer tous les fichiers souhaités.

Voici un exemple de script PowerShell permettant de convertir les images au format JPEG présentes dans le répertoire imagesSources en images aux formats JPEG, WebP et AVIF, en taille native, en 800×600 (en supposant que l'image à une résolution 4:3) et en 400×300 :

Ce fichier doit être enregistré avec l'extension .ps1 dans un dossier contenant le dossier imagesSources avec les images à convertir et un dossier imagesCompressees initialement vide.

Bien évidemment ce script est à adapter en fonction de vos besoins (taille des images, format, qualité…) !

4. Le cache

Le cache est un très bon moyen pour optimiser son site internet et ainsi réduire son empreinte environnementale. Il existe plusieurs niveaux de cache.

4.1. Le cache navigateur

Lorsqu’un visiteur navigue pour la première fois sur votre site, il charge tous les éléments pour afficher votre page internet (page HTML, feuilles de styles CSS, scripts Javascripts, images…). Tous ces éléments sont conservés en cache un certain temps. Ainsi, s'il navigue sur une autre page du site, il n'a pas besoin de tous les fichiers, mais seulement de ceux qu'il ne possède pas. Si vous avez le logo de votre entreprise sur toutes vos pages, une feuille de style commune… ces éléments ne sont pas téléchargés à nouveau. Si l'internaute revient sur une page déjà visitée, normalement aucune ressource n'est envoyée depuis le serveur ce qui permet de le soulager et de moins solliciter le réseau.

Pour indiquer le temps pendant lequel le navigateur doit utiliser la ressource en cache plutôt que de la redemander au serveur, il est nécessaire de préciser dans l'en-tête HTTP Cache-Control: max-age=tempsEnSecondes, public. En configurant, Apache, il est possible de lui faire intégrer cette information dans ses réponses. Il faut le faire dans le fichier de configuration d’apache ou dans un fichier .htaccess à la racine de son site.

Syntaxe :

<filesMatch "filtreFichier">
    Header set Cache-Control "max-age=tempsEnSecondes, public"
</filesMatch>

La chaîne de caractère filtreFichier est une expression rationnelle PCRE.

Il est possible par exemple de conserver en cache les pages, les scripts et les feuilles de styles pendant dix jours (864 000 secondes) et les images pendant un an (31 536 000 secondes).

Pour vérifier le bon fonctionnement, il faut se rendre pour la première fois sur l'une des pages de notre site et visualiser la réponse à la requête HTTP envoyée dans les outils du développeur.

Nous pouvons constater que l'en-tête contient bien la ligne Cache-Control.

Sinon actualisons la page, nous obtenons un code 304 pour indiquer que la page est celle récupérée en cache :

Lorsque la ressource demandée est en cache, mais que celle-ci a expirée. Une requête est envoyée au serveur pour savoir s'il est encore valable avec comme en-tête :

Si celle-ci n'a pas changée et le serveur renvoi le code 304 afin que la ressource en cache soit utilisée. Sinon la nouvelle version de la ressource est envoyée avec un code 200.

4.2. Le cache du serveur web

Le serveur Apache peut conserver également le résultat de l'exécution de code PHP pour éviter de la régénérer à chaque fois. Cela peut être réalisé en configurant Apache avec les lignes suivantes :

CacheEnable mem répertoireDuCache
MCacheSize tailleDuCacheEnOctets
MCacheMaxObjectCount nombreDElementsEnCache
MCacheMinObjectSize tailleMinimale
MCacheMaxObjectSize tailleMaximale

Exemple :

Ainsi, si plusieurs internautes demandent successivement une même page générée dynamiquement en PHP, elle est générée pour être envoyée au premier et mise en cache sur le serveur et le second reçoit la page stockée dans le cache. Cette technique est particulièrement intéressante si toutes les pages sont générées dynamiquement à l'aide d'un modèle de page.

4.3. Le cache de PHP

La génération et l'envoi d'une page dynamique sont plus coûteux que l'envoi d'une page statique directement. C'est pourquoi pour accélérer le rendu des pages dynamiques, le code PHP qui a déjà été analysé et transformé en langage intermédiaire (l'Opcode) est sauvegardé en cache pour éviter de refaire ces étapes. Jusqu'à la version 5.4 de PHP, il était nécessaire d'effectuer des étapes de configuration pour le mettre en place. Depuis PHP 5.5, l'OpCache est installé et activé par défaut. Il n'y a donc rien à faire si vous utilisez une version récente de PHP.

4.4. Le cache du serveur de bases de données

Il existe également la possibilité d'utiliser un cache pour les requêtes fréquemment envoyées à votre serveur de base de données. Il faut alors utiliser un produit supplémentaire tel que la solution open source Redis. Si les autres niveaux de cache ont été correctement mis en place, ce cache n'est nécessaire que sur un site internet sollicitant beaucoup la base de données.

5. Conclusion

Écoconcevoir un site internet peut sembler une tâche ardue, mais j’espère vous avoir convaincu que cela n’est pas plus compliqué que cela et que petit à petit, les réflexes d’écoconception vous viendront naturellement à l’esprit lors de vos créations : Est-ce que cet élément est essentiel ? Est -ce qu’il peut être évité ? Est-ce qu’il peut être remplacé par une alternative moins gourmande ? Est-ce la meilleure implémentation possible ?

Dans cet article, seuls quelques aspects du numérique responsable ayant le plus d’impacts ont été abordés. Il y a bien d’autres aspects à prendre en compte. Tout d’abord, des choix techniques de développements ont des impacts significatifs (l’utilisation de framewoks et de bibliothèques, les médias audio et vidéo, les animations, les cartes, les traitements côté client et côté serveur, la gestion des données, les impressions…). Ensuite, le choix d’un hébergeur vert peut réduire l’empreinte écologique de votre site. Enfin, il faut apprendre à auditer un site pour réfléchir aux aspects à retravailler. Retrouvez l’intégralité de mon expertise sur le sujet de l’écoconception, mais également sur l’accessibilité à tout public de nos sites internet dans mon livre « Green IT et accessibilité - Développez votre site web Numérique Responsable » aux éditions ENI (sortie le 13 octobre 2021).

Hervé BOISGONTIER

Formateur en développement informatique au sein d'ENI École Informatique à Nantes. Depuis près de 10 ans, avec différents langages, je forme à la programmation et l’art du développement informatique. Depuis longtemps, je m’intéresse au développement durable et depuis quelques années, comment le mettre en pratique dans notre métier d’informaticien ou d'informaticienne.

J’ai publié plusieurs livres aux éditions ENI dont le dernier : « Green IT et accessibilité – Développez votre site web Numérique Responsable ».