L’éco-code, c’est quoi ?

Derrière ce nom un peu marrant se cache surtout une vraie problématique et des enjeux écologiques. Réaliser un code plus écologique : c’est prendre conscience d’une réelle problématique et y apporter sa petite pierre à l’édifice pour la solutionner.

Juste du code ou plus que ça ?

Du code plus écologique, c’est simplement du code qui demandera moins de ressources serveurs pour effectuer la même tâche. Pour y arriver, c’est toute une architecture qui doit être réfléchie : comment réduire ses requêtes aux bases de données ? Quelle est la méthode la moins gourmande pour réaliser un calcul ? Qu’est-ce qui peut être mis en cache pour être servi à plusieurs utilisateurs sans nouveaux calculs ?

Comment y parvenir ?

Pour y parvenir, nous nous attaquons sur plusieurs axes très simples à mettre en place :

Le 1er axe : compiler du code

Via des gestionnaires de package comme YARN ou NPM, nous avons d’excellents outils pour gérer plusieurs librairies et dépendances nécessaires à la bonne exécution d’une application. Ensuite, grâce à des outils comme Grunt ou Webpack, il est possible de compiler ces nombreux outils en un seul fichier « Bundle », qui regroupe tout ce que nous avons besoin sans fioriture, un fichier minifié, compressé et qui réduit le nombre d’appels serveurs pour chaque visite. Que ce soit pour du Javascript ou du CSS (/SCSS), c’est une méthode très pratique pour améliorer son éco-code !

Le 2ème axe : analyser des alternatives et challenger les cahiers des charges

Dans un projet tout récent (à vocation écologique aussi d’ailleurs !), nous avons été amené à calculer un très grande nombre de distances entre deux adresses de façon à proposer les annonces les plus proches de soi. Plutôt que d’appeler des services externes (souvent américains dont on ne citera pas les noms) pour calculer une distance exacte qui se base sur le réseau routier, nous avons proposé une alternative qui se contente de convertir chaque adresse en coordonnées latitude et longitude afin de calculer la distance de manière approximative en comparant celles-ci et en se basant sur le rayon de la Terre. Un résultat, certes, moins précis et plus « à vol d’oiseau » mais qui fait un énorme gain de rapidité dans l’exécution du code et réduit significativement l’impact écologique de chaque appel à cette plateforme. Un parti pris accepté par notre client et très bénéfique pour tous !

Le 3ème axe : utiliser le langage moderne

Qui limite tant le rechargement complet de la page comme ReactJS qu’au niveau serveur via, par exemple, la mise en place d’un reverse proxy. Cette méthode permet que le point d’entrée de chaque appel, trie les demandes statiques de celles qui nécessitent un plus lourd travail, un peu comme un serveur dans un restaurant (petit jeu de mot 😉) – Vous passez vos commandes au serveur qui se chargera de transmettre en cuisine les tâches de cuissons et lui traitera les tâches qui ne nécessitent pas beaucoup de préparation comme vous apporter de l’eau à table. Ça serait compliqué pour le restaurant si vous interrompez le chef en cuisine pour lui demander une nouvelle fourchette. Au niveau web, c’est pareil : nous avons des tâches de calcul plus lourdes qui demandent des appels aux bases de données mais également la simple livraison d’une photo, un JPEG déjà prêt sur le disque dur. À chacun son job : un gain de performance assuré !

Il existe évidement d’autres méthodes mais ces quelques points énoncés ci-dessus permettent déjà un gain significatif de performance dans le code, une meilleure réactivité même sur une machine légère et une meilleure expérience-utilisateur.

Comment le mesurer ?

Pour l’instant, Il n’y a rien à ma connaissance qui donne directement un score écologique sur une application/ un code. Par contre très facile de mesurer la montée en charge de nos serveurs à chaque appel et via des outils comme GTMETRIX de voir le temps d’exécution et le poids de chaque page. Plusieurs indicateurs qui nous montrent lorsque l’on va dans la bonne directement et que nous utilisons en préparation de chaque mise en production pour valider notre travail.

À qui cela profite t-il ?

Aussi bien à vos visiteurs qui bénéficient d’une meilleure expérience-utilisateur lorsqu’il navigue sur votre site, qu’à votre entreprise car les performances d’un site entre en jeux dans le référencement naturel et cela permet à votre site d’être mieux référencé sur les moteurs de recherches.

Une question, une info, un nouveau projet pour votre site web ?

Contactez sans tarder l’équipe de Fidelo Web Agency sur hello@fidelo.be !