Quand on est hébergeur et qu'on parle d'éco-responsabilité à longueur de journée, le minimum c'est que notre propre site soit cohérent avec nos valeurs.
Notre ancien site faisait le travail, mais il pesait lourd, chargeait lentement et nécessitait des mises à jour constantes. Pas très crédible quand on conseille ses clients sur la performance.
Alors on a tout repris de zéro.
Pas de CMS, pas de framework
Le nouveau datacampus.fr tient en trois lignes :
HTML5 + PHP includes — pas de base de données, pas de CMS, pas de cache à configurer. Le header, le footer et la navigation sont partagés via de simples include().
Un fichier CSS unique — 29 Ko minifié (dont 4 Ko de CSS critique inline pour le premier affichage). Pas de Bootstrap, pas de Tailwind. Des custom properties pour les couleurs, les espacements et la typographie.
Du JavaScript vanilla — 10 Ko minifié, chargé en defer. Navigation mobile, animations, consentement cookies, et quelques Easter eggs. Zéro dépendance npm.
Des choix techniques délibérés
Chaque décision a été passée au même filtre : est-ce que c'est nécessaire ?
| Sujet | Notre choix | Ce qu'on évite |
|---|---|---|
| Typographie | Inter + JetBrains Mono, self-hosted woff2 | Google Fonts |
| Icônes | SVG inline (Phosphor Icons) | Font d'icônes, sprites |
| Images | loading="lazy", dimensions explicites, WebP |
CLS, requêtes inutiles |
| Analytics | Matomo auto-hébergé | Google Analytics, cookies tiers |
| Carte | OpenStreetMap | Google Maps |
Performance : les chiffres
Mesuré par Google PageSpeed Insights (Lighthouse 13) sur la homepage, mars 2026 :
Score Lighthouse Desktop : 100/100
Performance 100 · Accessibilité 100 · Bonnes pratiques 100 · SEO 100
Sur mobile (4G lente simulée), le score atteint 91/100 avec un FCP à 1,5s, un Speed Index à 2,8s et un CLS quasi nul. Accessibilité, bonnes pratiques et SEO : 100/100 sur les deux.
À titre de comparaison, la page d'accueil moyenne d'un hébergeur français dépasse souvent les 3 Mo et un score Lighthouse inférieur à 50.
On fait 100/100 avec moins de 300 Ko.
Ce qu'on y gagne
Rapidité
Les pages se chargent instantanément. Le serveur n'a rien à calculer : pas de requête SQL, pas de rendu côté serveur complexe. Apache sert des fichiers quasi-statiques.
Sécurité
Pas de CMS = pas de failles liées aux plugins, pas de surface d'attaque inutile. Le formulaire de contact est protégé par un token CSRF et un honeypot, pas par un reCAPTCHA Google.
Maintenance
Zéro mise à jour à faire. Pas de core à patcher, pas de thème à mettre à jour, pas de dépendance qui casse. Le site est déployé par un simple rsync.
Cohérence
Un site léger sur des serveurs immergés, alimentés en énergie renouvelable. La sobriété numérique, ce n'est pas un label marketing — c'est un choix d'entreprise.
Accessible par défaut
Un site rapide et léger, c'est bien. Un site que tout le monde peut utiliser, c'est mieux. On a travaillé l'accessibilité dès la conception, en suivant les recommandations WCAG 2.1 niveau AA :
- Skip link — un lien invisible au chargement permet aux utilisateurs clavier de sauter directement au contenu, sans traverser toute la navigation.
- Navigation clavier complète — les menus déroulants se pilotent au clavier (flèches haut/bas, Escape pour fermer). Chaque élément interactif a un
focusvisible. - Contrastes conformes — le texte courant (#4a4a5a sur blanc) atteint un ratio de 8,7:1. Les liens (#0277bd) atteignent 4,8:1. Tout passe le seuil AA de 4,5:1.
- HTML sémantique —
<header>,<nav>,<main>,<footer>, hiérarchie de titres cohérente. Les lecteurs d'écran s'y retrouvent. - Formulaires accessibles — chaque champ a son
<label>, les erreurs sont annoncées viaaria-live, le bouton d'envoi a un libellé explicite. - Respect du
prefers-reduced-motion— si votre système demande moins d'animations, le site désactive les particles, les transitions et les effets de scroll. - Images avec texte alternatif — les images informatives ont un
altdescriptif, les icônes décoratives portentaria-hidden="true". - Tableaux lisibles — les en-têtes de colonnes portent
scope="col"et les tableaux ont unaria-labelpour les technologies d'assistance.
Résultat : score Lighthouse Accessibilité de 100/100 sur desktop comme sur mobile.
L'accessibilité n'est pas un bonus cosmétique. C'est une question de respect pour les utilisateurs — et un fondement du web tel qu'il a été conçu.
Et pour les robots ?
Un site lu par des humains, c'est la base. Un site que Google, ChatGPT et Perplexity comprennent parfaitement, c'est un avantage. On a travaillé le SEO technique et la lisibilité machine dès le départ.
Données structurées JSON-LD
Chaque page embarque des données structurées au format JSON-LD, directement dans le <head>. Google les utilise pour générer des résultats enrichis (rich snippets) dans ses pages de résultats.
- Organization — nom, adresse, téléphone, logo, lien LinkedIn. Présent sur toutes les pages.
- WebSite — uniquement sur la homepage, pour aider Google à identifier le site.
- BreadcrumbList — généré dynamiquement sur chaque page interne (Accueil > Nom de la page). Améliore la navigation dans les résultats de recherche.
- FAQPage — sur la page FAQ et la page SLA, chaque question/réponse est balisée. Google peut les afficher directement dans les résultats.
- Article — sur chaque article de blog, avec titre, date, auteur et description.
Open Graph & Twitter Cards
Quand quelqu'un partage une page sur LinkedIn, Twitter ou Slack, les balises Open Graph et Twitter Cards contrôlent le titre, la description et l'image affichés. Chaque page a ses propres métadonnées, pas un défaut générique.
Sitemap dynamique
Le sitemap.xml est généré en PHP : il liste automatiquement toutes les pages du site avec leurs dates de dernière modification. Les moteurs de recherche savent immédiatement quand une page a changé.
Un llms.txt pour les agents IA
Les agents conversationnels (ChatGPT, Claude, Perplexity) cherchent de plus en plus à comprendre les sites qu'ils visitent. Le fichier llms.txt à la racine du site leur fournit un résumé structuré : qui est Datacampus, quels services on propose, où est notre datacenter, quelles technologies on utilise. C'est l'équivalent du robots.txt, mais pour les IA.
Robots & crawlers IA
Le robots.txt autorise explicitement les principaux crawlers IA : GPTBot (OpenAI), Claude-Web (Anthropic), PerplexityBot et Amazonbot. Beaucoup de sites les bloquent par défaut. Nous, on préfère être visibles et correctement référencés par ces nouveaux moteurs de recherche conversationnels.
Résultat SEO : score Lighthouse SEO de 100/100 sur desktop comme sur mobile. Canonical, lang, meta description, alt images, headings, sitemap, robots.txt — tout est en place.
Éco-responsable par conception
La sobriété numérique, ce n'est pas un badge qu'on colle sur un site de 4 Mo bourré de plugins. C'est une démarche d'architecture. Chaque octet économisé réduit la consommation énergétique à chaque étape : serveur, réseau, terminal utilisateur.
⚡ Poids minimal
Moins de 300 Ko par page, contre 2 à 5 Mo pour un site classique. Moins de transfert = moins d'énergie consommée sur le réseau et les terminaux.
🏭 Hébergé en immersion
Le site tourne sur nos propres serveurs immergés dans un fluide diélectrique. Zéro climatisation, consommation réduite de 30 à 40 % par rapport à un datacenter classique.
🌿 Zéro dépendance externe
Pas de CDN tiers, pas de Google Fonts, pas de scripts externes. Chaque requête reste locale. Moins de serveurs sollicités = moins d'énergie gaspillée.
♻️ Durée de vie longue
Pas de framework à mettre à jour, pas de dépendance qui casse. Le code est pérenne : moins de refonte = moins de ressources consommées sur le cycle de vie.
Au-delà du site, c'est toute notre infrastructure qui suit cette logique. Notre datacenter au Futuroscope fonctionne à l'énergie 100 % renouvelable, avec un PUE parmi les meilleurs du secteur grâce au refroidissement par immersion. Une empreinte carbone difficilement égalable dans l'hébergement français.
Score EcoIndex : la homepage obtient un A avec seulement 6 requêtes, un DOM léger et moins de 300 Ko transférés. Quand la technique et l'écologie s'alignent, ça se mesure.
Le mot de la fin
On ne dit pas que tout le monde devrait abandonner les CMS. Mais quand on héberge des centaines de sites pour nos clients, on sait exactement ce qui coûte cher en ressources et ce qui n'apporte rien.
Pour un site vitrine d'entreprise, la meilleure stack est souvent la plus simple.
Si vous êtes curieux, faites Ctrl+U et regardez le code source. Il est lisible. C'est fait exprès.
— Pierre, fondateur de Datacampus