Figma
CursorÉCOCONCEPTION BUDGET POIDS
Prérequis
- Cibles performance projet validées (LCP, poids première visite)
- Stack Next.js avec next/font ou équivalent
- Accès Lighthouse CI ou audit manuel en recette
- Brief ou base Notion pour documenter les seuils par type de page
Chaque mégaoctet évité réduit l’empreinte carbone et améliore l’expérience mobile — surtout sur réseau 4G instable. Budgéter poids page, images et polices dès la conception Figma évite les refontes tardives coûteuses. Vous allez formaliser des seuils mesurables, les appliquer en Next.js et les contrôler à chaque release.
Définir les budgets dès la conception
Fixez des seuils par type de page : accueil, listing, fiche produit, article. Documentez-les dans Notion ou le brief ClickUp : poids total transféré, élément LCP, nombre de requêtes critiques.
En Figma : export WebP/AVIF, pas d’assets 4K inutiles. Indiquez les dimensions cibles dans les specs handoff (ex. hero 1920×1080 → livrable 1600 px large max).
Polices : max deux familles, graisses réellement utilisées. Prévoyez le fallback system-ui dans le design system.
Implémenter en Next.js
Images : composant next/image, sizes adaptés, priority uniquement sur le LCP. Lazy load below the fold. Formats modernes via CDN ou configuration hébergeur.
Polices : next/font avec subset latin, display swap. Évitez les @import Google Fonts bloquants dans le CSS global.
Avec Cursor : rule performance rappelant budgets et interdisant import d’assets lourds sans justification dans la PR.
Mesurer et faire respecter le budget
Lighthouse CI en pipeline ou audit manuel avant chaque MEP. Comparez poids JS, images et fonts release N vs N-1.
Bloquez ou alertez si dépassement > 10 % du budget sans ticket d’exception PM. Le bundle analyzer identifie les dépendances JS gonflées.
Green IT score (EcoIndex, etc.) en complément — les budgets techniques restent la base opérationnelle quotidienne.
Erreurs fréquentes
Optimiser uniquement en fin de projet : refonte images et fonts coûteuse.
Slider hero avec cinq images 2 Mo chacune « parce que le client les a fournies ».
Icon fonts complètes pour douze pictogrammes.
Pas de mesure post-MEP : régression silencieuse au sprint suivant.
Ce qu’il faut retenir
Budget écrit au kick-off : poids, LCP, polices.
Figma + next/image + next/font = leviers majeurs.
Mesure à chaque release, exception tracée si dépassement.
Écoconception = perf utilisateur + empreinte, pas un label isolé.
FAQ
Les deux : EcoIndex pour la communication client ; budgets poids/LCP pour les décisions dev quotidiennes.
Pipeline de resize à l’upload, formats modernes, dimensions max documentées dans le guide éditeur Notion.
Oui si trafic majoritairement mobile : seuil LCP et poids plus stricts sur le viewport mobile simulé Lighthouse.
