Published

1 min read251 words

SavePublish

## The Problem Our dashboard was taking 3 seconds to become interactive. Users were bouncing. We needed to fix it fast. Here's the systematic approach we took to cut load time by 90%. ## Step 1: Measure First Before optimizing anything, we profiled with React DevTools and Lighthouse: ```bash npx lighthouse https://app.example.com --view ``` The results showed three main bottlenecks: 1. A 2MB JavaScript bundle 2. 500+ component re-renders on initial load 3. A 200-row table rendering all rows at once ## Step 2: Code Splitting We lazy-loaded every route and heavy component: ```tsx const AdminDashboard = lazy(() => import("./admin/dashboard")) const AnalyticsChart = lazy(() => import("./charts/analytics")) ``` > **Tip:** Don't just code-split routes — split heavy components within routes too. A chart library doesn't need to load until the user scrolls to it. ## Step 3: Virtualization For our 200-row table, we switched to virtual rendering: ```tsx import { useVirtualizer } from "@tanstack/react-virtual" function VirtualTable({ items }: { items: Item[] }) { const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 48, }) // Only renders visible rows } ``` ## Step 4: Strategic Memoization Not everything should be memoized. We focused on: - Components that receive object/array props - Components in frequently-updating contexts - Expensive computed values ## Results | Metric | Before | After | |--------|--------|-------| | TTI | 3.2s | 0.3s | | Bundle size | 2.1MB | 420KB | | Re-renders | 500+ | 45 | | Lighthouse | 34 | 96 |