Leçon 14Pour aller plus loin, quelques pratiques de codage

Notion 86

Introduction aux pratiques de codage de l'éco-conception web avec le projet The Good Manager

Compétences ciblées

Avoir un aperçu des pratiques de codage utilisées dans le projet The Good Manager.

Le site web de Good Manager a été conçu et développé selon les principes de la conception d'un éco-web. Les choix de conception et de mise en œuvre sont documentés dans le Carnet de bord du projet (accessible par le menu). Dans cette notion, nous aimerions présenter quelques bonnes pratiques de développement utilisées pour cette plateforme qui pourraient être utiles pour la conception d'un éco-web.

Suivi des utilisateurs

La vie privée est une préoccupation majeure, et le suivi des utilisateurs consomme des ressources, que ce soit par la collecte, le stockage et l'analyse des données.

Le bon gestionnaire ne suit pas les utilisateurs, ce qui simplifie notre travail en ce qui concerne les obligations GDPR, et permet de garder la plateforme libre de scripts tiers qui alourdiraient la plateforme.

Site web statique

Le site web de Good Manager est principalement composé de contenu statique, ce qui signifie qu'il n'a pas besoin d'un serveur web pour générer des pages à chaque fois qu'un visiteur le demande. Les pages sont générées à l'avance afin de réduire la charge du serveur, grâce à Gatsby ( https://www.gatsbyjs.com/). Par conséquent, nous n'avons besoin que des fonctions d'hébergement de base pour les pages statiques dans une approche low-tech, réduisant ainsi notre empreinte.

Images

Nous avons utilisé des images svg pour réduire leur taille et optimiser leur affichage. Le poids total des images est actuellement de 26kb, ce qui est vraiment faible.

Selon la documentation de Gatsby, voici une liste de la façon dont Gatsby peut optimiser les images :

Charge la taille optimale de l'image pour chaque taille de périphérique et chaque résolution d'écran.
Maintient la position de l'image pendant le chargement afin que votre page ne saute pas pendant le chargement des images.
Il utilise l'effet de "flou", c'est-à-dire qu'il charge une version minuscule de l'image à afficher pendant le chargement de l'image complète.
Chargement paresseux des images, ce qui réduit la bande passante et accélère le temps de chargement initial.
Utilise des images WebP, si le navigateur prend en charge ce format.

Hébergement

Ce site est hébergé chez Infomaniak ( https://www.infomaniak.com/en ) qui a une politique publique d'énergie durable. En choisissant une solution d'hébergement commerciale au lieu d'un auto-hébergement, nous cherchons à profiter des économies d'échelle pour réduire notre empreinte. En étant hébergés dans un datacenter écologique, nous espérons réduire notre consommation individuelle et bénéficier de l'optimisation et de la gestion du matériel par des professionnels.