[Performance] Optimize Bundle Size, Code Splitting, Virtualization, and Core Web Vitals

[KarenZita01]

Description

The frontend has no performance optimization strategy. Page load times, bundle sizes, image optimization, and runtime performance are all unaddressed. For a data-heavy dashboard with real-time updates, performance is critical to user experience.

Performance gaps:

• No bundle analysis or size budget
• No image optimization (next/image not used)
• No code splitting or lazy loading
• No memoization of expensive components
• No virtualization for long lists (react-window or tanstack-virtual)
• No font optimization (Geist fonts loaded without display=swap or preload)
• No CSS optimization (unused Tailwind classes not purged)
• No runtime performance monitoring (Core Web Vitals)
• No stale-while-revalidate caching strategy for API data
• No compression middleware consideration

Technical Context & Impact

• Affected Components/Files: app/layout.tsx, app/page.tsx, next.config.ts
• Impact: Slow page loads, poor Core Web Vitals, high bounce rate

Step-by-Step Implementation Guide

1. Install and configure bundle analyzer: npm install @next/bundle-analyzer; add to next.config.ts
2. Analyze current bundle: Run ANALYZE=true npm run build to identify large dependencies
3. Implement code splitting: Use next/dynamic for:
   • Chart components (heavy libraries)
   • Admin panel (only admins use it)
   • Data tables (virtualized for large datasets)
4. Optimize fonts in layout.tsx: Add display="swap" and preload={true} to Geist font config
5. Implement virtualization: src/components/virtual/:
   • VirtualizedMeterList.tsx using @tanstack/react-virtual for 1000+ meters
   • VirtualizedStreamTable.tsx for large stream lists
6. Add memoization: React.memo on chart components, card lists, and table rows; useMemo for computed data
7. Optimize images: Use next/image for any static assets in public/; add width/height to prevent Cumulative Layout Shift
8. Add Web Vitals monitoring: src/lib/monitoring/web-vitals.ts reporting to analytics
9. Configure caching headers: In next.config.ts add Cache-Control headers for static assets
10. Implement route prefetching: Link components with prefetch={true} for dashboard sub-pages
11. Set performance budgets: In CI, enforce bundle size < 500KB (gzipped) and Lighthouse Performance score > 90

Verification & Testing Steps

1. Run npm run build with bundle analyzer and identify largest chunks
2. Measure Lighthouse Performance score before and after optimization
3. Render 1000 meters in virtualized list and measure scroll performance (should be 60fps)
4. Test page load with Slow 3G throttling in DevTools
5. Verify Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
6. Run npx tsc --noEmit