웹 성능 최적화 2025 — Core Web Vitals 개선 전략

INP (Interaction to Next Paint)

FID를 대체하는 새로운 메트릭입니다. 사용자 인터랙션의 전체 지연을 측정합니다.

// INP 개선: 무거운 작업을 분리
function handleClick() {
  // 즉시 UI 업데이트
  setLoading(true);
  
  // 무거운 작업은 다음 프레임으로
  requestAnimationFrame(() => {
    startTransition(() => {
      processData();
    });
  });
}

LCP 최적화

<!-- 중요 이미지 우선 로드 -->
<img src="hero.webp" fetchpriority="high" />
<link rel="preload" href="hero.webp" as="image" />