Frontend Performance & Architecture

Core Web Vitals

• LCP (Largest Contentful Paint): <2.5s. Optimize images, preload key resources, minimize render-blocking JS.
• FID (First Input Delay): <100ms. Break up long tasks, use web workers, code-split.
• CLS (Cumulative Layout Shift): <0.1. Set explicit dimensions on images/embeds, use aspect-ratio CSS.

State Management Tradeoffs

• Context API: Simple, built-in. Tradeoff: Re-renders all consumers on any change.
• Zustand: Lightweight, minimal boilerplate. Good for medium apps.
• Redux: Predictable, great devtools. Tradeoff: Verbose, heavy for small apps.
• Server State (React Query/SWR): Caching, refetching, optimistic updates. Best for server-driven UIs.

Rendering Strategies

• CSR: Fast navigation after initial load. Bad for SEO.
• SSR: Good initial load time, SEO-friendly. Higher server cost.
• SSG: Fastest possible, pre-built at build time. Not suitable for dynamic content.
• ISR: SSG + periodic rebuild. Best of both worlds for content sites.