E-commerce website performance optimization case

Background and Problem Analysis

An e-commerce platform has a daily UV exceeding 1 million, with peak QPS reaching 5,000+ during major promotions. As the business grew, page load times deteriorated from 1.2 seconds to 4.5 seconds, and mobile first-screen rendering time exceeded 5 seconds, leading to a 23% drop in conversion rates. Lighthouse detection revealed the following key issues:

1. Unoptimized image resources accounted for 78% of total volume
2. Unbundled JavaScript packages reached 3.2MB
3. Third-party scripts blocked the main thread for 1.8 seconds
4. Lack of HTTP/2 caused severe request queuing

Static Resource Optimization

Image Lazy Loading and Format Selection

<!-- Native lazy loading implementation -->  
<img src="placeholder.jpg" data-src="product.jpg" loading="lazy" alt="Product image">  

<!-- WebP fallback solution -->  
<picture>  
  <source srcset="image.webp" type="image/webp">  
  <source srcset="image.jpg" type="image/jpeg">   
  <img src="image.jpg" alt="Product display">  
</picture>  

Implementation results:

• First-screen image requests reduced from 28 to 6
• Average image size decreased from 450KB to 120KB
• AVIF-format banner images were 65% smaller than JPEG

Font File Optimization

/* Use font-display to avoid layout shifts */  
@font-face {  
  font-family: 'CustomFont';  
  src: url('font.woff2') format('woff2');  
  font-display: swap;  
}  

Key measures:

• Converted TTF to WOFF2 format, reducing size by 40%
• Preloaded critical fonts: <link rel="preload" href="font.woff2" as="font" crossorigin>
• Removed unused font weights, streamlining from 12 font files to 4

JavaScript Optimization

Code Splitting and On-Demand Loading

// Dynamic import for product detail module  
const loadDetailModule = () => import('./productDetail.js');  

// Route-level code splitting  
const ProductPage = React.lazy(() => import('./ProductPage'));  

Optimization results:

• Main bundle size reduced from 3.2MB to 1.4MB
• Split vendor bundle into independent packages (lodash, moment, etc.) using SplitChunksPlugin
• Eliminated 35% of unused code via Tree Shaking

Web Workers for Computational Tasks

// Main thread  
const worker = new Worker('./searchWorker.js');  
worker.postMessage({ query: 'smartphone' });  
worker.onmessage = (e) => updateResults(e.data);  

// worker.js  
self.onmessage = (e) => {  
  const results = performHeavySearch(e.data.query);  
  self.postMessage(results);  
};  

Application scenarios:

• Product search filtering
• Price sorting algorithms
• Shopping cart total calculation

Network Layer Optimization

HTTP/2 and Server Push

Nginx configuration example:

server {  
  listen 443 ssl http2;  
    
  location / {  
    http2_push /static/css/main.css;  
    http2_push /static/js/runtime.js;  
  }  
}  

Implementation results:

• Resource load time reduced by 40%
• Fewer TCP connections via multiplexing
• Server-pushed critical CSS improved FCP by 300ms

CDN Strategy Optimization

# Cache rule examples  
/*.js    cache-control: public, max-age=31536000, immutable  
/*.css   cache-control: public, max-age=31536000  
/*.avif  cache-control: public, max-age=604800  

Improvements:

• Edge node hit rate increased from 72% to 98%
• Dynamic API routes use stale-while-revalidate strategy
• Smart compression: Brotli for text, Zopfli for images

Rendering Performance Optimization

Virtual Scrolling for Long Lists

// React implementation example  
<VirtualList  
  itemCount={10000}  
  itemSize={200}  
  renderItem={({index, style}) => (  
    <div style={style}>Product #{index}</div>  
  )}  
/>  

Performance comparison:

• Rendering 10,000 products: DOM nodes reduced from 100,000+ to 20
• Memory usage decreased by 85%
• Scroll frame rate improved from 8fps to 60fps

Optimizing CSS Selectors

/* Not recommended */  
div.container ul li a.btn {}  

/* Recommended */  
.product-btn {}  

Optimization principles:

• Avoid nested selectors exceeding 3 levels
• Reduce universal selector usage
• Apply BEM methodology for dynamic content

Monitoring and Continuous Optimization

Performance Metric Tracking

// Using Performance API  
const [fcp, lcp] = await Promise.all([  
  performance.getEntriesByName('first-contentful-paint')[0],  
  performance.getEntriesByName('largest-contentful-paint')[0]  
]);  

// Send to monitoring system  
tracker.send('PERF_METRICS', {  
  fcp: fcp.startTime,  
  lcp: lcp.startTime,  
  cls: getCLS()  
});  

Monitoring system:

• Real User Monitoring (RUM) covers 95% of traffic
• Synthetic monitoring runs Lighthouse tests hourly
• Performance budgets: JS<200KB, CSS<50KB, images<1MB

A/B Testing Validation

Pre- vs post-optimization data:

Future Optimization Directions

1. Experimentally enable QUIC protocol to replace TCP
2. Explore Edge Workers for edge logic
3. Rewrite image processing modules with WASM
4. Implement more granular resource prefetching strategies
5. Optimize performance for 3G mobile networks