Frontend EngineeringYou could build the most feature-rich app in the world, but if it takes 8 seconds to load, most of your users will never see it. Performance is not a polish step you do at the end. It is a core product decision that affects every person who visits your site.
The business case for speed
| Company | Change | Result |
|---|---|---|
| Amazon | +100ms delay | -1% in sales (~TABLE.6B/year) |
| +500ms delay | -20% in traffic | |
| 40% faster load | +15% more signups | |
| Walmart | -1s load time | +2% increase in conversions |
| BBC | +1s load time | -10% of users lost |
Slower sites mean fewer conversions, and the relationship works in both directions: making your site faster moves business metrics in your favor.
How load time affects user behavior
| Delay | Perception | User behavior |
|---|---|---|
| < 100ms | Instant | Stays engaged |
| < 300ms | Fast | No friction |
| < 1s | Acceptable | Stays focused |
| 1s-3s | Slow | Starts to disengage |
| > 3s | Very slow | High abandonment risk |
| > 10s | Unbearable | Almost everyone leaves |
Mobile makes this worse. The average mobile site takes around 15 seconds to fully load, yet 53% of mobile users expect it in under 3 seconds.
Why AI makes this problem worse
When you prompt AI to "build me a landing page," the result typically works, but it is almost never optimized. AI tools treat performance as invisible because they cannot feel the load time.
// What AI typically generates - everything loaded up front
import _ from 'lodash'; // 70KB for one function
import moment from 'moment'; // 67KB, deprecated
import Chart from 'chart.js/auto'; // 200KB+
import { everything } from './utils'; // barrel import
// No code splitting, no lazy loading, no image optimization
function App() {
return (
<div>
<img src="hero-4000x3000.jpg" /> {/* 5MB, no srcset */}
<Chart data={data} /> {/* 200KB loaded immediately */}
<Footer /> {/* Below fold, still in main bundle */}
</div>
);
}Every item in that code is a performance decision that AI made poorly. Your job is to recognize these patterns and fix them before they ship.
SEO and discoverability
Google added Core Web VitalsWhat is core web vitals?Three Google-defined metrics (loading speed, interactivity, visual stability) that measure real-user experience and affect search rankings. to its ranking algorithm in 2021. Performance directly affects whether people can find your site. A slow page competes at a disadvantage in search results, regardless of how great the content is.
What actually makes sites slow
| Culprit | Typical cost | Why it matters |
|---|---|---|
| Unoptimized images | 1-10MB per page | Often 50-70% of total page weight |
| Large JS bundles | 500KB-2MB | Blocks main thread, delays interactivity |
| Too many HTTP requests | 50+ requests | Each has its own latency overhead |
| No caching | Full re-download every visit | Wastes bandwidth on repeat visitors |
| Slow server response | 1-5s TTFB | Everything waits for the first byte |
| Render-blocking resources | Varies | CSS/JS in <head> blocks painting |
Most sites struggle with the first two. A single unoptimized hero image or a bloated JavaScript bundleWhat is bundle?A single JavaScript file (or set of files) that a build tool creates by combining all your source code and its imports together. is often responsible for the majority of load time.
Setting a performance budget
A performance budget is a set of limits your team agrees not to exceed. It shifts the conversation from "let's fix it later" to "does this new feature fit within our budget?"
JavaScript: < 170KB gzipped
Total page weight: < 1MB
Individual images: < 200KB each
Time to Interactive: < 3s on a mid-range deviceEvery feature has a weight. A live chat widget might add 200KB. A marketing pixel might tack on 30KB. Before you know it, a feature sprint has added 280KB and 1-2 seconds to your load time.
Quick wins you can act on today
- Compress images with Squoosh or ImageOptim (can cut file size by 80%)
- Enable gzip or Brotli compression on your server (cuts text assets by 60-80%)
- Use a CDNWhat is cdn?Content Delivery Network - a network of servers around the world that caches your files and serves them from the location closest to the user, making pages load faster. to serve static files closer to your users
- Add
loading="lazy"to images below the fold - Audit your JavaScript bundleWhat is bundle?A single JavaScript file (or set of files) that a build tool creates by combining all your source code and its imports together. and remove unused libraries
- Replace full library imports with specific function imports
When AI generates code for you, assume the performance is bad until you verify otherwise. Run Lighthouse. Check the bundle size. Look at the network tab.
// Measuring performance impact
// 1. Use Performance API
const start = performance.now();
// Do something expensive
for (let i = 0; i < 1000000; i++) {
// Heavy computation
}
const end = performance.now();
console.log(`Took ${end - start}ms`);
// 2. Measure page load
window.addEventListener('load', () => {
const perfData = performance.getEntriesByType('navigation')[0];
console.log('DNS lookup:', perfData.domainLookupEnd, perfData.domainLookupStart);
console.log('TCP connection:', perfData.connectEnd, perfData.connectStart);
console.log('Time to first byte:', perfData.responseStart, perfData.requestStart);
console.log('DOM loaded:', perfData.domComplete, perfData.domLoading);
});
// 3. Track Core Web Vitals
import { onCLS, onINP, onFCP, onLCP, onTTFB } from 'web-vitals';
onCLS(console.log); // Cumulative Layout Shift
onINP(console.log); // Interaction to Next Paint
onFCP(console.log); // First Contentful Paint
onLCP(console.log); // Largest Contentful Paint
onTTFB(console.log); // Time to First Byte
// 4. Bundle size analysis
// In package.json:
{
"scripts": {
"analyze": "vite build && npx vite-bundle-visualizer"
}
}