De l’écoconception logicielle (2/2)

Green-Eco-Friendly-Icons-leaf-plug

Le billet précédent s’attachait à présenter les principes généraux de l’écoconception logicielle.

Afin d'approfondir un exemple bien particulier, nous allons nous intéresser à présent à l’écoconception des applications et sites web (partie cliente), qui reposent globalement sur une architecture et une exploitation semblables.

Objectifs et cadre

Les impacts de telles applications sont :

  • La bande passante consommée, qui conditionne l’utilisation des serveurs et des composants réseau sur la ligne.
  • La consommation en ressources du navigateur (CPU principalement).

Les optimisations sont souvent reléguées en fin de projet et donc rarement appliquées du fait de l’urgence grandissante de la livraison du projet. Il faudrait intégrer ces optimisations dès le début du projet. Heureusement, beaucoup d’entre elles sont déjà appliquées et reconnues en tant que bonnes pratiques générales de développement et ne sont pas limitées à un but d’écoconception !

Rôle de l’intégrateur

Le potentiel de HTML5/Javascript et de CSS3 est énorme, il faut s’appuyer dessus. De nombreuses bibliothèques existent pour faire des applications ergonomiques, simples à implémenter et à faire évoluer.

Parfois, l’intégrateur se retrouve devant le fait accompli d’une interface trop complexe et trop spécifique. Il se limite alors au rôle de bidouilleur pour que l’interface soit parfaitement conforme aux maquettes. Le dialogue doit s’instaurer très tôt entre graphistes et intégrateurs. L’échange doit être permanent et permettre une mise en œuvre harmonieuse de la solution.

L’agilité et les bonnes pratiques associées sont primordiales !

CSS ou images ?

Le transport d’une image depuis le serveur et son affichage consomment plus de ressources que le recours à du CSS3.

Un exemple un peu basique est celui de la réalisation d’un cadre autour d’un paragraphe. Un cadre en image offrira peut-être plus de liberté en terme d’esthétique mais sera beaucoup plus léger au niveau du développement. La tendance étant au flat design, l’ergonomie sera peut-être elle aussi améliorée.

Optimisation des CSS

Il ne faut jamais embarquer du code CSS dans un fichier HTML. En effet, il n’y a alors pas de réutilisation possible, d’où plus de fichiers, plus de transferts, plus de temps de codage…

Afin de limiter la taille totale prise par le code CSS, on factorisera au maximum. Cela aura en plus pour effet de le rendre plus facilement extensible et réutilisable.

A première vue, on pourrait s’imaginer qu’avoir une seule libraire CSS pour stocker l’ensemble des styles est une bonne idée. On réduirait le poids total de la CSS et donc l’utilisation de bande passante, et on réduirait également la charge CPU. Il n’en est rien et il vaut mieux découper intelligemment la CSS en ayant une librairie de style par contexte. Par exemple, une pour le site d’e-commerce, une pour la page d’accueil, une pour le panier… Un utilisateur n’ayant pas nécessairement l’occasion de naviguer par tous les espaces, c'est là le compromis idéal.

Il convient de fournir une CSS d’impression optimale :

  • Elle permettra de limiter le nombre de feuilles imprimées.
  • Elle supprimera les contenus « inutiles »
  • Elle pourra utiliser une police économe en encre : Century Gothic, Garamond par exemple.

Sur un plan plus technique, l’optimisation des CSS passe également par l’utilisation de sélecteurs CSS efficaces, basés notamment sur des identifiants ou des classes.

On privilégiera également les notations CSS abrégées lorsque c’est possible. Par exemple :

Ecoconception_padding

Au moment du déploiement, minifier la CSS permettra de réduire le temps de chargement. On utilisera alors de préférence une minification statique (faite une seule fois, au moment du déploiement par exemple).

Si des ressources spécifiques doivent être transmises à certains navigateurs, on pourra utiliser des commentaires conditionnels pour que les autres navigateurs ne téléchargent pas inutilement ces ressources.

Optimisations au niveau des images

On évitera de redimensionner une image dans le code HTML mais plutôt une fois pour toutes avant le déploiement.

On pourra également regrouper les images de l’interface dans une seule, appelée sprite. On évite ainsi des allers-retours incessants client-serveur. Le découpage se fera alors dynamiquement en CSS. Cela entraîne un surcoût en ressources côté client mais celui-ci est compensé par l'économie de bande passante et une sollicitation moindre des serveurs. Des services en ligne sont capables de générer le sprite et la feuille de style associée, par exemple https://draeton.github.io/stitches/

Conclusion

Comme on l’a vu, l’éco-conception web fait majoritairement appel à des bonnes pratiques déjà connues et utilisées. Ce n’est pas très compliqué à mettre en œuvre, cela demande juste une certaine rigueur dans le développement. Toutes ces optimisations permettent à première vue des gains faibles au niveau unitaire mais lorsqu’on prend en compte le nombre d’accès potentiels à l’application, cela prend plus de sens.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.