Web Performance Optimization웹 성능 최적화

<!-- 현대적 이미지 최적화 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" width="800" height="400"
       loading="lazy" decoding="async">
</picture>

<!-- Next.js Image 컴포넌트 (자동 최적화) -->
<Image src="/hero.jpg" width={800} height={400}
       alt="Hero" priority />

// React lazy loading
import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

// Web Performance API
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});
observer.observe({ entryTypes: ['largest-contentful-paint', 'layout-shift'] });

// Lighthouse CI
// lighthouse https://example.com --output json