Web Performance Optimization: Speed Up Your Site

<!-- Responsive images -->
<picture>
  <source
    srcset="image-large.webp 1200w,
            image-medium.webp 800w,
            image-small.webp 400w"
    sizes="(max-width: 400px) 400px,
           (max-width: 800px) 800px,
           1200px"
    type="image/webp">
  <img src="image-fallback.jpg" alt="Optimized image"
       loading="lazy"
       width="800" height="600">
</picture>

// Code splitting example
const MyComponent = React.lazy(() => import('./MyComponent'));

// Efficient list rendering
const List = memo(({ items }) => (
  <div>
    {items.map(item => (
      <div key={item.id}>
        {item.name}
      </div>
    ))}
  </div>
));

// Debounce expensive operations
const debouncedSearch = debounce((query) => {
  performSearch(query);
}, 300);