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 fold

Format recommendations

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, height
• top, left, right, bottom
• margin, 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

1. Compress images — Often 50-80% size reduction
2. Lazy load below-the-fold — Faster initial paint
3. Remove unused code — Smaller bundles
4. Cache API responses — Fewer network requests
5. 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

Exercises

1. Run Lighthouse on a web project, note your lowest-scoring metric, then apply the matching quick win (compress images, lazy load, cache, or skeleton screens) and re-measure.
2. Use the image-optimization prompt to compress and reformat the images in a project to WebP/AVIF, and compare the before/after file sizes.
3. Add an optimistic update to one user action using the perceived-performance prompt so the UI responds instantly, then confirm it rolls back gracefully if the request fails.