Cousu Main Fabricant de sites internet

Hébergement

Le plus gros poste de pollution d’un site internet est lié au stockage des données (les datacenters). J’ai choisi de travailler avec des hébergeurs responsables, engagés dans une démarche active de limitation de leur empreinte écologique et disposant de certifications.

Développements

Au delà du matériel, l’autre impact est lié à la consultation : plus il y a de données transférées entre l’hébergement et les internautes plus cela demande d’énergie. J’optimise mes sites pour les rendre performants, rapides à naviguer et donc moins énergivores.

Mes sites sont optimisés avec plusieurs outils et techniques :

• mon développement se focalise sur la version mobile du site pour ensuite l’adapter aux écrans plus grands afin de ne pas charger de ressources inutiles (mobile first)
• réduction du poids et du nombre de fichiers pour limiter le volume transféré et les requêtes au serveur (compression et concaténation des scripts et feuilles de styles)
• images automatiquement redimensionnées pour faciliter la gestion au quotidien par les personnes en charge du site (réduction des images pour les adapter à leurs contextes d’utilisation et limiter leur poids)
• compression automatique des images au format optimisé WebP
• médias externes non chargés par défaut (les vidéos Youtube/Vimeo ne sont chargées que si l’internaute les lance, ce qui permet également de ne pas exposer inutilement leurs données personnelles)

Pour aller jusqu’au bout de la démarche et limiter la charge serveur (temps de calcul et d’utilisation des ressources physiques de l’hébergement), le code est optimisé et fonctionne avec la dernière version de PHP pour assurer d’excellentes performances et une sécurité optimale.

Enfin, un système de cache statique efficient évite un recalcul systématique des pages pour économiser des ressources serveurs.

Principe KISS : keep it simple, stupid

Mes développements suivent le principe KISS qu’on pourrait traduire en français par "garde ça simple, idiot", dans le sens de "ne complique pas les choses". L’idée est de garder les choses le plus simple possible et d’éviter tout complexité inutile qui risquerait de générer des coûts négatifs : maintenance plus complexe, augmentation de la consommation énergétique, pérennité des technologies...

J’utilise donc les langages standards et éprouvés du web (PHP, HTML, CSS) et évite les frameworks propriétaires et/ou gourmands en ressources.

Côté graphisme

Pour le reste, c’est durant la phase de conception des maquettes graphiques qu’il faut faire des arbitrages :

• choisir la tailles des images et le nombre de polices utilisées afin de limiter le volume de données transférées
• limiter la complexité des pages pour une meilleure compatibilité avec les terminaux plus anciens (smartphone, ordinateurs…) et ainsi éviter de participer à l’obsolescence des appareils électroniques qui sont, avec les datacenters, l’autre source de pollution matérielle

Cas du site du Quartz, Scène nationale de Brest

Pour la refonte de son site internet en 2023, l’équipe du Quartz a fait le choix de mettre l’accent sur l’éco-conception afin d’en limiter l’empreinte écologique et sur l’accessibilité pour une meilleure inclusivité de toutes et tous.

Sur l’accueil du site, le choix a été fait de limiter les informations afin de limiter la complexité et le poids de la page : on affiche uniquement le teaser de saison, les 3 dernières actualités et les 3 prochains spectacles. Tout le reste est accessible via des liens/boutons.

Pour la page programme, on affiche uniquement les spectacles à venir et on limite à 30 spectacles afin de limiter le nombre de vignettes affichées. Ainsi, on ne charge pas de fichiers inutilement : en début de saison, on ne cherche généralement pas à voir les spectacles qui auront lieu en fin de saison. Et si besoin, il est possible d’afficher la suite.

Sur la page de présentation d’un spectacle, l’arbitrage a permis de se passer du traditionnel diaporama : on affiche le teaser avec un visuel du spectacle. On ne charge qu’une image et, si les visiteur·euses souhaitent voir la vidéo, il suffit de cliquer sur le bouton. Et s’il n’y a pas de teaser, on affiche directement le visuel.

Le résultat est réussi, non ?

---

– www.lequartz.com
Graphisme réalisé par atelier 25