Performance

ScaleRocket est optimise pour la vitesse des le depart. Chaque page se charge rapidement, chaque interaction est reactive, et vos scores Lighthouse commencent haut.

Optimisations integrees

Next.js 16 + Turbopack

• Rendu cote serveur pour les pages marketing (premier affichage instantane)
• Turbopack comme bundler par defaut (builds plus rapides, sortie optimisee)
• Decoupe automatique du code par route
• Generation statique pour les pages qui ne changent pas

Chargement des polices

Les polices sont chargees via next/font/google qui :

• Heberge la police localement (zero requete externe)
• Empeche les decalages de mise en page avec font-display: swap
• Precharge les fichiers de police critiques

En-tetes de securite

CSP, HSTS et d'autres en-tetes de securite sont pre-configures dans next.config.ts. Google favorise les sites securises dans son classement.

Tailwind CSS v4

• Suppression automatique des styles inutilises
• Sortie CSS minimale en production
• Aucun surcout CSS-in-JS a l'execution

Core Web Vitals

Google utilise trois metriques pour mesurer l'experience utilisateur :

Comment ScaleRocket vous aide

• LCP : Pages rendues cote serveur, polices optimisees, aucune ressource bloquant le rendu
• INP : JavaScript minimal, React 19 efficace avec batching automatique
• CLS : Dimensions d'image explicites, font-display: swap, etats de chargement avec squelettes

Tests de performance avec Chrome MCP

ScaleRocket inclut un skill de test de performance integre, propulse par Chrome DevTools MCP.

claude
> /scalerocket-perf http://localhost:3000

Cela execute automatiquement :

1. Audit Lighthouse — Scores de Performance, Accessibilite, SEO, Bonnes Pratiques
2. Core Web Vitals — LCP, INP, CLS avec reussite/echec
3. Trace de performance — Chronologie de chargement de la page, temps d'execution JavaScript
4. Analyse reseau — Ressources les plus volumineuses, elements bloquant le rendu
5. Erreurs console — Erreurs JavaScript, avertissements React
6. Suggestions d'optimisation — Liste priorisee de corrections

Necessite Chrome DevTools MCP configure dans .mcp.json (pre-configure dans le boilerplate).

Optimisation du bundle

Analyser votre bundle

npx next build

La sortie du build affiche la taille de chaque page. Visez :

• First Load JS < 100 Ko par page
• JS partage total < 200 Ko

Imports dynamiques

Chargez en differe les composants lourds qui ne sont pas necessaires au rendu initial :

import dynamic from "next/dynamic";

const HeavyChart = dynamic(() => import("./Chart"), {
  ssr: false,
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded-xl" />,
});

Tree shaking

Importez uniquement ce dont vous avez besoin :

// Mauvais — importe la bibliotheque entiere
import _ from "lodash";

// Bon — importe uniquement la fonction
import debounce from "lodash/debounce";

Optimisation des images

Utilisez le composant Image de Next.js pour une optimisation automatique :

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Section hero"
  width={1200}
  height={630}
  priority        // Uniquement pour les images au-dessus de la ligne de flottaison
  placeholder="blur"
/>

Avantages :

• Conversion automatique en WebP/AVIF
• Generation de srcSet responsive
• Chargement differe par defaut
• Empeche les decalages de mise en page (dimensions explicites)

Strategies de mise en cache

// ISR : regenere la page toutes les heures
export const revalidate = 3600;

export default async function BlogPage() {
  const posts = await fetchPosts();
  return <BlogList posts={posts} />;
}

const { data } = useQuery({
  queryKey: ["dashboard-stats"],
  queryFn: fetchStats,
  staleTime: 5 * 60 * 1000, // Cache 5 minutes
});

// Cette requete est mise en cache et se met a jour automatiquement quand les donnees changent
const stats = useQuery(api.dashboard.getStats);

Checklist de performance

• Toutes les images utilisent next/image ou ont des dimensions explicites
• Polices chargees avec next/font (aucune requete de police externe)
• Composants lourds charges en differe avec next/dynamic
• Aucune dependance inutilisee dans package.json
• LCP < 2.5s sur toutes les pages
• INP < 200ms sur les pages interactives
• CLS < 0.1 sur toutes les pages
• Lighthouse Performance > 90
• Lighthouse Accessibilite > 90
• Lighthouse SEO > 90
• Lancer /scalerocket-perf avant chaque deploiement