웹 성능 최적화 완전 가이드 2025: Core Web Vitals, 로딩 전략, 렌더링 패턴 총정리

성능과 비즈니스 지표:
├── 로딩 3초 초과 → 53% 이탈 (Google)
├── 100ms 지연 → 매출 1% 감소 (Amazon)
├── 500ms 지연 → 트래픽 20% 감소 (Google)
├── 1초 개선 → 전환율 7% 향상 (Walmart)
└── 2초 개선 → 바운스율 50% 감소 (COOK)

성능 예산 예시:
├── 초기 로드 JS: 200KB 이하 (gzip)
├── 초기 로드 CSS: 50KB 이하 (gzip)
├── 전체 페이지 크기: 1.5MB 이하
├── LCP: 2.5초 이내
├── INP: 200ms 이내
├── CLS: 0.1 이하
├── Time to First Byte: 600ms 이내
└── 요청 수: 50개 이하

LCP 대상 요소:
├── img 요소
├── video 요소 (포스터 이미지)
├── CSS background-image가 있는 요소
├── 텍스트 노드를 포함하는 블록 레벨 요소
└── svg 내의 image 요소

<!-- 1. 히어로 이미지 프리로드 -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- 2. LCP 이미지에 fetchpriority 설정 -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" loading="eager" />

<!-- 3. 서버 응답 시간 최적화 -->
<!-- TTFB 목표: 200ms 이내 -->

/* 4. 폰트 로딩 최적화 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

INP 최적화 전략:
1. 긴 태스크 분할
   - 50ms 이상의 태스크를 더 작은 단위로 분할
   - requestIdleCallback, scheduler.yield() 활용

2. 메인 스레드 해방
   - Web Worker로 무거운 계산 이동
   - 불필요한 동기 JS 제거

3. 이벤트 핸들러 최적화
   - debounce / throttle 적용
   - passive 이벤트 리스너 사용

// 긴 태스크 분할 예시
async function processLargeList(items: Item[]) {
  const CHUNK_SIZE = 50;

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);

    // 브라우저에게 렌더링 기회 제공
    await scheduler.yield();
  }
}

// scheduler.yield 폴리필
if (!('scheduler' in globalThis)) {
  (globalThis as any).scheduler = {
    yield: () => new Promise(resolve => setTimeout(resolve, 0))
  };
}

<!-- CLS 방지: 이미지에 크기 명시 -->
<img src="/photo.webp" width="800" height="600" alt="Photo" />

<!-- CLS 방지: 동적 콘텐츠에 min-height 설정 -->
<div style="min-height: 250px;">
  <!-- 광고 또는 동적 콘텐츠 -->
</div>

/* CLS 방지: 폰트 로딩 시 레이아웃 시프트 최소화 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional; /* 또는 swap */
  /* size-adjust로 대체 폰트와 크기 맞춤 */
  size-adjust: 100.5%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

이미지 포맷 비교 (같은 품질 기준):
├── JPEG: 100KB (기준)
├── WebP: 70KB (-30%)
├── AVIF: 50KB (-50%)
└── JXL (JPEG XL): 55KB (-45%)

브라우저 지원 (2025):
├── WebP: 97%+ (IE 미지원)
├── AVIF: 92%+ (Safari 16.4+)
└── JXL: Chrome에서 제거, Safari/Firefox 지원

<!-- picture 요소로 포맷 폴백 -->
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

<!-- srcset과 sizes로 반응형 이미지 -->
<img
  srcset="
    /hero-400w.webp 400w,
    /hero-800w.webp 800w,
    /hero-1200w.webp 1200w,
    /hero-1600w.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/hero-800w.webp"
  alt="Hero image"
  width="1200"
  height="600"
  loading="lazy"
  decoding="async"
/>

<!-- 네이티브 lazy loading -->
<img src="/photo.webp" loading="lazy" decoding="async" alt="Photo" />

<!-- Intersection Observer로 커스텀 lazy loading -->

// 블러 플레이스홀더 구현
function BlurImage({ src, alt, width, height, blurDataURL }: ImageProps) {
  return (
    <div style={{ position: 'relative', width, height }}>
      {/* 블러 플레이스홀더 */}
      <img
        src={blurDataURL}
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          filter: 'blur(20px)',
          transform: 'scale(1.1)',
        }}
      />
      {/* 실제 이미지 */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        onLoad={(e) => {
          // 로드 완료 시 블러 제거
          e.currentTarget.style.opacity = '1';
        }}
        style={{ position: 'relative', opacity: 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
}

// React lazy + Suspense (Route-based splitting)
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// 조건부 동적 import
async function handleExport() {
  // xlsx 라이브러리를 필요할 때만 로드
  const XLSX = await import('xlsx');
  const workbook = XLSX.utils.book_new();
  // ...
}

// 나쁜 예: 전체 라이브러리 import
import _ from 'lodash';
_.debounce(fn, 300);

// 좋은 예: 필요한 함수만 import
import debounce from 'lodash/debounce';
debounce(fn, 300);

// 더 좋은 예: 네이티브 또는 경량 대안 사용
// lodash.debounce: 1.4KB vs lodash: 72KB

// webpack-bundle-analyzer로 번들 분석
// npm install --save-dev webpack-bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Next.js config
});

// webpack splitChunks 설정
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

<!-- 일반: 파싱 차단 -->
<script src="app.js"></script>

<!-- async: 비동기 다운로드, 즉시 실행 (파싱 차단 가능) -->
<script src="analytics.js" async></script>

<!-- defer: 비동기 다운로드, DOM 파싱 후 실행 (순서 보장) -->
<script src="app.js" defer></script>

<!-- module: defer와 동일한 동작 -->
<script type="module" src="app.js"></script>

스크립트 로딩 타임라인:
일반:    [HTML 파싱...] [다운로드] [실행] [HTML 파싱...]
async:   [HTML 파싱......다운로드......] [실행] [HTML 파싱...]
defer:   [HTML 파싱......다운로드.............] [실행]

<!-- Critical CSS 인라인 -->
<head>
  <style>
    /* 첫 화면(Above the fold)에 필요한 최소 CSS만 인라인 */
    body { margin: 0; font-family: system-ui; }
    .header { height: 60px; background: #fff; }
    .hero { height: 400px; display: flex; align-items: center; }
  </style>

  <!-- 나머지 CSS는 비동기 로드 -->
  <link rel="preload" href="/styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles.css" /></noscript>
</head>

/* contain으로 렌더링 범위 제한 */
.card {
  contain: layout style paint;
  /* 또는 content-visibility로 오프스크린 요소 최적화 */
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* will-change로 GPU 가속 힌트 */
.animated-element {
  will-change: transform;
  /* 주의: 남용 시 메모리 낭비 */
}

// PurgeCSS 설정 (postcss.config.js)
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.{js,jsx,ts,tsx}',
        './public/index.html'
      ],
      defaultExtractor: content =>
        content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['html', 'body', /^data-/]
    })
  ]
};

/* swap: 대체 폰트 → 웹폰트 (FOUT 발생, 텍스트 즉시 표시) */
@font-face {
  font-family: 'MyFont';
  font-display: swap;
  src: url('/fonts/myfont.woff2') format('woff2');
}

/* optional: 빠르면 웹폰트, 느리면 대체 폰트 유지 (CLS 최소) */
@font-face {
  font-family: 'MyFont';
  font-display: optional;
  src: url('/fonts/myfont.woff2') format('woff2');
}

<!-- 핵심 폰트 프리로드 -->
<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

/* 기존: 각 굵기별 별도 파일 (400, 500, 600, 700 = 4파일) */
/* Variable Font: 1파일로 모든 굵기 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* 사용 */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }

# pyftsubset으로 한글 폰트 서브셋 생성
# pip install fonttools brotli
pyftsubset NotoSansKR-Regular.otf \
  --text-file=korean-chars.txt \
  --output-file=NotoSansKR-subset.woff2 \
  --flavor=woff2

# 결과: 4.5MB → 300KB (한글 2,350자 기준)

CSR 플로우:
Browser        Server
  │─ HTML 요청 ──→│
  │←─ 빈 HTML ────│
  │─ JS 요청 ────→│
  │←─ JS 번들 ────│
  │ [JS 파싱/실행]  │
  │─ API 요청 ───→│
  │←─ 데이터 ─────│
  │ [렌더링]       │
  ▼ 화면 표시      ▼

SSR 플로우:
Browser        Server
  │─ HTML 요청 ──→│
  │               │ [데이터 패칭]
  │               │ [HTML 렌더링]
  │←─ 완성 HTML ──│
  │ [화면 표시]     │
  │─ JS 요청 ────→│
  │←─ JS 번들 ────│
  │ [Hydration]    │
  ▼ 인터랙티브     ▼

// Next.js App Router Streaming SSR
import { Suspense } from 'react';

async function SlowComponent() {
  const data = await fetchSlowData(); // 3초 소요
  return <div>{/* data 렌더링 */}</div>;
}

export default function Page() {
  return (
    <div>
      {/* 즉시 렌더링 */}
      <Header />
      <Hero />

      {/* 스트리밍: 준비되면 점진적 전송 */}
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>

      {/* 즉시 렌더링 */}
      <Footer />
    </div>
  );
}

// Next.js ISR
// app/products/[id]/page.tsx
export const revalidate = 3600; // 1시간마다 재생성

async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

// 정적 경로 생성
export async function generateStaticParams() {
  const products = await getTopProducts(100);
  return products.map(p => ({ id: p.id }));
}

HTTP 캐시 전략:
├── 정적 자산 (JS/CSS/이미지)
│   Cache-Control: public, max-age=31536000, immutable
│   (파일명에 해시 포함: app.abc123.js)
│
├── HTML
│   Cache-Control: public, max-age=0, must-revalidate
│   (항상 서버 확인)
│
├── API 응답
│   Cache-Control: private, max-age=60, stale-while-revalidate=300
│   (60초 캐시, 5분간 stale 허용)
│
└── 사용자별 데이터
    Cache-Control: private, no-cache
    (매번 서버 검증)

stale-while-revalidate 동작:
요청 1: [캐시 미스] → 서버 → 응답 + 캐시 저장
요청 2: [캐시 히트, fresh] → 즉시 응답
요청 3: [캐시 히트, stale] → 즉시 응답(stale) + 백그라운드 서버 갱신
요청 4: [캐시 히트, fresh] → 즉시 응답(갱신된 데이터)

// SWR 라이브러리 (React)
import useSWR from 'swr';

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    refreshInterval: 30000, // 30초마다 갱신
  });

  if (isLoading) return <Skeleton />;
  if (error) return <Error />;
  return <UserCard user={data} />;
}

// Service Worker 캐싱 전략
// sw.js
const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
  '/offline.html'
];

// 설치: 정적 자산 사전 캐싱
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache =>
      cache.addAll(STATIC_ASSETS)
    )
  );
});

// 요청: Cache First + Network Fallback
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;

      return fetch(event.request).then(response => {
        // 성공 응답을 캐시에 저장
        const clone = response.clone();
        caches.open(CACHE_NAME).then(cache =>
          cache.put(event.request, clone)
        );
        return response;
      }).catch(() => {
        // 오프라인 폴백
        return caches.match('/offline.html');
      });
    })
  );
});

CDN 캐시 계층:
사용자 → [브라우저 캐시] → [CDN Edge] → [CDN Origin Shield] → [서버]

CDN 헤더 예시:
정적 자산:
  Cache-Control: public, max-age=31536000, immutable
  CDN-Cache-Control: public, max-age=31536000

동적 콘텐츠:
  Cache-Control: public, max-age=0, must-revalidate
  CDN-Cache-Control: public, max-age=60, stale-while-revalidate=300
  Surrogate-Control: max-age=3600

<!-- DNS Prefetch: 외부 도메인 DNS 미리 해석 -->
<link rel="dns-prefetch" href="//api.example.com" />
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- Preconnect: DNS + TCP + TLS 미리 연결 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Prefetch: 다음 페이지 리소스 미리 로드 -->
<link rel="prefetch" href="/next-page.js" />

<!-- Preload: 현재 페이지 핵심 리소스 우선 로드 -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />

<!-- fetchpriority로 리소스 우선순위 지정 -->
<!-- 히어로 이미지: 높은 우선순위 -->
<img src="/hero.webp" fetchpriority="high" />

<!-- 오프스크린 이미지: 낮은 우선순위 -->
<img src="/below-fold.webp" fetchpriority="low" loading="lazy" />

<!-- 핵심 스크립트: 높은 우선순위 -->
<script src="/critical.js" fetchpriority="high"></script>

HTTP/1.1 vs HTTP/2 vs HTTP/3:
┌─────────────┬──────────────┬──────────────┬──────────────┐
│  기능        │  HTTP/1.1    │  HTTP/2      │  HTTP/3      │
├─────────────┼──────────────┼──────────────┼──────────────┤
│ 멀티플렉싱   │ 불가         │ 지원          │ 지원          │
│ 헤더 압축    │ 없음         │ HPACK        │ QPACK        │
│ 서버 푸시    │ 없음         │ 지원          │ 제거됨        │
│ HOL 블로킹   │ TCP 레벨     │ TCP 레벨      │ 해결(QUIC)   │
│ 전송 프로토콜│ TCP          │ TCP          │ QUIC(UDP)    │
│ 연결 설정    │ TCP+TLS      │ TCP+TLS      │ 0-RTT 가능   │
└─────────────┴──────────────┴──────────────┴──────────────┘

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: './lighthouserc.json'
          uploadArtifacts: true

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["warn", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 2000 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "interactive": ["error", { "maxNumericValue": 5000 }]
      }
    }
  }
}

// Web Vitals 측정 및 보고
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });

  // Beacon API로 비동기 전송
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

성능 모니터링 도구:
├── 합성 모니터링 (Lab Data)
│   ├── Lighthouse CI (자동화)
│   ├── WebPageTest (상세 분석)
│   └── PageSpeed Insights (Google)
│
├── 실사용자 모니터링 (Field Data)
│   ├── Chrome UX Report (CrUX)
│   ├── web-vitals 라이브러리
│   └── 상용: Datadog RUM, New Relic
│
└── 번들 분석
    ├── webpack-bundle-analyzer
    ├── source-map-explorer
    └── bundlephobia.com

// Server Component (기본값 - JS 번들에 포함되지 않음)
// app/products/page.tsx
async function ProductsPage() {
  // 서버에서 직접 데이터 패칭 (API 라우트 불필요)
  const products = await db.product.findMany();

  return (
    <div>
      <h1>Products</h1>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

// Client Component (인터랙션이 필요한 부분만)
// components/AddToCart.tsx
'use client';

import { useState } from 'react';

export function AddToCart({ productId }: { productId: string }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Add to Cart ({count})
    </button>
  );
}

import Image from 'next/image';

// 자동 WebP/AVIF 변환, 반응형, lazy loading
function HeroSection() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority  // LCP 이미지는 priority 설정
      sizes="(max-width: 768px) 100vw, 1200px"
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// 원격 이미지
function Avatar({ user }: { user: User }) {
  return (
    <Image
      src={user.avatarUrl}
      alt={user.name}
      width={48}
      height={48}
      loading="lazy"
    />
  );
}

// next/font로 자동 최적화 (자체 호스팅, CLS 제거)
import { Inter, Noto_Sans_KR } from 'next/font/google';

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

const notoSansKR = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  display: 'swap',
  variable: '--font-noto-sans-kr',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={`${inter.variable} ${notoSansKR.variable}`}>
      <body>{children}</body>
    </html>
  );
}

// app/blog/[slug]/page.tsx

// 정적 생성 + ISR (60초)
export const revalidate = 60;

// 또는 완전 정적
export const dynamic = 'force-static';

// 또는 항상 동적
export const dynamic = 'force-dynamic';

// 런타임 선택
export const runtime = 'edge'; // Edge Runtime (빠른 TTFB)
// export const runtime = 'nodejs'; // Node.js Runtime (기본)