c5165a407a
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>
73 lines
2.4 KiB
Markdown
73 lines
2.4 KiB
Markdown
# 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
|