Day 20 of 28 · Vibe Coding Challenge
Performance Optimization
⏱ 6 min
📊 Intermediate
Your app works. But does it feel fast? A one-second delay in page load causes a 7% drop in conversions. Three seconds, and 53% of mobile users leave. Speed isn't a feature — it's the foundation of everything else.
Today you'll learn to find what's slow and make it fast.
What makes apps slow?
Most performance problems come from a small number of causes:
Large images — A single unoptimized photo can be 5MB. That's half a user's mobile data budget for one image.
Too many requests — Every file, font, image, and API call is a separate request. More requests = longer load time.
Unoptimized JavaScript — AI sometimes generates more code than necessary, or loads everything upfront instead of on-demand.
No caching — Loading the same data from the server every time instead of storing it locally after the first load.
Slow API calls — Waiting for external services that take too long to respond.
Knowledge Check
What is the most common performance problem in web apps?
A
Large, unoptimized images
D
Using the wrong programming language
Images are the biggest offender. A single unoptimized image can be larger than all your HTML, CSS, and JavaScript combined. Compressing images and using modern formats (WebP, AVIF) often cuts page load time in half.
The one-prompt performance audit
You don't need to become a performance expert. Just ask AI to audit your app.
Audit this project for performance issues. Identify the biggest problems and fix the most impactful ones.
Performance audit complete. Here's what I found and fixed:
🔴 **Fixed — Images (biggest impact)**
- 8 images were unoptimized PNGs (total: 12MB)
- Converted to WebP format (total: 1.2MB — 90% reduction)
- Added lazy loading — images below the fold only load when scrolled to
🟡 **Fixed — JavaScript bundle**
- Removed 3 unused libraries (reduced bundle by 180KB)
- Added code splitting — each page loads only the code it needs
🟡 **Fixed — Fonts**
- 4 font weights were loaded but only 2 were used
- Removed unused weights, added `font-display: swap` to prevent flash
🟢 **Fixed — Caching**
- API responses now cached for 5 minutes
- Static assets get browser caching headers
**Result:** Page load time estimated to drop from ~4.2s to ~1.1s.
↻ Replay conversation
Knowledge Check
What did the performance audit fix first?
C
JavaScript code quality
D
Images — they had the biggest impact, reducing 12MB to 1.2MB
Always fix the biggest problem first. Images were 12MB (90% of the page weight). Converting them to WebP and adding lazy loading had more impact than all other optimizations combined. Fix the big things first.
Quick wins for every project
These five optimizations improve almost every vibe-coded project:
1. Optimize images. Use WebP format. Compress them. Add lazy loading for images below the fold.
2. Add loading states. Show a skeleton or spinner while data loads. Users perceive the app as faster when they see immediate feedback.
3. Minimize bundle size. Ask AI: "Remove any unused dependencies and libraries from this project."
4. Use caching. Don't re-fetch data the user already has. Cache API responses for a reasonable time.
5. Compress text. Enable Gzip or Brotli compression on your server (most deployment platforms do this automatically).
Add skeleton loading screens to my dashboard. When data is loading, show animated placeholder shapes instead of a blank screen.
Skeleton screens added ✓
📊 Stats cards → animated gray rectangles matching card dimensions
📋 Task list → 5 rows of placeholder lines with shimmer animation
📈 Chart area → gray rectangle with pulse animation
Skeletons appear instantly on page load, then fade out when real data arrives. The dashboard feels much faster now — even if the API takes the same time.
↻ Replay conversation
Knowledge Check
Why do skeleton loading screens make an app "feel" faster?
A
Users see immediate visual feedback, which makes the wait feel shorter — even if the actual load time is the same
B
They reduce the amount of data transferred
C
They use less CPU power
D
They actually speed up the API calls
Perceived performance is as important as actual performance. When users see a blank screen, they think the app is broken. When they see skeletons, they know content is coming. The load time is identical, but the experience feels dramatically faster.
Testing performance
Two free tools tell you exactly how fast (or slow) your app is:
Google Lighthouse — Built into Chrome DevTools. Press F12, go to the Lighthouse tab, and click "Analyze." It gives you a score from 0–100 and specific recommendations.
PageSpeed Insights — Google's online tool at pagespeed.web.dev. Enter your deployed URL and get a full performance report.
Both give you a prioritized list of what to fix. Share the results with your AI, and it can implement the recommendations.
A Lighthouse score after AI optimization — from 62 to 96 in one prompt.
Final Check
What's the most efficient way to optimize performance as a vibe coder?
B
Run a Lighthouse audit, share the results with AI, and let it implement the highest-impact fixes
C
Optimize every single line of code manually
D
Rewrite the app in a faster programming language
Lighthouse gives you a prioritized list of performance issues ranked by impact. Share that list with your AI coding tool, and it can implement the fixes — image optimization, code splitting, lazy loading, caching — in minutes. Data-driven optimization, AI-executed.
⚡
Day 20 Complete
"Fast isn't a feature — it's the feature. Optimize the big things, and your app flies."
Tomorrow — Day 21
Mobile-First Design
More than half your visitors are on phones. Tomorrow you'll make sure your apps look perfect on every screen size.