성능 최적화: Lighthouse 90+ 달성

[Performance] Core Web Vitals
- LCP (Largest Contentful Paint): < 2.5s
- INP (Interaction to Next Paint): < 200ms
- CLS (Cumulative Layout Shift): < 0.1

[Accessibility] 100점 (a11y)
[Best Practices] 100점 (보안·HTTPS)
[SEO] 100점 (메타·sitemap)

import Image from 'next/image'

<Image
  src={imageUrl}
  alt="..."
  width={400}
  height={300}
  priority={isAboveFold}  // 첫 화면은 priority
  loading={isAboveFold ? 'eager' : 'lazy'}
  placeholder="blur"
  blurDataURL={blurUrl}
/>

// 자동: WebP/AVIF 변환·responsive srcset·lazy load

import { Inter } from 'next/font/google'
import localFont from 'next/font/local'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // FOUT 방지
  variable: '--font-inter',
})

const pretendard = localFont({
  src: './fonts/Pretendard.woff2',
  variable: '--font-pretendard',
  display: 'swap',
})

// CLS 0 (font 미리 reserve)

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./heavy-chart'), {
  loading: () => <Skeleton />,
  ssr: false,  // 클라이언트만 (큰 라이브러리)
})

// src/app/(app)/dashboard/page.tsx
import { Suspense } from 'react'

export default function DashboardPage() {
  return (
    <div>
      <h1>대시보드</h1>  {/* 즉시 렌더 */}

      <Suspense fallback={<Skeleton />}>
        <SlowStats />  {/* 비동기 → 도착하면 streaming */}
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <SlowChart />
      </Suspense>
    </div>
  )
}

// → TTFB 빠름 + 점진적 로딩

ANALYZE=true pnpm build
# → bundle-analyzer 페이지에서 큰 라이브러리 확인

// next.config.ts
import bundleAnalyzer from '@next/bundle-analyzer'

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})

export default withBundleAnalyzer(config)

[큰 라이브러리 줄이기]
- moment.js (300KB) → date-fns (10KB)
- lodash 전체 → lodash-es 개별
- recharts 전체 → 필요한 컴포넌트만
- AI SDK 전체 → 필요한 provider만

import Link from 'next/link'

// 화면에 보이면 자동 prefetch
<Link href="/dashboard" prefetch={true}>대시보드</Link>

// 큰 페이지는 false (대역폭 절약)
<Link href="/heavy-page" prefetch={false}>...</Link>

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,  // 1분 fresh
      gcTime: 5 * 60 * 1000,  // 5분 캐시
      refetchOnWindowFocus: false,
    },
  },
})

// useQuery, useMutation

// 정적 데이터: ISR
export const revalidate = 3600  // 1시간

// 빌드 시 prerender
export async function generateStaticParams() {
  return templates.map(t => ({ id: t.id }))
}

- Vercel Analytics → Images optimized
- 큰 이미지 (>500KB) → Squoosh CLI로 압축
- target: 100KB 이하 (PageSpeed 권장)

# .github/workflows/lighthouse.yml
- uses: treosh/lighthouse-ci-action@v9
  with:
    urls: |
      https://mysaas.com
      https://mysaas.com/dashboard
    uploadArtifacts: true
    temporaryPublicStorage: true

// src/app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/react'

<SpeedInsights />
<Analytics />