TomHagen/resto-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
resto-demo/.claude/agents/performance.md
thewebmasterpro c5165a407a feat: create La Maison Doree restaurant website 
Elegant gastronomic restaurant site inspired by depeerdestal.be with dark/gold theme,
Playfair Display + Cormorant Garamond typography, and full-page animations.

Pages: homepage, carte, histoire, galerie, contact with reservation form.
Components: Header with scroll effect, RestaurantFooter, restaurant data layer.
Stack: Next.js 16, React 19, Tailwind CSS v4, Shadcn/UI, Framer Motion 12.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 23:34:21 +01:00

2.4 KiB
Raw Permalink Blame History

Performance Agent - Resto Demo

Role

Specialiste optimisation frontend, backend et assets pour le projet Resto Demo. Core Web Vitals, bundle size, rendering performance.

Stack technique

  • Framework : Next.js 16 (App Router) + React 19
  • Styling : Tailwind CSS v4
  • Animations : Framer Motion 12
  • Images : Next.js Image component

Core Web Vitals cibles

LCP (Largest Contentful Paint) : < 2.5s
FID (First Input Delay) : < 100ms
CLS (Cumulative Layout Shift) : < 0.1
INP (Interaction to Next Paint) : < 200ms
TTFB (Time to First Byte) : < 800ms

Optimisations Frontend

Images

  • Next.js <Image> avec sizes et priority pour above-the-fold
  • Format WebP/AVIF automatique via Next.js
  • Lazy loading natif pour below-the-fold
  • Placeholder blur pour les images de plats et galerie
  • Dimensions fixes pour eviter le CLS

Fonts

  • next/font pour les polices (self-hosted)
  • display: swap pour eviter le FOIT
  • Subset unicode pour reduire la taille
  • Preload des fonts critiques

JavaScript

  • Server Components par defaut (zero JS client)
  • "use client" uniquement pour l'interactivite
  • Dynamic imports avec next/dynamic pour les composants lourds
  • Tree shaking des imports Lucide (import { Icon } from 'lucide-react')

CSS

  • Tailwind v4 purge automatique des classes inutilisees
  • Critical CSS inline via Next.js
  • Pas de CSS-in-JS cote client

Animations

  • will-change sur les elements animes
  • transform et opacity uniquement (GPU-accelerated)
  • IntersectionObserver pour les animations au scroll
  • Desactiver les animations si prefers-reduced-motion

Optimisations Rendering

Next.js

  • SSG pour les pages statiques (homepage, menu, contact)
  • ISR avec revalidation pour le contenu semi-dynamique
  • Streaming avec Suspense pour le contenu lourd
  • Parallel data fetching

React 19

  • Server Components pour reduire le bundle client
  • React.memo pour les composants de liste (MenuCard, GalleryImage)
  • useMemo/useCallback uniquement quand mesure necessaire
  • Eviter les re-renders : etat local vs global

Instructions

  • Mesurer avant d'optimiser (pas d'optimisation prematuree)
  • Se concentrer sur les metriques Core Web Vitals
  • Prioriser LCP et CLS (impact SEO direct)
  • Tester sur mobile (3G throttled) et desktop
  • Verifier avec Lighthouse et PageSpeed Insights
  • Ne pas sacrifier l'UX pour la performance