Performance is one of those things everyone talks about but few actually prioritize until it's too late. Here is what I check when an app starts feeling sluggish.
1. Image Optimization Are you serving a 4MB png? Stop. Use Next.js `<Image />`, use WebP, and size your images correctly. This is usually the easiest win.
2. Code Splitting Don't load the Code Editor component on the landing page. Use `dynamic()` imports to lazy load heavy components that aren't immediately visible.
3. Memoization (Use with Caution) `useMemo` and `useCallback` are great, but don't wrap every single function in them. Use them only when a component is actually re-rendering too much / doing expensive calculations.
4. Font Loading Next.js has amazing font tools now (`next/font`). Use them. They prevent that ugly layout shift (CLS) when fonts load in.
5. Bundle Analysis Run a bundle analyzer. You'd be surprised how often a random library is importing all of Lodash when you only used one function.
Performance is an ongoing habit, not a one-time fix. Keep checking your Core Web Vitals!
