performance-vitalslisted

# Performance & Core Web Vitals Core Web Vitals 최적화를 강제하는 스킬입니다. ## 2025 Context > **2024년 3월: INP(Interaction to Next Paint)가 FID를 대체** > **Google Search 랭킹에 Core Web Vitals 영향** ## Core Web Vitals 목표 | 지표 | Good | Needs Improvement | Poor | |------|------|-------------------|------| | **LCP** (Largest Contentful Paint) | ≤ 2.5s | 2.5s - 4s | > 4s | | **INP** (Interaction to Next Paint) | ≤ 200ms | 200ms - 500ms | > 500ms | | **CLS** (Cumulative Layout Shift) | ≤ 0.1 | 0.1 - 0.25 | > 0.25 | ## LCP 최적화 (Largest Contentful Paint) ### 문제 원인 - 느린 서버 응답 - 렌더 차단 리소스 (CSS, JS) - 느린 리소스 로딩 - 클라이언트 사이드 렌더링 ### 해결 방법 #### 1. 이미지 최적화 ```tsx // ❌ BAD: 최적화 없는 이미지 <img src="/hero.jpg" alt="Hero" /> // ✅ GOOD: Next.js Image 컴포넌트 import Image from 'next/image'; <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority // LCP 이미지는 priority 추가 placeholder="blur" blurDataURL={blurDataUrl} /> ``` #### 2. 폰트 최적화 ```tsx // ✅ GOOD: Next.js 폰트 최적화 import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', // FOIT 방지 preload: true, }); // CSS @font-face { font-family: 'Custom Font'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; } ``` #### 3. Critical CSS 인라인 ```tsx // next.config.js module.exports = { experimental: { optimizeCss: true, }, }; ``` #### 4. 프리로드 ```html <!-- 중요 리소스 프리로드 --> <link rel="preload" href="/hero.jpg" as="image" /> <link rel="preload" href="/fonts