Top 10 des Best Practices pour un développement web plus Green - Partie 1

Nous commençons juste à en prendre conscience de manière globale : la gestion de l’énergie, du besoin à l’utilisation, est l’un des enjeux majeurs de notre siècle. Et Internet n’échappe pas à ce défi. Avec un poids moyen de page multiplé par plus de 100 en 20 ans passant ainsi de 14 ko en 1995 à plus de 2,3 Mo en 2016. En comparaison, c’est autant que Doom sorti en 1993 ! (Pour être plus précis c’est autant que le binaire d’installation de la version shareware du fameux FPS). On estime qu’en 2030 les besoins en énergie pour faire fonctionner Internet seront équivalents aux dépenses mondiales de 2008 tout secteur confondu () !

Les initiatives fleurissent un peu partout dans le secteur des applications numériques et des sites web :

  • des hackathons orientés « Green Code » pour optimiser l’efficience d’une application ou pour trouver des nouveaux usages, par exemple, au sein des Smart Cities,
  • des associations telles que le club Green IT regroupant des entreprises du Numérique qui mettent en commun leurs compétences et expériences dans ce domaine pour identifier et formuler les bonnes pratiques ainsi que les normes qui en découlent,
  • des projets d’entreprise tels que celui de la banque de Fribourg qui a donné lieu à l’ouvrage « Eco-conception web/les 115 bonnes pratiques ».

Cet article est un résumé de ce référentiel en 10 bonnes pratiques essentielles. A qui s’adresse-t-il ? A nous : Développeurs de site Web, d’applications mobiles ou encore de services applicatifs online ! Quel rôle pouvons-vous jouer dans cette recherche de l’efficience des logiciels et des outils numériques ?

C’est ce que je souhaite vous montrer à travers ces 10 conseils applicables de la phase de conception jusqu’à l’hébergement ; avant, pendant et après la phase de développement. Nous allons nous concentrer sur les plus marquantes afin qu’elles puissent éventuellement vous donner des idées pour les appliquer et les adapter à votre contexte. Certaines font déjà partie de vos pratiques car elles permettent également d’améliorer ou de moins dégrader les performances.

Attention cependant, car avec la recherche de l’efficience énergétique, vous serez parfois amenés à faire des choix entre efficience et sécurité absolue, performance maximum ou encore disponibilité continue du service. Tout est ici une question de pertinence dans un contexte d’utilisation donné. L’efficience est l’efficacité d’utilisation des ressources pour parvenir au résultat attendu.

Conception et Design

Les 3 premières recommandations sont générales et s’appliquent dans la phase précédant le développement : la conception. Aujourd’hui, environ 80% des gains escomptés dans les consommations énergétiques seront la conséquence d’efforts réalisés pendant les phases amont et aval du développement.

#BestPractice 1 : ne développez et ne maintenez que les fonctionnalités essentielles

Partons d’un constant intéressant : presque 50% des fonctionnalités développées ne sont pas utilisées. Il faut donc se demander quel est l’impact de ce superflu : données stockées et code exécuté pour l’alimentation sont autant de sources de consommation d’espace de stockage de RAM et de CPU qui ont une empreinte énergétique inutile. Et si l’argument énergétique n’est pas suffisant, l’argument économique devrait permettre de convaincre la majorité d’entre nous car un code en production est une source de bug ou de maintenance évolutive qui a un coût non négligeable. Si vous êtes en capacité d’identifier le code associé à une fonctionnalité non nécessaire : débarrassez-vous en maintenant !

Pour connaître les fonctionnalités qui intéressent vos utilisateurs, mettez en place une remontée d’indicateurs métier pertinents grâce à des outils. Et s’ils ne sont pas assez fins ou adaptés à votre contexte d’usage, pourquoi ne pas vous essayez au développement d’aspect par exemple ?

#BestPractice 2 : choisissez judicieusement vos frameworks et librairies

Certains frameworks, librairies ou API sont connus pour être très gourmands en ressources. Par exemple, pendant longtemps en Java, le parsing XML n’était réalisable qu’au travers de deux API : JDom et SAX. La première était réputée très consommatrice en mémoire car l’ensemble du fichier XML y était chargé sous forme d’arbre (DOM). Cependant elle offrait des méthodes de parcours beaucoup plus puissante que son homologue plus économe, SAX qui reposait sur une notion de streaming. Finalement est apparue la JSR 173 définissant l’API StaX qui regroupe le meilleur des deux précédentes, réconciliant ainsi l’utilisabilité et les performances.

Mon conseil : faites le tour de vos communautés, réseaux sociaux, blogs favoris pour effectuer un choix averti. N’hésitez pas également à partager vos trouvailles ou expériences et à alimenter les pull requests, issues, etc. des solutions que vous utilisez, Open Source ou non.

Développement Client :

C’est avec la partie « Client » et plus particulièrement le navigateur Web que nous abordons les bonnes pratiques orientés Dev avec plusieurs domaines : les CSS, le JS et le DOM.

#BestPractice 3 : codez avec style

Le standard CSS existe depuis 20 ans et ne cesse d’évoluer pour nous apporter toujours plus de nouvelles fonctionnalités dans la définition du style de nos sites. La dernière version CSS3 apporte un lot important d’améliorations que nous avions l’habitude de coder à grand coup d’images, JS et autres hacks : transparence, bords arrondis, positionnements ou encore transitions et animations. Leur rendu est, grâce à cette standardisation, optimisé par les moteurs de rendu des navigateurs, il est donc important de toujours préférer une propriété CSS à :

  • une image pour, par exemple, dessiner des cadres :
#cadre {
   border-radius: 10px;
 }
  • ou du Javascript pour les animations

Les spritesheets

Le CSS via la notion de spritesheet permet de limiter le nombre d’aller-et-retours nécessaires pour télécharger des images, car l’idée est d’avoir une seule grande image qui regroupe toutes les images de notre site.

spritesheet google

spritesheet google

Pour afficher le titre :

logo google

il suffira d’écrire :

<div id="title"></div>

#title{
   background:url("google_sprites.png") 0 0 no-repeat;
   background-position: 0 100%;
   background-size : 500%;
   height: 10%;
   width: 10%;
   padding:0;
 }

On charge donc l’image complète et on ajuste la position de l’arrière-plan et la taille du conteneur pour la limiter à la zone que l’on souhaite afficher. Notez au passage que c’est l’image d’arrière-plan que l’on décale en position verticale… Les ajustements en pourcentage permettent quant à eux de rendre le tout « responsive ».

Ce procédé a également l’avantage de limiter l’effet de clignotement lors des animations sur un mouseover car on ne change pas d’image mais l’on effectue une transformation CSS. Les sprites sont aussi souvent utilisés par les développeurs de Jeux Vidéos.

Les sélecteurs, déclarations …

Quelques autres bonnes pratiques simples et efficaces avec les CSS :

  • Utilisez des sélecteurs qui ciblent directement une classe ou un id plutôt qu’une hiérarchie ou une sélection par attributs.

On pourrait choisir une colonne d’entête par :

 

table[title="multicolort"] > thead > tr > th {...}
  • Mais la méthode la plus efficiente serait de créer une classe qui cible directement ces éléments :

 

.table-multicolor-header{...}
  • Groupez les déclarations CSS identiques ou communes

Par exemple :

h1 {
 color : blue;
   font-family: Verdana;
 }
 h2 {
   color : blue;
   font-family: Verdana;
 }
 h3 {
   color : blue;
   font-family: Verdana;
 }

Peut être remplacé par :

h1, h2, h3 {
 color : blue;
   font-family: Verdana;
 }
  • Utilisez les notations CSS abrégées

Ainsi :

{
 margin-top : 10px;
   margin-right : 20px;
   margin-bottom : 30px;
   margin-left : 40px;
 }

Sera simplifié par :

{margin:10px20px30px40px;}
  • Modifiez les propriétés CSS en une seule fois en groupant les propriétés en classes en modifiant dynamiquement la classe affectée, cela évitera les activités de repaint/reflow du navigateur.

Préférez :

error-highlight {
     color : red;
     font-weight: bold;
   }
 
   $el.addClass('error-highlight');

à :

$el.css('color','red');
   $el.css('font-weight', 'bold');

#BestPractice 4 : dynamisez efficacement

Le Javascript subit beaucoup d’évolutions tant au niveau du langage que de son interprétation par les navigateurs. Avec l’apparition d’ECMAScript 6, il devient un vrai langage objet et beaucoup de constats sur l’efficience actuelle du langage pourraient être amenés à être revus dans les années à venir. Néanmoins, il reste quelques règles qui ne seront probablement jamais complètement obsolètes :

Validez votre code avec JSLint car une mauvaise syntaxe est souvent source d’approximation ou de mauvaise interprétation par le navigateur, ce qui induit des cyles CPUs inutiles pour l’exécution de la page,

Privilégiez les fonctions anonymes si cela ne nuit pas à la maintenabilité ou si l’efficience revêt une priorité plus élevée. L’interpréteur économisera la résolution du nom de la function,

Pour les appels des fonctions setTimeout() et setInterval() utilisez des fonctions plutôt que des chaînes de caractère. D’une manière générale, l’utilisation d’eval a un coût non négligeable en termes de consommation CPU de par l’introspection qu’elle nécessite.

Auteur : Guillaume Renaudin, Architecte SI, Web, Cloud – SQLI Nantes

1 réponse
  1. Frédéric Bordage dit :

    Bonjour,

    Merci pour ce résumé. Vous pouvez retrouver le référentiel complet, gratuit et ouvert sur https://collectif.greenit.fr/outils.html. Vous y découvrirez les nombreux autres outils proposés par la communauté française depuis… 2011 !

    La communauté propose notamment :
    – une certification « écoconception web »
    – le référentiel de 115 bonnes pratiques
    – décliné sous la forme d’une check-list
    – des méthodes d’évaluation
    – maturité environnementale ;
    – performance environnementale ;
    – empreinte environnementale.
    – Outils d’analyse automatique
    – maturité environnementale ;
    – performance environnementale ;
    – empreinte environnementale.
    – et une liste de discussion.

    Notez que ces outils sont gratuits (ou quasi) et ouverts. Et qu’ils ont été conçus, réalisés et sont maintenus par une communauté de plus de 70 organisations (cf : https://collectif.greenit.fr).

    Petite précision : l’écoconception ne vise pas à réduire la consommation électrique qui n’est pas le principal impact environnemental, mais plutôt à réduire la quantité de ressources informatiques (serveurs, bande passante, puissance du terminal utilisateur) nécessaire pour faire fonctionner le site web. C’est la fabrication des équipements qui pose le plus de problèmes environnementaux, il faut donc en fabriquer moins et les utiliser plus longtemps.

    Enfin, la conception est une étape clé où se situe les principaux leviers de réduction des impacts environnementaux. L’écoconception web doit donc se mener en priorité lors de la conception métier / fonctionnelle / UX, avant de s’intéresser aux lignes de code qui ne renferment (malheureusement) que 10 à 20 % du potentiel de réduction des impacts.

    Répondre

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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

Inscription newsletter

Ne manquez plus nos derniers articles !