Retour aux articles

Comment éco-concevoir un site internet ? Mes pratiques.

11 mai 2022

De l'identité graphique au développement en passant par la documentation, je vous présente ma pratique de l'écoconception.

Commençons par définir le terme d’éco-conception.

Qu’est-ce que l’éco-conception ?

L'écoconception est une approche qui prend en compte les impacts environnementaux dans la conception et le développement du produit et intègre les aspects environnementaux tout au long de son cycle de vie.

Faire de l'éco-conception, c’est donc se poser la question à chaque étape et pour chaque choix de l’impact environnemental. Avant même de parler de conception, on peut même se poser la question de la raison d’être de ce qu’on est en train de faire. Ainsi, on peut parfois faire le choix de ne pas faire 😉

Le poids de l’identité graphique

L’identité graphique va être déclinée à travers notamment à travers des médias (images, vidéos, illustration, animation...).

Dès la création de cette identité, il est possible de privilégier l’usage d’illustrations aux images. Et lors qu’on utilise des images, il peut être intéressant les travailler avec nombre de couleurs limité, ce qui aura pour effet de réduire leur poids.

Par exemple avec cette image mise en noir et blanc auquel on a ajouté un filtre de couleur violet.

Exemple de compression d'image qui divise par 2 le poids.

Le poids du code

Réduire l’usage de bibliothèque JavaScript

Par principe, si je peux, j’éviter d’utiliser du javascript en utilisant un maximum les fonctionnalités disponibles nativement dans le navigateur sur les formulaires par exemple. Cette pratique est aussi un bon moyen de garder l’accessibilité des éléments natifs.

Lorsque c’est nécessaire, je développe ce qui est nécessaire et si c’est plus complexe je m’oriente vers des bibliothèques en javascript vanilla légère. J’ai banni le jQuery 🙂

Optimisation des images

Je redimensionne et compresse systématiquement les images afin d’avoir un rapport poids qualité convenable. De plus, en fonction de la qualité de l’écran ou de la taille de l'écran, la encore, le poids de la photo peut-être optimisé. Enfin, la conversion des images dans le format webp permet de réduire encore le poids des images.

Pour cela j’utilise l’attribut srcset ainsi que l’élément source

<picture>
  <source  srcset="img-800.webp 1x, img-1600.webp 2x"  type="image/webp">
  <img src=".img-800.jpeg">
</picture>

Par ailleurs, l’attribut loading sur les images permet de choisir le comportement de chargement des images. Je choisis alors de commencer à charger les photos seulement lorsqu'elle arrive dans le champ visible de l’écran.

<img loading="lazy">

Optimisation du chargement des fichiers

Pour les fichiers css et js, la minification permet de réduire leur poids en enlevant tous les espaces et saut de ligne.

Pour les fichiers svg (utilisé les icones), j’utilise un “sprites” qui permet de rassembler en un fichier l’ensemble des éléments. Ainsi, on limite le nombre de fichiers à charger.

Enfin, la mise en cache des pages systématique permet de réduire le temps de chargements en supprimant le temps de régénération de la page (php vers HMTL).

La dette technique

Documenter pour améliorer la maintenabilité du code

Segmenter le code, nommer correctement les éléments et le commenter si nécessaire, c’est 70% du travail de développement (Tout un art 🙂). En veillant à ces points, vous favorisez la facilité de modification et amélioration future du code. Il sera plus aisé pour la personne qui aura à intervenir (vous-même ou une autre personne) de comprendre comment opérer précisément en en limitant les effets non désirables.

Réduire la complexité technique

Par principe, plus on limite le recours à des ressources externe (plugins, bibliothèques, services, base de données) plus le risque de casse diminue et plus il est rapide de trouver les erreurs.

Ce minimalisme permet également plus d’accessibilité, en demandera moins de connaissances pour intervenir dans ce système.

C’est pour cela que je me suis tourné vers le CMS Kirby dont voici une liste non exhaustive de ses atouts :

  • Une administration sur mesure, pour un site simple à utiliser.

  • Sans base de données (repose sur une architecture de dossier et fichier). On limite les risques d’erreurs et de faille de sécurité. On réduit aussi la complexité technique pour déplacer et archiver le site.

  • Une architecture qui repose sur PHP qui offre une grande stabilité et de grandes performances.

  • Une administration extensible à l’infini qui permet une grande résilience à long terme et de s’adapter à de nombreux environnement technique.

  • Un système de cache automatisé pour un chargement de page très rapide.

  • Une communauté de développeur et designer dynamiques, sensible aux questions environnementale et de protection de la vie privée.

  • Une documentation technique exhaustive rendant le développement très accessible, ce qui facilite la compréhension et donc l’adoption de l’outil (gros avantage dans le cadre de travail collaboratif).

  • Un modèle économique sain qui permet de maintenir ce projet open-source depuis 2012.

Si vous souhaitez en discuter, contactez-moi sur twitter. Si vous souhaitez être accompagné dans la conception ou la création d’un site avec Kirby contactez-moi sur baptiste@repliq.fr