Notre engagement
GreenIT
INNOSYS mesure et optimise l'empreinte environnementale de son site. Cette page détaille les métriques actuelles, les actions mises en œuvre et les objectifs d'amélioration.
/ 100
EcoIndex v1
Grade
Top ~5 % du web
KB
transférés
DOM
éléments
Score EcoIndex · Mesuré le 25/06/2026
Grade B — meilleur que ~95 % des sites web analysés
Poids
110 KB
Top 9 %
Requêtes
10
Top 8 %
DOM
495
Mieux que 58 %
Ce que le Grade B signifie
L'EcoIndex est calculé sur un dataset de 100 000 URLs réelles. Avec un score de ~74/100, le site INNOSYS se classe parmi les ~5 % les plus sobres du web. Le Grade B exige un score supérieur à 70.
Le web en moyenne
Le site web médian score −2 (Grade E). Poids ~7 500 KB, ~379 requêtes, ~7 390 éléments DOM. La grande majorité des sites commerciaux sont en D ou E.
INNOSYS aujourd'hui
Score ~74/100. Poids et requêtes dans le top ~9 % ; DOM à 495 éléments (mieux que 58 % des sites, et 15× sous la médiane).
Objectif suivant
Le Grade A débute à 80/100 (DOM ≤ ~360). Le seul levier restant est la réduction du DOM : le poids et les requêtes sont déjà quasi optimaux.
Formule EcoIndex v1 (implémentation de référence cnumr/ecoindex) · Dataset officiel ecoindex.fr · DOM mesuré dans le navigateur (hors contenu <template>) · Score à confirmer sur l'URL de production.
Détail des trois indicateurs
Les trois métriques de l'EcoIndex mesurent le trafic réseau, le nombre d'appels et la complexité de la page. Le poids et les requêtes sont dans le top ~9 % ; le DOM reste le principal levier d'amélioration.
Poids de la page (brotli)
HTML
12.8 KB
brotli −88 %
CSS
14.6 KB
brotli −87 %
JavaScript
30.1 KB
brotli −67 %
Police + Images
52.5 KB
Inter Latin + logo
Appels réseau
HTML
1
CSS
1
JS
1
Polices
2
Images
5
Google Fonts supprimé (−2 appels cross-origin) · Polices hébergées en local
Complexité HTML
Mesuré dans le navigateur : 495 éléments (le contenu des menus en <template x-if> n'est pas compté tant qu'ils sont fermés). C'est 15× sous la médiane EcoIndex (7 390), mais le DOM reste l'axe le moins optimal — donc le principal levier vers le Grade A.
Optimisations GreenIT livrées
Chaque optimisation est documentée avec son impact mesurable. Sprint GreenIT finalisé le 25 juin 2026.
Images WebP
Conversion logo + équipe + partenaires
15 fichiers convertis de JPEG/PNG vers WebP. Les navigateurs modernes reçoivent automatiquement le format optimal via l'élément <picture>.
Logo
9 KB → 4.7 KB
−49 %
Partenaires (4)
3 300 KB → 275 KB
−92 %
Compression Brotli
nginx fholzer/nginx-brotli · Vite pre-build
Le serveur sert les assets en Brotli (br), algorithme plus efficace que gzip. Les fichiers .gz et .br sont pré-générés au build — aucun CPU serveur consommé en production.
CSS (118 KB brut)
14.9 KB brotli
−87 %
JS (92 KB brut)
30.1 KB brotli
−67 %
Polices hébergées en local
@fontsource-variable/inter · Zéro appel Google
La police Inter Variable (utilisée sur l'ensemble du site) était précédemment chargée depuis fonts.googleapis.com. Elle est désormais auto-hébergée, ce qui supprime 2 appels réseau vers des serveurs tiers et améliore la confidentialité des visiteurs.
En-têtes de sécurité & CSP
Content-Security-Policy activée en production
La Content-Security-Policy est désormais active. Elle restreint les ressources autorisées aux seuls domaines nécessaires (font-src 'self', Google Analytics uniquement) et prévient le chargement de ressources parasites.
prefers-reduced-motion
Respect du choix utilisateur
Les animations décoratifs (particules flottantes, fondus, effets shimmer) sont automatiquement désactivées pour les visiteurs ayant activé la préférence d'accessibilité « Réduire les animations » dans leur système.
Chargement différé (lazy)
Images hors-écran non chargées au démarrage
L'attribut loading="lazy" est appliqué sur toutes les images qui ne sont pas immédiatement visibles. Le navigateur ne les charge que lorsque le visiteur les approche, réduisant le trafic réseau initial.
Réduction DOM — Alpine.js x-if
Menus navigation supprimés du DOM quand fermés
Les trois menus de navigation (mega-menu Services, dropdown Secteurs, menu mobile) utilisaient x-show qui maintient les éléments dans le DOM masqués. Remplacés par x-if sur <template>, leur contenu n'est jamais compté par le navigateur tant que les menus sont fermés.
Mega-menu
~67 éléments
hors DOM
Dropdown
~38 éléments
hors DOM
Menu mobile
~18 éléments
hors DOM
Icônes en CSS mask (0 nœud DOM)
Cartes, boutons et contacts — visuel identique
Les icônes décoratives (cartes services/secteurs, boutons d'action, coordonnées du footer) étaient chacune un couple <svg><path> = 2 nœuds. Elles sont désormais rendues via un pseudo-élément CSS ::before avec mask-image (data URI inline) : aucun nœud DOM, aucune requête réseau supplémentaire, rendu pixel-identique.
Étoiles avis
15 SVG → ★
−28 nœuds
Icônes cartes/boutons
18 SVG → mask
−36 nœuds
Flèches « → »
SVG → texte
−18 nœuds
Efficacité côté serveur
Moins de calcul serveur = moins d'énergie consommée par requête.
Cache Redis
Les requêtes en base de données (paramètres, liste des services, sitemap) sont mises en cache Redis avec TTL 1h–30min. Une visite type ne génère plus qu'1 requête SQL au lieu de 19+.
Assets statiques
CSS, JS et images sont servis avec Cache-Control: public, immutable, max-age=1y. Un visiteur qui revient ne re-télécharge pas les assets déjà en cache navigateur.
Hébergement mutualisé
Le site est déployé sur un VPS Docker à Paris, évitant les aller-retours transatlantiques. L'architecture conteneurisée optimise l'utilisation des ressources matérielles.
Grade B atteint — cap sur le A
Score ~74/100. Les optimisations DOM (x-if, icônes CSS mask) sont livrées. Le Grade A (≥ 80/100, DOM ≤ ~360) reste accessible en poursuivant la réduction du DOM.
Réduction DOM x-if + icônes CSS mask — Livré
Menus en <template x-if> (hors DOM fermés) ; étoiles, flèches et icônes converties en texte/CSS mask. DOM navigateur ramené à 495 éléments → score ~74, Grade B.
Poursuivre la réduction du DOM vers le Grade A
Le Grade A débute à 80/100, soit un DOM ≤ ~360 éléments (contre 495 aujourd'hui). Cibles : simplifier les sections riches en cartes et fusionner les wrappers superflus.
Tree-shaking Alpine.js
Alpine.js complet représente ~40 KB en brotli. N'importer que les composants effectivement utilisés (x-data, x-if, x-transition) réduirait ce poids à ~15 KB.
Valider en production sur ecoindex.fr
Les mesures actuelles sont prises sur l'environnement local (localhost). Le score officiel sera validé sur l'URL de production une fois le déploiement effectué.
Méthodologie : EcoIndex v1 · Dataset 100 000 URLs · ecoindex_python
DOM navigateur : 495 éléments (hors templates) · Score ~74/100, Grade B · Poids et requêtes top ~9 % · Validation sur production recommandée