# Throttle When Profiling

**MUST** · **ID:** `performance-throttle-profiling` · **Category:** performance
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-throttle-profiling

> MUST: Profile with CPU/network throttling

Test with CPU and network throttling

Developer machines are faster than average user devices. Use browser DevTools to throttle CPU (4x slowdown) and network (Fast 3G) to test how your app performs for users on slower devices and connections.

## Bad — do not do this

`performance-throttle-profiling-bad`

```tsx
export function ThrottleProfilingBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Performance Testing</h3>
        <div className="space-y-3">
          <div className="p-3 bg-muted rounded-lg">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-mono">CPU:</span>
              <span className="text-muted-foreground">No throttling</span>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-mono">Network:</span>
              <span className="text-muted-foreground">No throttling</span>
            </div>
          </div>
          <div className="p-3 bg-success/10 border border-success/20 rounded-lg">
            <div className="text-sm text-success-foreground">
              <div className="font-medium">Results</div>
              <div className="text-xs mt-1">FCP: 0.3s • LCP: 0.8s • TBT: 10ms</div>
            </div>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Testing on a fast dev machine doesn't reflect real user experience on slower devices.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        No throttling - results don't reflect real users
      </p>
    </div>
  );
}
```

## Good — do this

`performance-throttle-profiling-good`

```tsx
export function ThrottleProfilingGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Performance Testing</h3>
        <div className="space-y-3">
          <div className="p-3 bg-warning/10 border border-warning/20 rounded-lg">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-mono text-warning-foreground">CPU:</span>
              <span className="text-warning">4x slowdown</span>
            </div>
          </div>
          <div className="p-3 bg-warning/10 border border-warning/20 rounded-lg">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-mono text-warning-foreground">Network:</span>
              <span className="text-warning">Fast 3G (562 kB/s)</span>
            </div>
          </div>
          <div className="p-3 bg-info/10 border border-info/20 rounded-lg">
            <div className="text-sm text-info-foreground">
              <div className="font-medium">Realistic Results</div>
              <div className="text-xs mt-1">FCP: 1.8s • LCP: 3.2s • TBT: 180ms</div>
            </div>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Throttling reveals performance issues users on slower devices will experience.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        CPU + network throttling shows realistic performance
      </p>
    </div>
  );
}
```

## References

- [Chrome DevTools Throttling](https://developer.chrome.com/docs/devtools/device-mode/)