Split View: 웹 성능 최적화 완전 가이드 2025: Core Web Vitals, LCP/INP/CLS, 로딩 전략

페이지 경험 시그널 구성:
├── Core Web Vitals (LCP, INP, CLS)
├── HTTPS 보안
├── 모바일 친화성
├── 침입적 광고 없음
└── Safe Browsing

// LCP 측정 코드
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];

  console.log('LCP:', lastEntry.startTime);
  console.log('LCP Element:', lastEntry.element);
  console.log('LCP URL:', lastEntry.url);
  console.log('LCP Size:', lastEntry.size);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// 1. 히어로 이미지에 fetchpriority="high" 추가
<img
  src="/hero-image.webp"
  alt="Hero"
  fetchpriority="high"
  width={1200}
  height={600}
/>

// 2. Preload로 LCP 리소스 먼저 로드
<link
  rel="preload"
  as="image"
  href="/hero-image.webp"
  fetchpriority="high"
/>

// 3. Next.js Image 컴포넌트 활용
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1200}
      height={600}
      priority // LCP 이미지에 priority 추가
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// INP 측정
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.interactionId) {
      const duration = entry.duration;
      const inputDelay = entry.processingStart - entry.startTime;
      const processingTime = entry.processingEnd - entry.processingStart;
      const presentationDelay = entry.startTime + entry.duration - entry.processingEnd;

      console.log('INP Breakdown:', {
        duration,
        inputDelay,      // 입력 지연
        processingTime,  // 처리 시간
        presentationDelay // 렌더링 지연
      });
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

// 1. 긴 작업을 yield로 분리
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);

    // 매 100개마다 메인 스레드에 양보
    if (i % 100 === 0) {
      await scheduler.yield(); // Scheduler API
      // 또는 fallback:
      // await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// 2. React에서 useTransition으로 우선순위 분리
function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    // 입력은 즉시 반영 (긴급 업데이트)
    setQuery(e.target.value);

    // 검색 결과는 낮은 우선순위 (전환 업데이트)
    startTransition(() => {
      setSearchResults(filterResults(e.target.value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <ResultsList />}
    </div>
  );
}

// 3. requestIdleCallback으로 비필수 작업 지연
function deferAnalytics(data) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      sendAnalytics(data);
    }, { timeout: 2000 });
  } else {
    setTimeout(() => sendAnalytics(data), 100);
  }
}

// CLS 측정
let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // 사용자 입력 후 500ms 이내의 이동은 제외
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

      // 세션 윈도우: 1초 이내, 5초 한도
      if (
        sessionValue &&
        entry.startTime - lastSessionEntry.startTime < 1000 &&
        entry.startTime - firstSessionEntry.startTime < 5000
      ) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }

      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = [...sessionEntries];
      }
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

/* 1. 이미지/비디오에 항상 크기 지정 */
img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* CSS aspect-ratio 활용 */
}

/* 2. 광고/임베드 영역 사전 확보 */
.ad-slot {
  min-height: 250px;
  contain: layout; /* CSS Containment */
}

/* 3. 폰트 로드 시 레이아웃 이동 방지 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* CLS를 위해 optional 사용 */
  size-adjust: 100.5%; /* 폴백 폰트와 크기 맞춤 */
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* 4. 동적 콘텐츠에 contain 속성 */
.dynamic-content {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

포맷별 비교 (동일 품질 기준):
┌─────────┬────────┬─────────┬──────────┬────────────┐
│ 포맷    │ 압축률 │ 투명도  │ 애니메이션│ 브라우저   │
├─────────┼────────┼─────────┼──────────┼────────────┤
│ JPEG    │ 기준   │ X       │ X        │ 100%       │
│ PNG     │ 낮음   │ O       │ X        │ 100%       │
│ WebP    │ 25-34% │ O       │ O        │ 97%+       │
│ AVIF    │ 50%+   │ O       │ O        │ 92%+       │
│ JPEG XL │ 35-60% │ O       │ O        │ 제한적     │
└─────────┴────────┴─────────┴──────────┴────────────┘

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

<!-- srcset과 sizes로 적절한 크기 제공 -->
<img
  srcset="
    /image-400w.webp  400w,
    /image-800w.webp  800w,
    /image-1200w.webp 1200w,
    /image-1600w.webp 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  src="/image-800w.webp"
  alt="Responsive image"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
/>

// Native lazy loading
<img src="/below-fold.webp" loading="lazy" decoding="async" />

// Intersection Observer를 이용한 커스텀 lazy loading
const imageObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.srcset = img.dataset.srcset || '';
        img.classList.add('loaded');
        imageObserver.unobserve(img);
      }
    });
  },
  {
    rootMargin: '200px 0px', // 200px 전에 로드 시작
    threshold: 0.01,
  }
);

document.querySelectorAll('img[data-src]').forEach((img) => {
  imageObserver.observe(img);
});

// Next.js에서 blur placeholder
import Image from 'next/image';
import { getPlaiceholder } from 'plaiceholder';

export async function getStaticProps() {
  const { base64 } = await getPlaiceholder('/public/hero.jpg');

  return {
    props: { blurDataURL: base64 },
  };
}

export default function Page({ blurDataURL }) {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      placeholder="blur"
      blurDataURL={blurDataURL}
    />
  );
}

// CSS로 blur 효과 직접 구현
const BlurImage = ({ src, alt }) => {
  const [loaded, setLoaded] = useState(false);

  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      {!loaded && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            backgroundImage: `url(${src}?w=20&q=10)`,
            backgroundSize: 'cover',
            filter: 'blur(20px)',
            transform: 'scale(1.1)',
          }}
        />
      )}
      <img
        src={src}
        alt={alt}
        onLoad={() => setLoaded(true)}
        style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
};

// package.json - sideEffects 설정
{
  "name": "my-library",
  "sideEffects": false,
  // 또는 사이드 이펙트가 있는 파일만 지정
  "sideEffects": ["*.css", "*.scss", "./src/polyfills.js"]
}

// Bad: 전체 라이브러리 임포트 (tree shaking 불가)
import _ from 'lodash';
const result = _.map(data, fn);

// Good: 개별 함수만 임포트
import map from 'lodash/map';
const result = map(data, fn);

// Best: lodash-es 사용 (ES Module)
import { map } from 'lodash-es';
const result = map(data, fn);

// webpack.config.js - Tree Shaking 최적화
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,     // 사용된 export만 마킹
    minimize: true,         // 미사용 코드 제거
    sideEffects: true,      // sideEffects 플래그 활용
    concatenateModules: true, // 모듈 연결 (Scope Hoisting)
  },
};

// 1. 동적 import로 코드 분할
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <HeavyComponent />
    </Suspense>
  );
}

// 2. 라우트 기반 코드 분할 (Next.js)
import dynamic from 'next/dynamic';

const DashboardChart = dynamic(
  () => import('@/components/DashboardChart'),
  {
    loading: () => <ChartSkeleton />,
    ssr: false, // 클라이언트에서만 로드
  }
);

// 3. webpack magic comments로 청크 제어
const AdminPanel = React.lazy(
  () => import(
    /* webpackChunkName: "admin" */
    /* webpackPrefetch: true */
    './AdminPanel'
  )
);

// 4. Named Export 코드 분할
const MyComponent = React.lazy(() =>
  import('./MyModule').then((module) => ({
    default: module.MyComponent,
  }))
);

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

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

// 실행: ANALYZE=true next build

# 번들 크기 모니터링 도구들
# 1. bundlephobia - 패키지 크기 확인
npx bundlephobia lodash

# 2. source-map-explorer
npx source-map-explorer dist/main.*.js

# 3. webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/stats.json

# 4. size-limit - CI에서 크기 제한
npx size-limit

// .size-limit.json - 번들 크기 제한 설정
[
  {
    "path": "dist/index.js",
    "limit": "50 KB",
    "import": "{ Button }",
    "ignore": ["react", "react-dom"]
  },
  {
    "path": "dist/index.js",
    "limit": "100 KB"
  }
]

// critters 플러그인으로 Critical CSS 인라인
// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true, // Next.js 내장 CSS 최적화
  },
};

// 수동 Critical CSS 추출
const critical = require('critical');

critical.generate({
  inline: true,
  base: 'dist/',
  src: 'index.html',
  target: 'index-critical.html',
  width: 1300,
  height: 900,
  penthouse: {
    blockJSRequests: false,
  },
});

// 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: {
        standard: [/^modal-/, /^tooltip-/],
        deep: [/^data-theme/],
        greedy: [/animate/],
      },
    }),
  ],
};

/* contain 속성으로 렌더링 범위 제한 */
.card {
  contain: layout style paint;
  /* layout: 레이아웃 격리 */
  /* style: 카운터/quotes 격리 */
  /* paint: 페인트 격리 (overflow: hidden 효과) */
}

/* content-visibility로 화면 밖 렌더링 건너뛰기 */
.article-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* 예상 크기 힌트 */
}

/* 긴 목록의 각 아이템에 적용 */
.list-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}

/* font-display 옵션 비교 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');

  /* swap: FOUT 허용, CLS 발생 가능 */
  font-display: swap;

  /* optional: FOIT 3초 후 시스템 폰트 유지 (CLS 없음) */
  font-display: optional;

  /* fallback: 100ms FOIT 후 swap, 3초 후 유지 */
  font-display: fallback;
}

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

/* Variable Font으로 파일 수 줄이기 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;    /* 가변 weight */
  font-style: normal;
  font-display: optional;
}

/* subset으로 필요한 문자만 포함 */
@font-face {
  font-family: 'NotoSansKR';
  src: url('/fonts/noto-sans-kr-subset.woff2') format('woff2');
  unicode-range: U+AC00-D7A3; /* 한글 완성형만 */
  font-display: swap;
}

// Next.js - next/font 최적화
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'optional',
  preload: true,
  variable: '--font-inter',
  adjustFontFallback: true, // CLS 방지를 위한 폴백 조정
});

export default function RootLayout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

캐시 전략 흐름도:
┌─────────────────────────────────────────┐
│ 리소스가 재사용 가능한가?              │
├── No  → Cache-Control: no-store         │
├── Yes → 매번 서버 확인이 필요한가?      │
│   ├── Yes → Cache-Control: no-cache     │
│   └── No  → 중간 캐시 허용?            │
│       ├── Yes → Cache-Control: public   │
│       └── No  → Cache-Control: private  │
│            └── max-age 설정             │
│               ├── 해시된 파일 → 31536000│
│               └── HTML → 0 + ETag       │
└─────────────────────────────────────────┘

# Nginx 캐시 설정 예시
server {
    # HTML - 항상 서버 확인
    location ~* \.html$ {
        add_header Cache-Control "no-cache";
        add_header ETag $upstream_http_etag;
    }

    # 해시된 정적 에셋 - 1년 캐시
    location ~* \.(js|css|webp|avif|woff2)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # API 응답 - stale-while-revalidate
    location /api/ {
        add_header Cache-Control "public, max-age=60, stale-while-revalidate=300";
    }
}

// service-worker.js - Workbox 기반 캐싱 전략
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import {
  CacheFirst,
  StaleWhileRevalidate,
  NetworkFirst,
} from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// 빌드 시 생성된 에셋 프리캐시
precacheAndRoute(self.__WB_MANIFEST);

// 이미지: Cache First
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30일
      }),
    ],
  })
);

// API: Stale While Revalidate
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5분
      }),
    ],
  })
);

// HTML 페이지: Network First
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst({
    cacheName: 'pages',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
    ],
    networkTimeoutSeconds: 3,
  })
);

// Vercel Edge Config 예시
// next.config.js
module.exports = {
  headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'CDN-Cache-Control',
            value: 'public, max-age=60, stale-while-revalidate=3600',
          },
          {
            key: 'Vercel-CDN-Cache-Control',
            value: 'public, max-age=3600, stale-while-revalidate=86400',
          },
        ],
      },
    ];
  },
};

// CloudFront Cache Policy (AWS CDK)
const cachePolicy = new cloudfront.CachePolicy(this, 'CachePolicy', {
  defaultTtl: Duration.hours(1),
  maxTtl: Duration.days(365),
  minTtl: Duration.seconds(0),
  enableAcceptEncodingGzip: true,
  enableAcceptEncodingBrotli: true,
  headerBehavior: cloudfront.CacheHeaderBehavior.allowList(
    'Accept',
    'Accept-Encoding'
  ),
  queryStringBehavior: cloudfront.CacheQueryStringBehavior.all(),
});

렌더링 패턴 비교:
┌──────────┬──────────┬──────────┬──────────┬──────────┐
│          │ TTFB     │ FCP      │ TTI      │ SEO      │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ CSR      │ 빠름    │ 느림    │ 느림    │ 나쁨    │
│ SSR      │ 느림    │ 빠름    │ 보통    │ 좋음    │
│ SSG      │ 매우빠름│ 매우빠름│ 빠름    │ 좋음    │
│ ISR      │ 매우빠름│ 매우빠름│ 빠름    │ 좋음    │
│ Streaming│ 빠름    │ 매우빠름│ 빠름    │ 좋음    │
└──────────┴──────────┴──────────┴──────────┴──────────┘

// app/dashboard/page.tsx - Streaming SSR
import { Suspense } from 'react';

async function SlowDataComponent() {
  const data = await fetchSlowData(); // 3초 소요
  return <div>{/* data rendering */}</div>;
}

async function FastDataComponent() {
  const data = await fetchFastData(); // 100ms 소요
  return <div>{/* data rendering */}</div>;
}

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* 빠른 컴포넌트는 즉시 렌더링 */}
      <FastDataComponent />

      {/* 느린 컴포넌트는 스트리밍 */}
      <Suspense fallback={<LoadingSkeleton />}>
        <SlowDataComponent />
      </Suspense>
    </div>
  );
}

// app/layout.tsx - loading.tsx 활용
// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-1/4 mb-4" />
      <div className="h-4 bg-gray-200 rounded w-3/4 mb-2" />
      <div className="h-4 bg-gray-200 rounded w-1/2" />
    </div>
  );
}

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

export async function generateStaticParams() {
  const products = await getTopProducts();
  return products.map((product) => ({
    id: product.id.toString(),
  }));
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return <ProductDetail product={product} />;
}

// On-Demand Revalidation
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request) {
  const { path, tag, secret } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }

  if (tag) {
    revalidateTag(tag);
  } else if (path) {
    revalidatePath(path);
  }

  return Response.json({ revalidated: true, now: Date.now() });
}

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

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

<!-- Prefetch: 다음 네비게이션에 필요한 리소스 미리 가져오기 -->
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/api/data.json" as="fetch" />

<!-- Prerender: 전체 페이지 미리 렌더링 -->
<link rel="prerender" href="/likely-next-page" />

<!-- Speculation Rules API (Chrome 121+) -->
<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/api/*" } }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "urls": ["/products", "/about"],
      "eagerness": "eager"
    }
  ]
}
</script>

// Next.js에서의 Prefetch 전략
import Link from 'next/link';

// Link 컴포넌트는 자동으로 viewport에 들어오면 prefetch
<Link href="/dashboard" prefetch={true}>
  Dashboard
</Link>

// router.prefetch로 프로그래매틱 prefetch
import { useRouter } from 'next/navigation';

function Navigation() {
  const router = useRouter();

  const handleMouseEnter = () => {
    router.prefetch('/settings');
  };

  return (
    <button onMouseEnter={handleMouseEnter} onClick={() => router.push('/settings')}>
      Settings
    </button>
  );
}

<!-- 스크립트 로딩 패턴 비교 -->
<!-- 1. 기본: HTML 파싱 차단 -->
<script src="script.js"></script>

<!-- 2. async: 다운로드 병렬, 실행 시 차단 (순서 보장 X) -->
<script async src="analytics.js"></script>

<!-- 3. defer: 다운로드 병렬, DOMContentLoaded 전 순서대로 실행 -->
<script defer src="app.js"></script>

<!-- 4. type=module: defer처럼 동작 + ES Module -->
<script type="module" src="app.mjs"></script>

// Partytown: 서드파티 스크립트를 Web Worker로 이동
// next.config.js
const { withPartytown } = require('@builder.io/partytown/next');

module.exports = withPartytown({
  partytown: {
    forward: ['dataLayer.push', 'gtag'],
  },
});

<!-- Partytown 적용 -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js"></script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

// Next.js Script 컴포넌트 활용
import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* beforeInteractive: _document에서 로드 */}
      <Script
        src="https://polyfill.io/v3/polyfill.min.js"
        strategy="beforeInteractive"
      />

      {/* afterInteractive: 페이지 하이드레이션 후 (기본값) */}
      <Script
        src="https://www.googletagmanager.com/gtag/js"
        strategy="afterInteractive"
      />

      {/* lazyOnload: 브라우저 idle 시 로드 */}
      <Script
        src="https://connect.facebook.net/en_US/fbevents.js"
        strategy="lazyOnload"
      />

      {/* worker: Partytown으로 Web Worker 실행 */}
      <Script
        src="https://example.com/tracking.js"
        strategy="worker"
      />

      <Component {...pageProps} />
    </>
  );
}

Lighthouse Performance 점수 가중치 (v12):
┌──────────────────────┬────────┐
│ 지표                 │ 가중치 │
├──────────────────────┼────────┤
│ FCP (First Content.) │ 10%    │
│ SI (Speed Index)     │ 10%    │
│ LCP (Largest Cont.)  │ 25%    │
│ TBT (Total Blocking) │ 30%    │
│ CLS (Cumulative L.S.)│ 25%    │
└──────────────────────┴────────┘
INP는 필드 데이터(CrUX)에서만 측정됨

# .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
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

// lighthouserc.json
{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "url": [
        "http://localhost:3000/",
        "http://localhost:3000/blog",
        "http://localhost:3000/products"
      ],
      "startServerCommand": "npm start"
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["warn", { "minScore": 0.95 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1800 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["error", { "maxNumericValue": 300 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

// web-vitals 라이브러리로 실제 사용자 지표 수집
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,     // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    entries: metric.entries,
  });

  // Beacon API로 페이지 이탈 시에도 안정적 전송
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

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

// 커스텀 RUM 수집기
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.init();
  }

  init() {
    // Navigation Timing
    window.addEventListener('load', () => {
      const nav = performance.getEntriesByType('navigation')[0];
      this.metrics.dns = nav.domainLookupEnd - nav.domainLookupStart;
      this.metrics.tcp = nav.connectEnd - nav.connectStart;
      this.metrics.ttfb = nav.responseStart - nav.requestStart;
      this.metrics.domLoad = nav.domContentLoadedEventEnd - nav.fetchStart;
      this.metrics.fullLoad = nav.loadEventEnd - nav.fetchStart;

      this.report();
    });

    // Resource Timing
    const resourceObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.transferSize === 0) continue; // 캐시에서 로드된 리소스 제외

        this.trackResource({
          name: entry.name,
          type: entry.initiatorType,
          duration: entry.duration,
          size: entry.transferSize,
        });
      }
    });
    resourceObserver.observe({ type: 'resource', buffered: true });

    // Long Tasks
    const longTaskObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.trackLongTask({
          duration: entry.duration,
          startTime: entry.startTime,
          attribution: entry.attribution,
        });
      }
    });

    try {
      longTaskObserver.observe({ type: 'longtask', buffered: true });
    } catch (e) {
      // longtask observer not supported
    }
  }

  trackResource(data) {
    // 느린 리소스 경고
    if (data.duration > 1000) {
      console.warn('Slow resource:', data.name, data.duration + 'ms');
    }
  }

  trackLongTask(data) {
    // 50ms 이상의 Long Task 기록
    console.warn('Long Task:', data.duration + 'ms');
  }

  report() {
    console.table(this.metrics);
  }
}

new PerformanceMonitor();

// CrUX API로 필드 데이터 조회
async function getCruxData(url) {
  const apiKey = process.env.CRUX_API_KEY;
  const response = await fetch(
    'https://chromeuxreport.googleapis.com/v1/records:queryRecord' +
    '?key=' + apiKey,
    {
      method: 'POST',
      body: JSON.stringify({
        url: url,
        formFactor: 'PHONE',
        metrics: [
          'largest_contentful_paint',
          'interaction_to_next_paint',
          'cumulative_layout_shift',
          'experimental_time_to_first_byte',
        ],
      }),
    }
  );

  const data = await response.json();

  // p75 값 추출
  const lcp = data.record.metrics.largest_contentful_paint;
  console.log('LCP p75:', lcp.percentiles.p75 + 'ms');
  console.log('LCP distribution:', lcp.histogram);

  return data;
}

성능 최적화 체크리스트:
[ ] 이미지
    [ ] WebP/AVIF 포맷 사용
    [ ] 적절한 크기의 반응형 이미지 제공
    [ ] LCP 이미지에 priority/fetchpriority 설정
    [ ] 스크롤 아래 이미지에 loading="lazy"
    [ ] aspect-ratio 또는 width/height 명시

[ ] JavaScript
    [ ] 코드 분할 (route-based + component-based)
    [ ] Tree Shaking 확인 (sideEffects: false)
    [ ] 번들 크기 모니터링
    [ ] 불필요한 polyfill 제거
    [ ] 서드파티 스크립트 defer/async/worker

[ ] CSS
    [ ] Critical CSS 인라인
    [ ] 미사용 CSS 제거
    [ ] content-visibility 활용
    [ ] CSS Containment 적용

[ ] 폰트
    [ ] WOFF2 포맷 사용
    [ ] font-display: optional 또는 swap
    [ ] 서브셋 적용 (한글/라틴 분리)
    [ ] Variable Font 활용
    [ ] preload 설정

[ ] 캐싱
    [ ] 정적 에셋: immutable + 1년
    [ ] HTML: no-cache + ETag
    [ ] API: stale-while-revalidate
    [ ] Service Worker 캐싱 전략
    [ ] CDN Edge 캐싱 설정

[ ] 렌더링
    [ ] 적절한 렌더링 패턴 선택
    [ ] Suspense로 스트리밍
    [ ] ISR revalidate 설정
    [ ] loading.tsx 스켈레톤

[ ] 모니터링
    [ ] Lighthouse CI 자동화
    [ ] Web Vitals RUM 수집
    [ ] CrUX 데이터 모니터링
    [ ] 성능 회귀 알림 설정