Core Web Vitals 완전 정복: LCP/FID/CLS

핵심 개념

LCP·INP·CLS 측정·개선 방법·실전 사례 — Google 검색 순위 영향.

본문

Core Web Vitals 3가지

📋 코드 (17줄)

LCP (Largest Contentful Paint)
- 가장 큰 콘텐츠 표시까지 시간
- 좋음: < 2.5s
- 개선 필요: 2.5~4s
- 나쁨: > 4s

INP (Interaction to Next Paint, FID 대체)
- 사용자 입력 → 다음 paint
- 좋음: < 200ms
- 개선 필요: 200~500ms
- 나쁨: > 500ms

CLS (Cumulative Layout Shift)
- 누적 레이아웃 이동
- 좋음: < 0.1
- 개선 필요: 0.1~0.25
- 나쁨: > 0.25

LCP 개선

HTML📋 코드 (12줄)

<!-- 1. preload critical resources -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>


<!-- 2. priority hint -->
<img src="/hero.webp" fetchpriority="high" alt="" />


<!-- 3. preconnect -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

TSX📋 코드 (19줄)

// Next.js — priority prop
<Image
  src="/hero.webp"
  priority           // LCP 후보 자동 preload
  alt=""
  width={1920}
  height={1080}
/>


// 폰트 최적화
import { Inter } from 'next/font/google';

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

INP 개선 (구 FID)

TYPESCRIPT📋 코드 (37줄)

// ❌ 메인 스레드 블로킹
function handleClick() {
  // 200ms+ 동기 작업
  for (let i = 0; i < 1000000; i++) { ... }
  setState(result);
}


// ✅ 작업 분할 (yield)
async function handleClick() {
  setState({ loading: true });
  await yieldToMain();  // 브라우저에 제어권

  const result = await processInChunks(data);
  setState({ result });
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}


// ✅ Web Worker 활용
const worker = new Worker('/processor.js');
worker.postMessage(data);
worker.onmessage = (e) => setState(e.data);


// ✅ React 18+ — useTransition
const [isPending, startTransition] = useTransition();

const handleSearch = (q: string) => {
  setQuery(q);  // 긴급 (입력)
  startTransition(() => {
    setResults(filterItems(q));  // 비긴급
  });
};

CLS 개선

CSS📋 코드 (25줄)

/* 1. 이미지·비디오 width/height 명시 */
img { width: 800px; height: 600px; }


/* 2. aspect-ratio 활용 */
.card-image {
  aspect-ratio: 16 / 9;
  background: #f3f4f6;  /* 로딩 중 placeholder */
}


/* 3. font-size-adjust + size-adjust */
@font-face {
  font-family: 'Custom';
  src: url('/font.woff2');
  size-adjust: 95%;       /* 크기 보정 */
  font-display: swap;
}


/* 4. 광고·iframe 영역 미리 확보 */
.ad-slot {
  min-height: 250px;
  background: #f9fafb;
}

측정 (web-vitals)

TYPESCRIPT📋 코드 (18줄)

import { onLCP, onINP, onCLS } from 'web-vitals';

function send(metric: any) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      url: location.pathname,
      device: navigator.userAgent,
    }),
  });
}

onLCP(send);
onINP(send);
onCLS(send);

Vercel Speed Insights

TSX📋 코드 (16줄)

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}


// → 자동으로 LCP·INP·CLS 수집
// → 대시보드에서 페이지별·국가별 분석

다음 챕터

CH.92 "이미지 최적화: WebP/AVIF + lazy + srcset".

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내 코드의 Core Web Vitals 부분을 분석해서
실전 분석 + 개선 우선순위를 알려줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Core Web Vitals 관련 베스트 프랙티스 5가지를
비교 분석해서 패턴 추출를 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

내 프로젝트 전체에서 Core Web Vitals
최적화 가능 위치를 보고해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 한국 시장의 Core Web Vitals
트렌드를 솔직히 알려줘.

⭐ 이것만 기억하세요

Core Web Vitals 완전 정복: LCP/FID/CLS는 이 3가지만 확실히 잡으세요

1.LCP < 2.5s · INP < 200ms · CLS < 0.1 = Google 권장

2.priority + preconnect + font display:swap = LCP 핵심

3.aspect-ratio + width/height 명시 = CLS 0

💬 이 챕터 질문 보기

STACK-ANALYSIS · CH.91 — 질문하거나 답변을 확인하세요

→

진행도 91 / 120

← 커리큘럼으로 ← 목록으로 (stack-analysis)