html
<!-- Next.js Image component (automatic optimization) -->
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority              <!-- Above the fold: no lazy loading -->
  sizes="(max-width: 768px) 100vw, 50vw"
  quality={80}
/>

<!-- Native lazy loading for below-fold images -->
<img 
  src="photo.webp" 
  alt="Photo"
  loading="lazy"
  decoding="async"
  width="800" 
  height="600"
/>

typescript
// Before: imports everything upfront
import { HeavyChart } from './charts';

// After: loads only when needed
const HeavyChart = lazy(() => import('./charts'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart data={data} />
    </Suspense>
  );
}

typescript
// Bad: imports entire library (200KB)
import _ from 'lodash';
_.debounce(fn, 300);

// Good: imports only what's needed (2KB)
import debounce from 'lodash/debounce';
debounce(fn, 300);

Static assets (JS, CSS, images):
  Cache-Control: public, max-age=31536000, immutable

HTML pages:
  Cache-Control: public, max-age=0, must-revalidate

API responses:
  Cache-Control: private, max-age=60, stale-while-revalidate=300