Web Performance Fundamentals Performance optimization is crucial for user experience and SEO. Key Performance Metrics First Contentful Paint (FCP) Largest Contentful Paint (LCP) Time to Interactive (TTI) Cumulative Layout Shift (CLS) Image Optimization <!-- 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> JavaScript Performance // 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); Performance Checklist Asset Optimization ...