Ecoconception web : 15 termes à connaître

Circuit breaker, feature flipping, lazy loading… Autant de concepts qui trouvent un contexte d’application dans le domaine de l’écoconception web.

Le premier terme apporte un mécanisme de résilience face aux problèmes de disponibilité de services. Le deuxième permet d’activer et de désactiver des fonctionnalités au vol. Le troisième, de ne charger des éléments qu’à l’affichage.

Nous les avons inclus dans la liste suivante, qui comprend douze autres termes allant des écolabels aux propriétés CSS en passant par des patterns applicatifs. Tous sont issus de l’ouvrage Écoconception web : les 115 bonnes pratiques (4^e édition ; auteur : Frédéric Bordage ; 12,90 € chez Eyrolles).

80Plus

On privilégiera les serveurs équipés d’une alimentation électrique conforme à cet écolabel (niveaux Platinium et Titanium). Et, par ailleurs, ceux estampillés Energy Star.

AllowOverride

On désactivera cette directive pour éviter que le serveur HTTP Apache remonte toute la hiérarchie des répertoires à la recherche des fichiers de configuration .htaccess.

Autoplay

Pour éviter la lecture automatique des sons et des vidéos, on ne mettra pas en place l’attribut autoplay dans les balises <audio> et <video>.
Pour éviter que le navigateur précharge une partie des fichiers, on règlera à none la valeur de l’attribut preload de ces mêmes balises.

Cache-Control

Ces en-têtes HTTP définissent la durée pendant laquelle un navigateur doit conserver une ressource dans son cache. Idéalement, cette durée sera la plus longue possible. Le navigateur ne réinterrogera ainsi pas le serveur (économie de requêtes HTTP, de bande passante et de cycles CPU côté serveur).

Circuit breaker

Ce mécanisme de « disjoncteur » peut « casser » le traitement d’une requête pour offrir une résistance aux pannes. En fonction de critères d’erreur (timeout, nombre d’échecs, éléments dans la réponse…), il va désactiver l’envoi de requêtes à un service et retourner une réponse de repli, en mode « dégradé ». Sous l’angle écoconception, cela permet de ne pas solliciter inutilement un service et le réseau.

CSS containment (compartimentation CSS)

Cette technique permet d’isoler un sous-ensemble d’une page, par l’intermédiaire de la propriété contain. En fonction du type d’indépendance (strict, content, size, layout, style et/ou paint), le navigateur :

– Recalcule le rendu pour le nœud indépendant et non pour l’entièreté de la page
– Ne fait pas le rendu du contenu des nœuds indépendants hors zone visible

Feature flipping

Cette technique permet d’activer et de désactiver des fonctionnalités « à chaud » (directement en prod, sans relivraison de code). On conditionne l’exécution du code de ces fonctionnalités en s’appuyant sur des flags. Du point de vue écoconception, cela allège les applications, leur impact en production et leur maintenance.

Lazy loading

La technique consiste à ne charger un élément que lorsque son emplacement devient visible à l’écran. En HTML5, on peut ajouter un attribut loading aux images et aux iframes pour que le navigateur ne télécharge que les images apparaissant à l’écran.

Linter

Les linters (analyseurs de code) vérifient que le code respecte des contraintes syntaxiques qui permettront aux interpréteurs de l’exécuter plus facilement. Et donc en consommant moins de ressources.

PWA (Progressive Web App ; application web progressive)

Si on développe une app mobile qui reprend tout ou partie d’un site web, il peut être judicieux de préférer une PWA à un développement natif. Souvent plus légères, elles permettent de réduire le risque d’obsolescence des terminaux mobiles et d’utiliser moins de bande passante.

Reflow / Repaint

Le reflow est le changement/recalcul de la position des éléments dans le DOM (Document Object Model). Pour l’éviter, on limitera les changements de propriétés de position, de dimensionnement, de contenu…
Le repaint est le changement d’apparence d’un élément du DOM. Pour l’éviter, on ne modifiera pas les propriétés stylistiques d’un élément.

Request collapsing

Ce pattern applicatif permet de combiner des requêtes ciblant le même objet. Et potentiellement d’utiliser la réponse pour servir toutes les requêtes. Il est adapté en cas de récupération, via un service tiers, de données appartenant au même domaine métier. Avec lui, on peut limiter la charge réseau, l’impact d’une latence élevée et les coûts dans le cadre de licences à la requête.

SPA (Single-Page Application ; application monopage)

Dans la mesure du possible, on privilégiera un site statique dont le contenu change très peu. Il pourra être mis en cache et ne sollicitera pas de serveur d’application ou de base de données. Quant à l’utilisation d’une SPA, on peut y penser si une partie d’un site web repose sur un nombre très limité de pages et délivre un service métier encadré.

TINYINT

Ce type d’entier consomme un octet (sa valeur peut donc aller jusqu’à 127). Il occupe moins d’espace de stockage – et consomme moins de CPU – que le SMALLINT (2 octets), l’INT (4 octets) et le BIGINT (8 octets).

Tree shaking

Un constat : on n’utilise souvent qu’une petite portion des bibliothèques JavaScript et des frameworks CSS. Lesquels ne s’appuient par ailleurs pas tous sur une architecture modulaire, contraignant à les télécharger dans leur entièreté.
Avec le tree shaking, on peut en éliminer le code « mort » ; c’est-à-dire non utilisé. Par exemple en s’appuyant sur un bundler comme Webpack. Celui-ci s’appuie sur les états import et export pour détecter les modules qu’il peut retirer des applications.