Performance Optimization That Actually Ships: A Real-World Guide

Last quarter, we took a client's e-commerce site from a 4.2-second LCP to 1.1 seconds. Their conversion rate jumped 23% within two weeks. No redesign, no new features - just performance work. Here's exactly what we did, in the order we did it, so you can replicate the process.

Step one: measure before you optimize. We ran Lighthouse, WebPageTest, and Chrome DevTools Performance panel on the five highest-traffic pages. The results told a clear story - 2.1MB of unoptimized images, 400KB of JavaScript loaded on every page (including three analytics scripts), and a render-blocking CSS file that delayed first paint by 1.8 seconds.

The fastest wins were image optimization. We converted all product images to WebP with AVIF fallbacks, implemented responsive srcset attributes, and added lazy loading for below-the-fold images. This single change dropped LCP by 1.4 seconds. Most developers know they should do this - few actually audit every image on their site.

JavaScript bundle analysis was next. Using Vite's built-in rollup-plugin-visualizer, we discovered that three npm packages accounted for 60% of the bundle: moment.js (replace with date-fns or dayjs), lodash (import individual functions), and an unused charting library from a feature that was removed months ago. Tree-shaking only works if you import correctly.

Critical CSS extraction made a dramatic difference. Instead of loading one monolithic stylesheet, we inlined the CSS needed for above-the-fold content and deferred the rest. Combined with font-display: swap for custom fonts, this eliminated the flash of unstyled content and cut First Contentful Paint by 800ms.

The advanced technique that surprised us: prefetching. We added <link rel='prefetch'> for the three most common navigation paths from each page. When users clicked through to product pages, the HTML was already cached. Perceived load time dropped to near-zero for the most common user journeys.

Third-party scripts were the silent killer. Google Tag Manager, Hotjar, Intercom, and a cookie consent banner added 1.2 seconds of blocking time. We moved all non-essential scripts to load after the window.onload event and replaced Hotjar with a lighter alternative. Third-party audit should be a quarterly practice.

The meta-lesson: performance optimization isn't a one-time project. We set up performance budgets in the CI pipeline - if a PR increases bundle size by more than 5KB or degrades LCP by more than 200ms, it fails. This prevents the gradual regression that turns fast sites slow over six months.