Aller au contenu principal

Performance frontend

Statut​

Document de cadrage frontend — version initiale.

Objectif​

La performance frontend doit garantir une expérience rapide et stable, surtout sur mobile et connexions variables.

DMV ne doit pas sacrifier la rapidité pour des effets visuels ou une accumulation de scripts.

État actuel visible​

Le repo montre plusieurs éléments favorables :

  • Next.js pour le site public ;
  • export statique en production dans next.config.mjs ;
  • routes publiques avec dynamic = "force-static" sur plusieurs pages ;
  • lazy loading des pages backoffice ;
  • manualChunks Vite pour React et Supabase ;
  • usage dynamique des cartes Leaflet avec SSR désactivé ;
  • Tailwind CSS ;
  • manifest PWA ;
  • SWR ponctuel.

Principes​

  • Optimiser d'abord le mobile.
  • Réduire le JavaScript public inutile.
  • Charger les cartes seulement quand nécessaire.
  • Optimiser images, logos et médias.
  • Garder les pages publiques SEO rapides.
  • Préférer le rendu statique quand les données le permettent.
  • Éviter les dépendances lourdes sans besoin clair.

Points sensibles​

SujetRisque
Cartes LeafletBundle lourd, rendu client uniquement.
Médias acteursImages ou documents trop lourds.
BackofficePages riches et tables volumineuses.
Supabase directRequêtes dispersées et difficiles à optimiser.
AnalyticsMesures trop fréquentes si non limitées.
PWA cacheInvalidation incorrecte ou données obsolètes.

Backoffice​

Le backoffice peut accepter plus de complexité que le public, mais doit rester efficace :

  • lazy loading maintenu ;
  • pagination ou filtres sur grandes listes ;
  • requêtes parallèles maîtrisées ;
  • loaders compréhensibles ;
  • erreurs visibles.

Vision cible​

La cible performance inclut :

  • budgets de performance mobile ;
  • mesure Core Web Vitals côté public ;
  • optimisation des images ;
  • cache API/CDN maîtrisé ;
  • réduction des accès directs dispersés ;
  • monitoring frontend raisonnable ;
  • tests sur appareils modestes.

Points à clarifier​

  • Budget de bundle par application.
  • Stratégie image complète.
  • Mesures Core Web Vitals effectives.
  • Impact de React Leaflet.
  • Cache entre Next, Cloudflare et API Laravel.
  • Performance des pages backoffice les plus lourdes.