Web Performance

Why Performance Matters

• 53% of mobile users abandon sites that take > 3s to load
• Every 100ms delay costs 1% in sales
• Better performance = Better SEO
• Improved user experience and engagement

Core Web Vitals

• LCP - Largest Contentful Paint (< 2.5s)
• FID - First Input Delay (< 100ms)
• CLS - Cumulative Layout Shift (< 0.1)

Image Optimization

• Use modern formats (WebP, AVIF)
• Implement responsive images
• Lazy load below-the-fold images
• Optimize with proper compression

JavaScript Optimization

          // Code splitting
import('./heavy-module.js').then(module => {
  // Use module when needed
});

// Tree shaking
export { usedFunction } from './utils';

// Debouncing expensive operations
const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
};

Caching Strategies

• Browser caching with proper headers
• Service Workers for offline support
• CDN for static assets
• Edge caching for dynamic content

Measuring Performance

• Lighthouse (Chrome DevTools)
• WebPageTest
• Chrome User Experience Report
• Real User Monitoring (RUM)

Performance Budget

Key Takeaways

• Performance is a feature
• Measure before and after optimizing
• Focus on user-centric metrics
• Make performance part of your workflow