5 min read
Performance Basics
Slow apps frustrate users. This guide covers common performance issues and how to address them.
When Performance Matters
Users notice:
- Slow page loads (over 2-3 seconds)
- Laggy interactions
- Janky animations
- Unresponsive inputs
Users don’t notice:
- Initial load under 1 second
- Instant feedback on actions
- Smooth 60fps animations
- Background operations
The goal: make the app feel instant.
”It’s Slow” — Where to Start
Identify the problem
The app feels slow. Help me figure out where.
What should I check?Common culprits:
- Loading too much data — Fetching everything at once
- Large images — Unoptimized images loading
- Too many re-renders — UI updating unnecessarily
- Heavy computations — Blocking the main thread
- Network requests — Slow or too many API calls
Ask Claude to profile
Help me identify what's making [feature] slow.
What tools can I use to measure performance?Image Optimization
The problem
Images are often the biggest files on a page.
Solutions
Optimize the images in this project:
- Compress them
- Use appropriate formats (WebP, AVIF)
- Serve different sizes for different screens
- Lazy load images below the foldFormat recommendations
| Type | Format | Use case |
|---|---|---|
| Photos | WebP, AVIF | Most images |
| Icons | SVG | Scalable graphics |
| Transparency | WebP, PNG | When alpha needed |
Responsive images
Serve appropriately sized images based on device.
Don't send a 4K image to a phone.Lazy Loading
What it is
Load things only when needed, not all upfront.
Images
Lazy load images that aren't visible on initial load.
Only fetch them as the user scrolls near them.Components
Lazy load [component] since it's not needed right away.
Load it when the user navigates to that section.Data
Don't load all [items] at once.
Load the first 20, then load more as user scrolls.Reducing Re-renders
The problem
Components re-rendering unnecessarily waste CPU.
Web (React)
This component re-renders too often.
Help me optimize it with React.memo or useMemo.What to check
- Are expensive components re-rendering?
- Is state lifting causing cascade updates?
- Are callbacks being recreated every render?
SwiftUI
SwiftUI handles most re-renders well, but:
This view seems to be updating too much.
Help me check if the state structure is correct.Network Optimization
Reduce requests
We're making too many API calls.
Help me batch or reduce them.Caching
Cache the API responses so we don't fetch the same data repeatedly.
Invalidate cache when data changes.Loading states
While optimizing, ensure good UX during loads:
Show skeleton screens while data loads.
The user should see the page structure immediately.Animation Performance
Use GPU-friendly properties
This animation is janky.
Make sure we're animating transform and opacity,
not layout properties like width or top.Properties to avoid animating:
width,heighttop,left,right,bottommargin,padding
Properties that are fast:
transform(translate, scale, rotate)opacity
Reduce animation complexity
Simplify this animation.
It's doing too much at once.Bundle Size (Web)
The problem
Large JavaScript bundles slow initial load.
Check bundle size
What's the bundle size of this project?
What's making it large?Reducing size
- Remove unused dependencies
- Use tree-shaking
- Code splitting for routes
- Lazy load heavy libraries
The bundle is too large.
Help me reduce it by:
- Removing unused code
- Splitting by route
- Lazy loading [heavy library]Perceived Performance
Even if something takes time, make it feel fast:
Optimistic updates
Update the UI immediately when the user [action].
Don't wait for the server response.
Roll back if it fails.Progress indicators
Show progress while [operation] is happening.
The user should know something is happening.Skeleton screens
Show a skeleton of the page structure while loading.
Better than a spinner.Instant feedback
Buttons should respond immediately on tap/click.
Add a pressed state even if the action takes time.Measuring Performance
Web
- Lighthouse in Chrome DevTools
- Web Vitals metrics
- Network tab for request timing
Native apps
- Instruments (Xcode)
- Time Profiler
- Memory usage
Prompting for measurement
Help me measure the performance of [feature].
What metrics should I look at?
What tools can I use?Common Quick Wins
- Compress images — Often 50-80% size reduction
- Lazy load below-the-fold — Faster initial paint
- Remove unused code — Smaller bundles
- Cache API responses — Fewer network requests
- Use skeleton screens — Better perceived performance
What You’ll Learn
- Identifying performance issues
- Image optimization techniques
- Lazy loading patterns
- Reducing unnecessary re-renders
- Network optimization
- Animation performance
- Measuring and monitoring performance