10 bonnes raisons d’utiliser un générateur de site statique pour l’éco-conception web

Nos sites web souffrent depuis plusieurs années d’un phénomène d’obésité : leurs contenus sont de plus en plus nombreux et lourds. On les qualifie d’« obésiciels ». Pourtant, les technologies n’ont cessé de s’améliorer, autant du côté matériel que des langages et des services logiciels. Ce phénomène est lié au paradoxe de Jevons qui dit :

À mesure que les améliorations technologiques augmentent l’efficacité avec laquelle une ressource est employée, la consommation totale de cette ressource peut augmenter au lieu de diminuer.

Paradoxe de Jevons, Wikipédia

En résumé‚ les améliorations technologiques nous on rendu moins soucieux de faire mieux avec peu et nos sites, nos utilisateurs en ont pâti, et en bout de chaîne, l’environnement. Nous nous sommes concentrés sur l’efficacité plutôt que sur l’efficience et la robustesse.

Ces constats sont identifiés depuis plusieurs années maintenant et nous amènent à repenser nos systèmes d’information. Certain·s, peu convaincus ou intéressés, se contenteront d’y voir des leviers d’optimisation et de performance quand les autres y verront avant tout un moyen de réduire l’impact de leurs services et de leurs sites.

Peu importe notre manière d’aborder le sujet, cette réduction reste un impératif et un défi que nous devons relever.

Entre 1995 et 2022, le poids des pages web a été multiplié par 155 !

Ecoconception web / les 115 bonnes pratique, Frederic Bordage

Cet article s’attache à décrire les bénéfices de l’emploi des sites statiques face aux sites dynamiques qui constituent aujourd’hui une part largement dominante du web. Nous verrons que les bénéfices ne se limitent pas à la seule optimisation : réduction d’impact, performance, allègement des infrastructures, sécurité, diminutions des coûts…

Comprendre ce qu’est la gestion statique

Un site statique est principalement constitué de fichiers HTML, CSS et JavaScript prégénérés, qui sont directement servis par le serveur web. S’ajoutent également les fichiers médias : images, audio, vidéos…

Contrairement aux sites dynamiques, ils ne nécessitent pas de requêtes à une base de données ou de calculs complexes pour générer chaque page.

Architecture d’un site statique

La séquence des opérations nécessaires à l’affichage d’une page de site statique est limitée au strict minimum :

  1. Le navigateur envoie une demande au serveur pour obtenir la page ;
  2. La page et ses éléments, déjà prêts à l’emploi, sont transmis directement en réponse par le serveur.
graph LR
    A[Utilisateur] -->|Requête HTTP| B[Serveur Web]
    B -->|Fichiers HTML/CSS/JS| C[Utilisateur]

    subgraph Site Statique
      B
    end

Architecture d’un site dynamique

Un site dynamique demande quant à lui à minima un serveur “dynamique”, c’est-à-dire un programme voué à “calculer” les pages et leurs contenus dynamiquement, le plus souvent en chargeant tout ou partie des informations depuis une base de données. La décomposition des étapes est alors la suivante :

  1. Le navigateur envoie une demande au serveur pour obtenir la page ;
  2. Le serveur dynamique reçoit la requête et lance le calcul des contenus :
    1. la base de données est interrogée et renvoit les données appropriées ;
    2. le serveur récupère ces données et procède à la création de la page demandée ;
  3. La page et ses éléments sont transmis.
graph LR
    subgraph Site Dynamique

      D[Serveur Web avec backend]
      E[Base de données]
    end

    A2[Utilisateur] -->|Requête HTTP| D
    D -->|Requête SQL| E
    E -->|Réponse SQL| D
    D -->|HTML dynamiquement généré| C2[Utilisateur]

Quels arguments statistiques ?

Bien qu’il n’existe pas de statistique officielle dénombrant le nombre de sites ou de pages web pouvant être gérés de façon statique, on peut imaginer qu’ils représentent un part importante du web. Certains parlent de 95%, ce qui est probablement discutable du fait de l’appification du web.

Si on prend l’exemple de WordPress, le CMS le plus utilisé au monde avec plus de 43% des sites en ligne, on peut se risquer avec une hypothèse basse de 50% des sites qui pourraient être gérés de manière statique, soit déjà plus de 20% du web !

Venons-en à présent à notre liste de 10 bénéfices :

1. Réduction de la consommation énergétique

La simplicité de l’architecture des sites statiques réduit considérablement la consommation énergétique du serveur.

Selon la configuration, on peut mesurer les économies potentielles suivantes :

Réduction des coûts et de la consommation énergétique

Selon certaines estimations, l’utilisation de sites statiques peut permettre de diminuer les coûts d’exploitation d’au moins 75 %.

Cette réduction des coûts est souvent corrélée à une baisse de la consommation énergétique, bien que le pourcentage exact puisse varier en fonction de l’infrastructure et de l’optimisation du site.

Diminution de l’empreinte carbone

Des mesures post-optimisation ont montré une réduction de 40 % de la consommation de bande passante et une diminution de 30 % des requêtes serveur, ce qui contribue à une baisse de l’empreinte carbone du site.

Opter pour un hébergeur utilisant des sources d’énergie renouvelables peut amplifier les bénéfices environnementaux de la conversion en site statique. En Europe, l’hébergeur Infomaniak fait partie des meilleurs élèves.

2. Optimisation de la vitesse de chargement

Les fichiers statiques étant prégénérés, ils peuvent être déployés sur des réseaux de distribution de contenu (CDN). Cette architecture permet un accès rapide aux fichiers depuis des serveurs situés au plus proche de l’utilisateur final, réduisant ainsi les temps de chargement.

Note qu’il existe des CDN Européens, si tu souhaites éviter de partir sur les solutions dominantes qui sont pour la plupart américaines.

3. Moindre recours à des infrastructures lourdes

Les sites dynamiques nécessitent des serveurs exécutant des applications backend (PHP, Node.js, Rails, Java, etc.) et des bases de données, ce qui alourdit les infrastructures. Avec un site statique, un simple serveur HTTP suffit, ce qui allège les besoins en matériel et en maintenance.

4. Perenité des données

Pour garantir la disponibilité des contenus d’un site dynamique et se prémunir d’un défaut de la base de données, celle-ci est généralement copiée à intervalles réguliers vers un serveur de sauvegardée.

Pour un site statique, les fichiers contiennent l’intégralité des informations et sont de ce fait automatiquement “répliqués” entre le serveur HTML, le serveur de sources (un serveur Git la plupart du temps) et les machines de développement. Il n’y a donc aucun besoin supplémentaire en infrastructure.

5. Amélioration de la sécurité

L’absence de code exécuté sur le serveur élimine les risques d’attaques liées aux injections SQL ou à l’exploitation de failles dans les scripts backend. En évitant ces vulnérabilités, les générateurs de sites statiques offrent une sécurité accrue.

6. Facilité de mise en cache

Les fichiers statiques peuvent être mis en cache à différents niveaux (navigateur, proxy, CDN), réduisant ainsi la charge sur les serveurs et améliorant l’efficacité globale.

7. Compatibilité avec l’éco-conception web

En diminuant les ressources nécessaires à leur fonctionnement, les sites statiques s’alignent parfaitement avec certains principes de l’éco-conception web : sobriété technique et fonctionnelle, faible consommation énergétique et durabilité des contenus (robustesse).

8. Adapté aux besoins modernes

Avec les frameworks modernes (Hugo, Eleventy, Gatsby, Jekyll), il est possible de créer des sites statiques riches en fonctionnalités, tout en profitant de l’efficacité et de la simplicité de cette approche.

Le développement est facilité. L’initialisation d’un projet se fait en une commande. La plupart des solutions intègre un serveur de développement qui se démarre en une commande.

9. Architecture modulaire

On peut très bien allier un site statique avec certains contenus dynamiques. Je m’explique.

Lorsque l’essentiel des contenus d’un site est statique, on peut décider d’avoir recours à des systèmes d’API (par exemple les server functions) pour charger uniquement les jeux de données dynamiques qui nous intéressent.

Les avantages sont multiples : modularité de l’architecture, consommation de ressources serveur limitées/optimisées.

Cette architecture est connue sous la dénomination JAMStack (« JAM » pour JavaScript API Markup). Un sur-ensemble architectural est aussi appelé Headless-CMS.

Le lowtech lab a choisi le CMS Kirby pour construire un site web dans une démarche low-tech.

10. Simplicité de déploiement

Un site statique peut être déployé en quelques clics sur des plateformes comme Netlify, Vercel ou GitHub Pages, sans besoin de configurer un serveur complexe.

Vercel a introduit la regénération incrémentale statique ou ISR, une évolution intéressante pour la JAMStack visant à ne générer que les contenus statiques qui ont évolué (sans rebuild total).

Conclusion

Choisir un générateur de site statique est une démarche à la fois pragmatique et responsable, idéale pour construire des sites web durables, robustes et performants.

Cette architecture aide à répondre aux défis environnementaux tout en garantissant un socle qualitatif qui garantit de nombreuses bonnes pratiques.