Aujourd’hui, la question ne se pose même plus : qu’il s’agisse de vendre en ligne vos produits, de présenter vos services à un client potentiel, de vous lancer dans la création de contenus multimédias ou la rédaction d’articles de blog, votre entreprise a besoin d’un site Internet, peu importe sa taille ou son secteur d’activité.
Mais, dès que vous en parlez avec vos équipes, votre cerveau se met à chauffer comme un ordinateur mal ventilé ! Fichiers HTML, feuille de style CSS, référencement, sites dynamiques s’appuyant sur une solution serveur, CMS, programmation, code informatique, PHP, jQuery, etc. : autant de termes techniques qui vous font perdre la tête et, surtout, le contact avec vos futurs visiteurs. Alors quand on vous dit que les sites statiques font leur grand retour…
Pas de panique ! Dans cet article, nous vous proposons une petite formation en accéléré. Suivez le guide ! Xavier-Philippe Tulenew, le CTO de Wemanity vous explique tout ce que vous avez toujours voulu savoir sur les sites statiques pour vous aider à faire votre choix.
1. Site statique : de quoi parle-t-on ?
À première vue, difficile pour un utilisateur de faire la différence entre sites statiques et sites dynamiques sur l’écran de son ordinateur. Mais, grâce à Xavier, la frontière entre les deux devient moins mouvante. “Un site statique, explique-t-il, est composé comme son nom l’indique de pages statiques, c’est-à-dire visibles telles qu’ont été conçues”.
Cette définition ne doit pas pour autant vous donner à penser que rien ne bouge sur votre page web ! “Vous pouvez bien sûr intégrer des images, des vidéos ou de la musique, précise Xavier, mais ce seront toujours les mêmes”. En d’autres termes, ces animations multimédias seront présentées de la même façon quel que soit l’utilisateur. Sur un site dynamique, à l’inverse, “les informations varient en fonction de l’interaction avec les visiteurs”.
Ce qu’il faut retenir : “Un site statique est composé de pages statiques, c’est-à-dire visibles telles qu’ont été conçues.”
Magique ? Pas vraiment. Cela suppose bien sûr une certaine connaissance du code et des langages de programmation. Mais nul besoin d’être un crack en informatique pour en faire l’expérience ! Il suffit d’ouvrir une page de votre navigateur web préféré et de surfer sur un site de e-commerce. En effet, son contenu est issu d’une base de données et selon les critères que vous avez vous-même définis pour trouver les articles tant recherchés. Ce contenu subira ensuite une mise en page en temps réel. Contrairement à un site statique, les fichiers HTML ne sont pas stockés sur un serveur qui se contenterait de les servir dans votre navigateur au moment réclamé. “Les pages, résume Xavier, sont construites ‘à la volée’ grâce à la programmation conçue par votre webmaster ou votre équipe de développeurs”.
Et c’est bien là que le bât blesse : la création d’une nouvelle page web chaque fois qu’un utilisateur le demande prend du temps. En grossissant, les sites dynamiques sont devenus non seulement lourds mais surtout lents. Trop lents même pour les experts en code informatique ! Autre problème ? Le référencement. Le site étant généré à la volée par JavaScript, il est impossible pour un moteur de recherche d’en récupérer le contenu. Des failles qui ont permis aux sites statiques de revenir sur le devant de la scène Internet et de marquer leur différence.
2. Le retour gagnant des sites statiques générés
“Cela a été rendu possible grâce à la Jamstack”, un ensemble de technologies qui comprend JavaScript, les APIs et la markup. Si l’on reprend l’exemple de votre virée shopping sur Internet, cela donne quoi ? “Le catalogue sera préconstruit à l’avance sous forme de pages HTML statiques, mais les articles de votre panier seront des éléments dynamiques écrits en JavaScript et s’appuyant sur des API pour apporter des fonctionnalités comme le système de paiement par exemple”. En somme, la création de pages web précède vos désirs puisqu’elle a lieu en amont de votre requête grâce aux générateurs de site statique.
Ces outils se comportent un peu à la manière des systèmes de gestion de contenu, ces CMS comme WordPress qui peuvent utiliser le langage PHP et la base de données MySQL. À une différence près, cependant : ils “compilent” les fichiers après les avoir modifiés, pour ne servir que des ressources statiques. Ils se rapprochent, en ce sens, davantage des caches d’un site dynamique que des CMS.
Le chiffre-clé : “Plus de 70% des visiteurs quittent un site de e-commerce s’ils doivent attendre plus de 3 secondes le chargement d’une page…”
“Une fois générées, poursuit Xavier, les pages statiques sont souvent déployées sur des réseaux de diffusion de contenu”(CDN). Grâce à ces infrastructures CDN, comme Netlify, la gestion est fluidifiée. “On s’affranchit surtout de la complexité induite par les caches”. En effet, quand le site contient des dizaines de milliers de pages, “il faut élaborer des stratégies de génération qui peuvent rapidement devenir très difficiles”.
Les CDN jouent un peu le rôle de distributeurs automatiques de billets ! Ils mettent en cache du contenu dans des serveurs situés proches de votre ordinateur ou de votre smartphone. “Vous pouvez alors regarder votre film, télécharger un texte, consulter vos comptes en banque, publier un post sur votre blog ou faire les soldes, sans avoir à attendre que les contenus multimédias se chargent dans votre navigateur”. Un enjeu de taille quand on sait, grâce à Xavier, que “plus de 70% des visiteurs quittent un site de e-commerce s’ils doivent attendre plus de 3 secondes le chargement d’une page…”
3. 5 raisons de les adopter
- Allier performance et sécurité
Mais, la performance n’est pas le seul atout qui plaide en faveur des générateurs de sites statiques. “Avec un site généré de manière statique, le risque de cyberattaque est drastiquement réduit”. Pourquoi ? Tout simplement, parce que l’on n’a “aucunement besoin d’accéder à une base de données”. N’allez pas croire, cependant, qu’un générateur de site statique rendra le vôtre invulnérable ! S’il utilise des APIs, il le sera forcément.
En revanche, il existe de nombreux garde-fous comme la mise en place de “token pour s’assurer que le site qui consomme l’API est bien autorisé à le faire”. Xavier recommande également l’application de protocoles tels que HTTPS ou l’utilisation des headers CORS. “Ces mécanismes de sécurité vérifient que les informations fournies par les APIs au site sont bien les applications légitimes à l’utilisation de ses données”. Et si votre site est endommagé, rien n’empêche d’enlever le cache et de générer à nouveau tout le site statique deux minutes plus tard et avec toutes les informations. Comment ? En utilisant idéalement une stratégie de génération de site tels que SSQG (Site Site Generation), SSR (Server Site Rendering), CST (Client Site Rendering) ou un type de générateur particulier tels que l’ISR (Incremental Static Regeneration). Ainsi, “chaque fois qu’un nouveau contenu sera modifié, vous n’aurez qu’à générer le fichier statique correspondant au contenu modifié et non l’intégralité du contenu”.
Pourquoi passer à un site statique ? “Avec un site généré de manière statique, le risque de cyberattaque est drastiquement réduit.”
- Faire rimer amélioration de la bande passante…
Car, c’est là un autre avantage des sites statiques générés : leur robustesse. “Les mécanismes de cache extrêmement sophistiqués permettent de générer plusieurs fois une information et ce, sans avoir à demander à la machine de le faire”. Les générateurs de sites statiques représenteront donc des alliés précieux pour la gestion des requêtes affluant en grand nombre sur vos pages web. Plus largement, ils améliorent les conditions de la bande passante et réduisent le poids de l’infrastructure. Xavier se souvient par exemple que, pour un client évoluant dans le secteur de l’immobilier, la mise en place d’un site statique généré avait permis de passer de 10 serveurs web à 2, de 5 serveurs applicatifs à 1, de 5 licences d’un outil de gestion de contenu à 1…
- … et diminution des coûts et de la consommation
“On estime, confirme Xavier, que les sites statiques générés permettent au minimum de diminuer les coûts de 75%”. Une économie loin d’être négligeable et à laquelle s’ajoute un impact écologique positif. Bien sûr, tout n’est pas encore idéal. Mais, parce qu’elle permet des économies d’énergie conséquentes, l’utilisation de CDN constitue un progrès considérable. “Elle résonne parfaitement avec la vision que nous portons chez Wemanity en proposant au client la solution la plus green possible”.
4. La technologie au service du travail en équipe
Sécurité garantie, performance technologique, coûts réduits, impact positif : les sites statiques générés ont donc de nombreux arguments à faire valoir. Et, avec les nouvelles architectures headless, leur force est encore décuplée. “Dans les anciennes générations, on était obligé d’avoir un serveur web ou applicatif, explique Xavier, ce qui impliquait très souvent d’être tributaire d’un langage serveur”. Avec le headless, cette dépendance a complètement disparu. “On a seulement besoin d’utiliser un moteur de template qui peut s’adapter à vos besoins, aux exigences des équipes ou du marché”.
Concrètement ? Cela permet de capitaliser sur des composantes métier. “Une API peut ainsi être utilisée sur un site mais également sur sa version mobile ou dans l’application d’une montre connectée”. On démultiplie donc le nombre de canaux sur lesquels décliner notre application. Sur tous les plans, le headless est donc synonyme de plus grande liberté ! Front, react, angular, PHP, JSP, … : “vos équipes peuvent, en effet, utiliser les technologies et les langages qu’elles souhaitent”.
Point bonus : “Vos équipes peuvent, en effet, utiliser les technologies et les langages qu’elles souhaitent”.
Cela simplifie donc le travail et le travail d’équipe tout court ! Car, si les développeurs apprécieront de travailler en fonction de leur propre langage, les créateurs de contenus seront ravis de ne pas avoir à abandonner leur CMS préféré pour publier un texte. Quant à la fonction marketing de votre entreprise ? Elle aura le sourire rien qu’à l’idée d’un référencement naturel boosté !
En somme, tous seront contents ! Ne reste plus qu’à demander si vous l’êtes aussi ? Si cet article de blog est parvenu à donner une bonne définition des sites statiques ? Si ce texte a joué son rôle de formation et répondu, comme promis, à toutes vos questions ?
