GreenerSoft

Pour réduire l’impact environnemental d’un site Web, ses temps de chargement, les risques liés à la sécurité et les coûts d’hébergement, la meilleure solution est un site Web statique.

Ce type de site a bien sûr aussi des inconvénients et n’est pas toujours utilisable, mais faisons le point.

Différences entre un site dynamique et un site statique

Un site Web dynamique est un site dont le contenu des pages est produit dynamiquement, c’est à dire qu’à chaque consultation d’une page via son URL, son contenu est généré par le serveur du site.

Un site Web statique est un site Web dont le contenu des pages est déjà produit.

Pour un site Web dynamique, il se passe grosso-modo les choses suivantes quand une page est consultée par un utilisateur :

1. Une requête est envoyée du navigateur au serveur.
2. Elle est réceptionnée sur le serveur par le logiciel serveur HTTP (Apache par exemple).
3. Le serveur HTTP détecte que la requête concerne un fichier de script (PHP par exemple) et fait donc appel à une application qui va exécuter ce script.
4. Le fichier de script est lu et exécuté (ce qui engendre éventuellement la lecture d’autres scripts, la connexion à un serveur de base de données, la lecture dans la base de données, etc.) pour fabriquer dynamiquement le contenu de la page.
5. À la fin de l’exécution, le script retourne le contenu HTML de la page que le navigateur va pouvoir afficher.

Avec un site statique, les choses sont beaucoup plus simple en consultant une page :

1. Une requête est envoyée du navigateur au serveur.
2. Elle est réceptionnée sur le serveur par le logiciel serveur HTTP.
3. Le serveur HTTP détecte que la requête concerne un fichier HTML, il le lit et le retourne au navigateur qui va l’afficher à l’utilisateur.

Le problème avec un site dynamique est que, si ce qui permet de constituer le contenu d’une page ne change pas (base de données par exemple), alors le serveur refait à chaque requête le même travail pour produire le même HTML.

Une solution dans ce cas de figure est d’utiliser un Varnish qui va mettre en cache le contenu des pages et donc éviter une régénération systématique, mais ceci a un coût financier et ajoute de la complexité dans l’infrastructure.

Avantages d’un site statique

Avec un site Web statique, nous venons de voir que le nombre de traitements qui sont réalisés sur le serveur suite à une requête est bien moins important qu’avec un site dynamique.

Et c’est là qu’il y a le premier avantage en terme d’éco-conception Web, moins de traitements, c’est moins d’énergie consommée au niveau du serveur et moins d’eau pour le refroidir. Et plus la même page est consultée, moins elle consomme par rapport à un site dynamique.

Moins de traitement veut aussi dire que le serveur va rendre le HTML de la page bien plus vite au navigateur de l’utilisateur. Un site web statique est le summum en terme de performance Web et c’est très important pour un bon référencement.

Pas de script qui s’exécute sur le serveur c’est aussi une sécurité très renforcée, pas de risque d’injection SQL par exemple.

Enfin, pas de base de données à lire et beaucoup moins de traitement à réaliser sur le serveur, implique qu’il est possible de réduire les coûts d’hébergement. Il n’est pas nécessaire d’avoir une « bête de concours » comme serveur, ni plusieurs serveurs et beaucoup moins d’espace disque.

Inconvénients d’un site statique

Il y a plusieurs cas de figure où un site statique n’est pas un bon choix ou même pas utilisable :

• le contenu des pages change très souvent,
• le contenu des pages dépend de l’utilisateur (site avec connexion par exemple).

Prenons pour exemple les sites Web de la presse traditionnelle qui aujourd’hui fonctionnent sur un modèle d’abonnement. Il est impossible pour ces sites de fonctionner avec des fichiers statiques dans la mesure où ils ne servent pas le même contenu pour une URL donnée quand vous êtes connecté ou pas. Typiquement quand vous allez sur un article, vous ne voyez que le début de l’article si vous n’êtes pas connecté et si vous l’êtes, vous avez l’article complet. Et ceci est géré dynamiquement au niveau du serveur.

Il y reste néanmoins de nombreuses catégories de sites Web où est cela est possible. Les blogs évidemment, mais aussi les sites d’associations, les petits sites de commerce (où les fiches produits ne changent pas en permanence), les sites de la presse indépendante, etc.

Statique mais dynamique

Un site statique ne veut pas dire qu’il ne peut pas être dynamique. Il est tout à fait possible sur un site statique d’avoir des éléments dans les pages qui soient dynamiques et c’est même pour cela que JavaScript existe.

Prenons pour exemple notre site. C’est un site Web entièrement statique qui est généré à partir d’un backoffice géré dans notre infrastructure (pas sur le Web) et basé sur un framework interne développé en PHP.

En plus d’être un site Web, c’est une Single-page application (SPA) et une Progressive web app (PWA) installable sur votre ordinateur ou votre mobile.

Pour montrer qu’un site web statique peut être dynamique, nous ajoutons ici un composant de géolocalisation d’adresses IP (V4 ou V6) qui utilise l’API du site GeoJS et les cartes d’OpenStreetMap via la librairie Leaflet :

Dans le HTML de cette page, nous avons simplement un élément <div> avec un identifiant et JavaScript fait le reste pour produire le contenu du <div>, c’est à dire le formulaire avec le champ de saisie et la carte, ainsi que tout le fonctionnement de la géolocalisation.

Attention néanmoins avec le référencement car dans cet exemple les moteurs de recherche ne voient rien (juste un <div> vide).

Si le référencement est important mais que vous souhaitez aussi qu’une partie d’une page soit dynamique, il faut que le HTML embarque le balisage et qu’ensuite un script JavaScript le dynamise.

Prenons pour exemple la table suivante :

Le code HTML de cette table et son contenu sont entièrement dans la page et donc visibles par les moteurs de recherche, mais cette table est dynamique, vous pouvez cliquer sur les titres des colonnes pour trier la table. Du code JavaScript a retrouvé la table et gère le tri sur un clic.

Donc un site statique peut très bien être dynamique en utilisant du JavaScript, des API ou même des <iframe>.

Conclusion

Avant de développer un site Web, réfléchir en premier lieu à en faire un site Web statique est une bonne démarche.

De nombreux outils existent pour générer un site Web statique et il n’est pas bien compliqué d’en développer un soi-même. Certains CMS ont même des plugins qui permettent de convertir un site Web en site statique.

L’avantage en terme d’éco-conception est clair, le W3C le dit aussi ici dans ses Web Sustainability Guidelines (WSG).

Vous aurez un site Web ultra rapide, très bien référencé, sans faille de sécurité et avec un coût réduit d’hébergement, alors pourquoi s’en passer ?