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

#BestPractice 5 : avec prudence le DOM tu manipuleras

Le DOM est un outil très puissant qui facilite la création et la maintenance de pages complexes et dynamiques. Il est nécessaire d’observer quelques règles de prudence dès lors qu’on le manipule directement :

  • Mettez en cache les objets souvent accédés, cela permettra des opérations coûteuses de parcours de l’arbre à chaque besoin de lire ou modifier ces éléments

 

menu = document.getElementById('menu');

   property1 = 'foo';

   menu.property2 = 'bar';
  • Masquez les éléments du DOM lors de leur modification, cela vous permettra de limiter le nombre de repaint/reflow. Pour cela vous pourrez utiliser un display : none, effectuer vos modifications de style sur l’élément ciblé puis réappliquer un display : block par exemple. Il faudra bien sûr que le masquage ne génère pas d’artefacts visuels trop importants.
  • Utilisez la délégation d’évènement à un nœud parent central pour éviter de multiplier le nombre de listener actifs sur certains évènements. C’est le nœud parent, qui se chargera de déléguer les changements d’état aux descendants.

Développement Serveur :

Dans cette seconde partie, nous nous concentrons sur les optimisations à apporter côté serveur : web, applicatif ou bases de données. Ces bonnes pratiques ne sont que quelques extraits, car bien des efforts ont déjà été menés de ce côté, souvent tirés par la volonté d’améliorer les performances.

#BestPractice 6 : optimisez l’accès aux ressources statiques

La première étape consiste à externaliser l’ensemble du CSS ou du Javascript dans des fichiers dédiés. Cela permettra notamment au serveur Web puis au navigateur mais aussi aux différents proxy de mettre en cache ces fichiers et ainsi de préserver la bande passante des réseaux.

En second lieu, minifier et compresser ces mêmes fichiers. Cela permettra également de préserver la bande passante lors des premiers téléchargement ou l’expiration des caches.

Enfin la dernière étape relève d’une recommandation aussi valable dans le développement d’outils ou de bibliothèques utilitaires : modularisez les différentes feuilles de style ou fichiers de déclarations de vos fonctions JS. Ainsi, seuls les fichiers nécessaires à la page ou à l’application courante seront chargés. Un bon framework disposera toujours d’un partie core puis de modules ou plugins additionnels.

#BestPractice 7 : allégez les contenus multimédias

Cette bonne pratique cible principalement les CMS ou les sites de publication et diffusion de contenu tels que les forums et les blogs. Force est de constater que l’apparition de la haute définition qu’elle soit visuelle ou auditive a fortement impacté la volumétrie des échanges sur Internet. Il est donc toujours intéressant de se demander si le matériel ciblé aura toujours besoin d’une définition 1080p pour une vidéo ou plus de 320 Kbps pour un mp3. Voici 3 conseils pour rendre la diffusion de contenu plus efficiente :

  • Encodez vos images/vidéos/sons avant leur diffusion dans votre CMS ou votre site, ne le faites pas de manière dynamique depuis votre site.
  • Publiez différentes versions d’un même contenu afin de proposer une version parfaitement adaptée au contexte de visualisation ou d’écoute de votre utilisateur (matériel, écran, réseau, bande passante, environnement). Vous pourrez par exemple vous baser sur les media queries HTML5/CSS3 pour cibler le niveau de définition.
  • Optimisez également le contenu publié par les utilisateurs : soit par des quotas sur les tailles d’upload, soit par des outils de compression à l’envoi ou encore au moment de l’enregistrement en base de données avec le recours à des outils tel que ImageMagic pour les images.

#BestPractice 8 : réduisez l’empreinte de vos services métier

Un grand nombre d’optimisations ont déjà lieu dans le cadre du développement des services métier et l’accès aux bases de données. Il s’agit là uniquement de quelques rappels:

  • Que ce soit dans les modèles de domaines ou la base de données, choisissez des formats de données adaptés :
    • Choisir un entier sur 4 pour stocker l’effectif d’une salle de classe est inadapté quand on sait que l’on peut alors aller jusqu’à 2^31-1 (2 147 483 647)
    • Faire une recherche par numéro de sécurité social avec une chaîne de caractère à la place d’un nombre est bien moins performant et plus coûteux en énergie (parcours d’un arbre a priori plus long)
  • N’effectuez pas de requêtes à la base de données à l’intérieur d’une itération. Préférez plutôt un regroupement de la recherche au sein d’une même requête suivi d’un parcours applicatif de la liste de résultat. L’autre solution consiste à faire confiance à son ORM en ayant adapté les niveaux de cache à votre contexte.
  • Cherchez les astuces des langages, que ce soit C, PHP, Java, Javascript, etc. Certaines règles sont simples à automatiser et à appliquer. Par exemple :
    • Ne faites pas appel à des fonctions dans la déclaration d’une boucle for.
    • N’écrivez pas :
for(int i=0; i < maliste.size(); i++)
    • Mais plutôt :
int tailleliste = maliste.size();
 for(int i=0; i < tailleliste; i++)
    • Remplacez les
 i++ ($i++) par ++i (++$i)
    • Dans beaucoup de langages, la forme i++ créera une variable temporaire de plus que ++i

Hébergement et Infrastructure :

L’un des derniers axes d’amélioration de la consommation énergétique d’un site est bien sûr tout ce qui concerne l’hébergement et l’architecture de déploiement.

#BestPractice 9 : trouvez un hébergeur Green

Aujourd’hui, il n’existe malheureusement pas de label pour normaliser ce qu’est un hébergeur Green. Il faudra donc se fier aux critères présentés par des articles tels que celui de GreenIt.fr Quels critères pour identifier un hébergeur « vert » ? ou bien encore parcourir les listes proposées telles que celle d’Ekopedia.

Mais si l’on se concentre sur l’un des critères essentiels qui est l’efficience énergétique du matériel proposé, les solutions BareMetal à base d’ARM proposées par Scaleway sont très attractives. Rappelons au passage que l’un des gros avantages de la plateforme ARM par rapport à Intel est sa plus faible consommation énergétique. De plus, elles sont aujourd’hui quasiment imbattables économiquement parlant si vous souhaitez une solution BareMetal.

#BestPractice 10 : virtualisez & conteneurisez

L’architecture de déploiement joue un rôle important dans la consommation énergétique d’un site Web ou d’une application en ligne.

On pourra donc profiter de la virtualisation ou mieux encore de la conteneurisation proposée en standard par la majorité des fournisseurs de cloud public pour limiter l’empreinte énergétique de nos sites et adapter leur consommation aux besoins de traitement des requêtes. Fini le serveur utilisé à seulement 20% de ses capacités CPU et RAM mais dont la consommation énergétique stagne à plus de 50% même en période d’inactivité ; il est désormais possible d’allumer ou d’éteindre nos « serveurs » à la demande.

#BestPractice 11 : pensez aux CDN

Si vous avez bien suivi, le nombre de notre Top 10 est atteint et même dépassé ! Je souhaitais tout de même vous faire part de ce dernier conseil car même si non prioritaire, il est intéressant de le connaître aussi bien du point de vue technique que philosophique.

Il s’agit du Content Delivery Network qui est un réseau spécialisé dans la diffusion de contenu. Il est constitué de nos serveurs Web ainsi que de nœuds secondaires dont le rôle est de faire office de cache pour servir nos ressources à des clients. L’idée est que les requêtes d’obtention de ressources statiques d’un client seront routées vers le nœud du CDN géographiquement le plus proche permettant d’améliorer les performances mais également limitant les sollicitations réseaux. Par conséquent, l’empreinte énergétique de la requête est moindre.

On peut effectuer le parallèle avec des initiatives actuelles qui visent à limiter le transport des marchandises dans le monde et privilégier les circuits de distribution les plus courts, dès que cela est envisageable.

Conclusion

Pour résumer ce Top 10, un développement « Green » repose sur 3 facteurs : la recherche de simplicité, la pertinence des choix et solutions, et l’automatisation pour l’application de règles de base. Il ne faut pas chercher à sur-optimiser au risque de se retrouver avec l’effet contraire, mais à appliquer des concepts simples et efficaces, à rester informé et s’adapter aux nouvelles bonnes pratiques.

Chaque acteur de la conception au déploiement a un rôle à jouer dans l’amélioration de l’efficience de nos systèmes pour que demain, nous puissions bénéficier de toujours plus de services et d’outils innovants dans un monde ou les ressources pour les exécuter sont limitées.

Finalement, nos sites Web ont aujourd’hui un poids 100 fois plus important qu’il y a 20 ans. Mais est-ce que pour autant nous commandons des billets de train, d’avion ou d’hôtel 100 fois plus vite qu’à cette période ?

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

0 commentaires

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 !