perf: remove framer-motion and lucide-react from critical path
All checks were successful
Gitea CI / test-build (push) Successful in 11m36s

- Remove framer-motion from Hero.tsx and HeaderClient.tsx, replace with CSS animations/transitions
- Replace lucide-react icons (Menu, X, Mail) with inline SVGs in HeaderClient.tsx
- Lazy-load About, Projects, Contact, Footer via dynamic() imports in ClientWrappers.tsx
- Defer ShaderGradient/BackgroundBlobs loading via requestIdleCallback in ClientProviders.tsx
- Remove AnimatePresence page wrapper that caused full re-renders
- Enable experimental.optimizeCss (critters) for critical CSS inlining
- Add fadeIn keyframe to Tailwind config for CSS-based animations

Homepage JS reduced from 563KB to 438KB (-125KB).
Eliminates ~39s main thread work from WebGL init and layout thrashing.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-04 11:13:10 +01:00
parent f62db69289
commit de3ef37b48
8 changed files with 235 additions and 256 deletions

View File

@@ -34,6 +34,7 @@ const nextConfig: NextConfig = {
experimental:
process.env.NODE_ENV === "production"
? {
optimizeCss: true,
optimizePackageImports: ["lucide-react", "framer-motion", "three", "@react-three/fiber"],
}
: {