Écoconception d’un site internet

Paru dans le magazine Programmez n°251

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, donnée il y a plus de trente ans, 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 ne 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 dirigeant 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 3/4 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 croît d’environ 6 à 9% par an ! Ces chiffres proviennent de l’Ademe et du Shift Project.

1.1 Le green for IT

Cette démarche vise à rendre plus vert, 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 ses é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 aboutir à 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 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ées 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 a cherché à 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 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, dans un article de son blog 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 nous retrouvons en surcharge pondérale ! 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 un élément 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és 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…).

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

Le SVG (Scalable Vector Graphics) 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 :
le logo ENI ci-contre et son code SVG ci-dessous

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éfini 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 (à l’aide de points de contrôle de courbes de Bézier), d’arcs de cercle et de segments de droite.

Cette image ne pèse que 1 959 octets, soit moins de 2Ko. Une image au format PNG équivalente avec un format de 100×100 pixels pèse 4 093 octets, 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 (Portable Network Graphics) 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 de 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 requiert 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

Les images animées

Il y a quelques décennies, le GIF animé était la grande tendance des sites internet : 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 et 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 :

Type de mouvement : Valeur de l’attribut
Translation : translate
Rotation : rotate
Mise à l’échelle : scale
Déformement horizontal : skewX
Déformement vertical : skewY

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.

Les photographies

Les appareils photos 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 volumineux. 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 (Joint Photographic Experts Group) 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 objectif 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%) mais n’est à l’heure actuelle supporté que part les navigateurs Chrome, Opéra et Firefox.

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 :

Format

Poids

Gain par rapport au JPEG

JPEG

872 Ko

0 %

Webp

479 Ko

45 %

AVIF

218 Ko

75 %

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 de 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 et le type de chargement 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. Une ancienne version de 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 :

.fondImage {
background-image: url(‘images/fleurs.jpg’);
background-image: image-set(
    url(‘images/fleurs.webp’) type(“image/webp”),
    url(‘images/fleurs.jpg’) type(“image/jpeg”)
  );
…
}

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 des exemples 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 :

.avif .fondImage {
background-image: url(‘images/fleurs.avif’);
}
.webp.notavif .fondImage {
background-image: url(‘images/fleurs.webp’);
}
.notwebP.notavif .fondImage {
background-image: url(‘images/fleurs.jpg’);
}

Dans cet exemple, un navigateur supportant le format AVIF ne 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.

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 comme le montre la taille des fichiers, toujours avec l’image de test précédente :

1200×1600

jpeg : 872 Ko

Webp : 479 Ko

AVIF : 218 Ko

600×800

jpeg : 271 Ko

Webp : 158 Ko

AVIF : 84 Ko

300×400

jpeg : 88 Ko

Webp : 55 Ko

AVIF : 33 Ko

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 de 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ée. 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 :

$fichiers = Get-ChildItem ‘.\imagesSources\*.jpg’
foreach ($fichierSource in $fichiers) {
$baseNom = $fichierSource -replace ‘^(.*\\)imagesSources(\\.*)\.jpg$’, ‘$1imagesCompressees$2’
$info = colorist identify $fichierSource –json
$w = $info -replace ‘^.*”width”:(\d+).*$’, ‘$1’
$h = $info -replace ‘^.*”height”:(\d+).*$’, ‘$1’
if ($w -lt $h) { #portrait
$largeur = 600
} else { #paysage
$largeur = 800
}
#Grandes
colorist convert $fichierSource $baseNom’-Grande.jpg’ -q 45
colorist convert $fichierSource $baseNom’-Grande.webp’ -q 60
colorist convert $fichierSource $baseNom’-Grande.avif’ -q 55 –speed 0
#Moyennes
colorist convert $fichierSource $baseNom’-Moyenne.jpg’ -q 45 –resize $largeur
colorist convert $fichierSource $baseNom’-Moyenne.webp’ -q 60 –resize $largeur

colorist convert $fichierSource $baseNom’-Moyenne.avif’ -q 35 –speed 0 –resize $largeur
#Petites
$largeur /=2
colorist convert $fichierSource $baseNom’-Petite.jpg’ -q 35 –resize $largeur
colorist convert $fichierSource $baseNom’-Petite.webp’ -q 45 –resize $largeur
colorist convert $fichierSource $baseNom’-Petite.avif’ -q 25 –speed 0 –resize $largeur
}

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 JavaScript, 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).

<filesMatch “.(css|js|html)$”>
Header set Cache-Control “max-age=864000, public”
</filesMatch>
<filesMatch “.(ico|webp|png|gif|svg|avif|jpg)$”>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>

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.

HTTP/1.1 200 OK
Date: Sun, 25 Jul 2021 12:58:29 GMT
Server: Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.7
Last-Modified: Sun, 25 Jul 2021 12:58:27 GMT
ETag: “712-5c7f23156590a”
Accept-Ranges: bytes
Content-Length: 1810
Cache-Control: max-age=86400, public
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html

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

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

HTTP/1.1 304 Not Modified
Date: Sun, 25 Jul 2021 13:02:32 GMT
Server: Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.7
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: “712-5c7f23156590a”
Cache-Control: max-age=86400, public

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 si elle est encore valable avec comme en-tête :

If-Modified-Since: dateDuFichierEnCache

Si celle-ci n’a pas changée, le serveur renvoie 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 regé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 :

CacheEnable mem /cache
MCacheSize 100000000
MCacheMaxObjectCount 1000
MCacheMinObjectSize 100
MCacheMaxObjectSize 1000000

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 puis 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 si compliqué 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’impact ont été abordés. Il y a bien d’autres aspects à prendre en compte. Tout d’abord, des choix techniques de développement ont des impacts significatifs (l’utilisation de frameworks 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.

Présentation de l’auteur

Formateur en développement informatique sur différents langages de programmation depuis près de 10 ans, Hervé Boisgontier est intéressé par le développement durable depuis longtemps. À ce titre, il a suivi les formations « Écoconception de services numériques » par GreenIT.fr et « Développer des sites web accessibles » par Access42 et obtenu les certifications associées.

Il a publié plusieurs livres aux éditions ENI dont Green IT et accessibilité – Développez votre site web Numérique Responsable.

Hervé Boisgontier

Notre expert Green IT