Skip to content

optimize.md

Latest commit

 

History

History
12 lines (11 loc) · 2.65 KB

optimize.md

File metadata and controls

12 lines (11 loc) · 2.65 KB
Raw

Loading Time Optimization Tips

  1. EN: Move the top-level page to a Server Component and isolate useStats in a small Client Component so only the live counters hydrate; FR: Passez la page principale en Server Component et isolez useStats dans un petit Client Component pour n'hydrater que les compteurs temps reel.
  2. EN: Lazy-load heavy UI blocks like CumulativeStatsTable and SnapshotStatsTable with next/dynamic and a lightweight skeleton to reduce initial JS; FR: Chargez paresseusement CumulativeStatsTable et SnapshotStatsTable avec next/dynamic et un skeleton leger pour reduire le JS initial.
  3. EN: Use Framer Motion LazyMotion with domAnimation and avoid importing the full motion bundle on the first paint; FR: Utilisez LazyMotion avec domAnimation et evitez d'importer tout Framer Motion au premier rendu.
  4. EN: Defer the 100ms update loop until after first paint or idle time (requestIdleCallback) to improve LCP and TTI; FR: Differez la boucle de mise a jour 100ms apres le premier rendu ou en idle (requestIdleCallback) pour ameliorer LCP et TTI.
  5. EN: Reduce hydration work by rendering static headings, descriptions, and layout server-side and keeping only numbers client-side; FR: Reduisez l'hydratation en rendant titres, descriptions et layout cote serveur et en gardant seulement les nombres cote client.
  6. EN: Remove headers() usage from src/app/layout.tsx so the root layout can be static and cached, and set lang in src/app/[locale]/layout.tsx; FR: Retirez headers() dans src/app/layout.tsx pour rendre le layout racine statique et cache, puis definissez lang dans src/app/[locale]/layout.tsx.
  7. EN: Enable experimental.optimizePackageImports in next.config.js for lucide-react, @tanstack/react-table, and framer-motion to trim bundle size; FR: Activez experimental.optimizePackageImports dans next.config.js pour lucide-react, @tanstack/react-table et framer-motion afin de reduire le bundle.
  8. EN: Virtualize long tables (TanStack Table + windowing) so only visible rows render and hydrate; FR: Virtualisez les longues tables (TanStack Table + windowing) pour ne rendre et hydrater que les lignes visibles.
  9. EN: Split per-locale message files and load only the current locale namespace to cut JSON payload size; FR: Decoupez les fichiers de messages par locale et chargez uniquement le namespace courant pour reduire la taille JSON.
  10. EN: Run pnpm next build with the Next.js analyzer and remove unused dependencies (ex: Radix packages not used on the landing view); FR: Lancez pnpm next build avec l analyzer Next.js et supprimez les dependances inutiles (ex: packages Radix non utilises au premier rendu).