Dans vos locaux
Pour ancrer les apprentissages et encourager la dynamique collective.
Formation Écoconception front-end : web sobre et performant
Réduisez le poids et le nombre de requêtes d'une page web pour livrer des interfaces sobres, rapides et mesurées.
Optimisez images, polices et ressources chargées, limitez les traitements côté navigateur, et mesurez le gain de performance et de sobriété obtenu sur une application réelle plutôt que sur un cas d'école.
@media (prefers-reduced-data: reduce) {
.hero-video { display: none; }
.hero-img { content: url("hero-light.avif"); }
}
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
font-display: swap;
}Description
Cette formation traite la partie la plus visible de l'empreinte d'un service web : le poids des pages, le nombre de requêtes, les images, les polices et les traitements exécutés côté navigateur. Les participants apprennent à limiter le JavaScript inutile, à différer le chargement des ressources non critiques, à optimiser les formats d'image et à réduire la consommation d'énergie induite par les animations et les traitements client. Chaque optimisation est appliquée puis mesurée sur une application réelle, à l'aide d'outils de mesure de performance web, pour objectiver le gain obtenu. Elle s'adresse aux développeurs front-end, intégrateurs, développeurs full stack et référents techniques amenés à corriger un front-end existant.
Les objectifs
réduire le poids et le nombre de requêtes d'une page web
optimiser images, polices et ressources chargées
limiter les traitements côté navigateur et la consommation d'énergie
mesurer la sobriété et la performance d'une interface
corriger un front-end existant et mesurer le gain obtenu
Public visé
Développeurs front-end, intégrateurs, développeurs full stack, référents techniques.
Prérequis
Pratique de HTML, CSS et JavaScript.
Le programme
Jour 1
Matinée
1. Mesurer avant d'optimiser
- Ce qui consomme réellement côté navigateur : réseau, processeur, mémoire, écran
- Outils de mesure : outils de développement, audits, scores environnementaux
- Mesure de référence d'une application existante
- Lecture d'une cascade de chargement et identification des goulots
- Distinction entre performance perçue et consommation réelle
- Travaux pratiques : mesure de référence complète de l'application fil rouge
Après-midi
2. Ressources et médias
- Images : formats modernes, dimensionnement, chargement différé, images responsives
- Polices : nombre, formats, chargement, alternatives système
- Vidéo et animations : coût réel et alternatives
- Compression, mise en cache et en-têtes associés
- Réduction du nombre et du poids des requêtes
- Travaux pratiques : optimisation des médias et mesure du gain en poids et en énergie
Jour 2
Matinée
3. Code et exécution
- Poids du JavaScript et coût d'exécution sur terminal ancien
- Découpage du code et chargement à la demande
- Dépendances : audit, remplacement, suppression
- CSS sobre et évitement des animations coûteuses
- Rendu serveur et statique : effets sur la consommation côté client
- Travaux pratiques : réduction du code chargé et mesure sur un terminal contraint
Après-midi
4. Conception et industrialisation
- Sobriété fonctionnelle et éditoriale d'une interface
- Compatibilité avec des navigateurs et terminaux anciens
- Intégration des contrôles de sobriété dans la chaîne de livraison
- Budgets de performance et seuils de non-régression
- Documentation et déclaration d'écoconception du front-end
- Travaux pratiques : mise en place d'un budget de performance et de son contrôle automatisé
Jour 3
Matinée
5. Accessibilité et sobriété
- Pratiques bénéfiques aux deux dimensions : structure, contrastes, simplicité
- Cas où accessibilité et sobriété entrent en tension
- Vérification conjointe et outillage
- Contenus alternatifs et allègement
- Tests utilisateurs sur terminaux et connexions contraints
- Travaux pratiques : audit conjoint accessibilité et sobriété d'une page
Après-midi
6. Bilan et pérennisation
- Mesure finale et comparaison avec la référence initiale
- Hiérarchisation des optimisations par effet et par effort
- Règles d'équipe et revue de code orientée sobriété
- Suivi dans la durée et prévention des régressions
- Restitution des gains aux parties prenantes
- Travaux pratiques : restitution des résultats obtenus et plan de maintien
Dernière mise à jour : 18 septembre 2026
En présentiel ou à distance : à vous de choisir
En classe virtuelle
Pour allier flexibilité et interactions en temps réel avec le formateur.
Dans nos locaux
Pour favoriser la concentration, les échanges et le confort des apprenants.
Les modalités de formation
Suivi et évaluation :
- Recueil des besoins en amont pour identifier les attentes du stagiaire
- Évaluation continue : études de cas et travaux pratiques pendant la formation
- Évaluation finale : questionnaire d'auto-évaluation
Format et encadrement :
- Formation équilibrée alliant théorie et pratique (minimum 50%)
- Sessions en petits groupes (2 à 9 participants) pour un suivi personnalisé
- Émargement par demi-journée et remise d'une attestation de formation
Moyens pédagogiques et techniques :
- Méthodes interactives et suivi des acquis : travaux pratiques, projet fil rouge, mises en situation, démonstrations, QCM…
- Les stagiaires doivent être équipés de leur matériel informatique pour suivre la formation, que ce soit dans nos locaux ou sur site externe.
- Les prérequis techniques seront communiqués aux apprenants en amont de la formation, lors de l'analyse des besoins, en fonction des spécificités de chaque client.
- Accessibilité: nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d'adapter les sessions en cas de situations spécifiques. Nous nous engageons à répondre à toutes les demandes dans un délai de 48h ouvré.
Conditions et délais d'accès :
- Si l'une de nos formations vous intéresse, contactez-nous au +33 04 93 65 34 24 ou à l'adresse mail contact@le-code.dev. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d'adapter la formation et ses modules, puis nous vous adresserons un devis. Les dates de la formation seront à convenir sous 30 jours maximum.
- Concernant les formations Actions Collectives, l'inscription est possible jusqu'à 24h ouvrées avant le début de la formation.