FID는 아직 보나요?

Chrome은 **INP**로 교체했습니다. 여전히 구버전 리포트에 FID가 보일 수 있으나, 상호작용 지연은 **INP** 기준으로 보는 것이 맞습니다.

필드 데이터와 랩 데이터는 무엇이 우선인가요?

사용자 경험·검색 연동 관점에서는 **필드(실사용자)**가 우선입니다. 랩은 디버깅·회귀 방지에 강합니다.

점수만 맞추면 되나요?

지표는 수단입니다. 전환·이탈과 함께 보고, **비즈니스 임계 페이지**부터 우선순위를 정하세요.

Core Web Vitals 개선 체크리스트 | LCP·CLS 중심 실전 최적화

2026년 3월 30일 · 18분 읽기 · 수정 2026년 3월 30일 중급 가이드

이 글의 핵심

LCP는 최대 콘텐츠 페인트·리소스 경로를, CLS는 레이아웃 이동 원인을 줄이는 순서로 잡고 INP까지 묶어 실무 체크리스트로 정리합니다.

들어가며

Core Web Vitals는 로딩(LCP), 상호작용(INP, 과거 FID), 시각적 안정성(CLS)으로 사용자 체감에 가까운 지표를 제공합니다. Web Vitals LCP CLS 개선은 “점수 올리기”가 아니라 가장 큰 페인트가 빨라지고, 레이아웃이 덜 흔들리고, 입력에 빨리 반응하게 만드는 작업입니다.

이 글은 2026년 기준 Chrome의 INP 중심 설명을 포함하고, 이미지·폰트·서드파티 스크립트처럼 자주 반복되는 원인부터 제거하는 체크리스트 형식으로 정리합니다. 프레임워크에 종속되지 않은 원칙과, Next.js 등에서 흔한 패턴을 함께 둡니다.

이 글을 읽으면

LCP 후보를 찾고 리소스 우선순위를 조정하는 순서를 알 수 있습니다
CLS의 흔한 원인(이미지·폰트·광고·동적 삽입)을 줄이는 방법을 적용할 수 있습니다
INP 개선을 위한 메인 스레드·이벤트 처리 관점의 점검표를 갖출 수 있습니다

개념 설명

지표 한 줄 정리

지표	의미	좋은 방향(대략)
LCP (Largest Contentful Paint)	뷰포트 내 가장 큰 콘텐츠가 그려지는 시점	빠를수록 좋음(일반적으로 2.5s 이내 목표)
CLS (Cumulative Layout Shift)	로딩 중 레이아웃 이동 누적	낮을수록 좋음(0.1 이하 목표)
INP (Interaction to Next Paint)	상호작용 후 다음 페인트까지 지연	낮을수록 좋음(200ms 대 목표)

임계값은 가이드이며, 사이트·지역·기기에 따라 다릅니다. 필드 데이터(PageSpeed Insights, CrUX, RUM)를 기준으로 잡는 것이 안전합니다.

왜 LCP·CLS가 SEO·체감에 묶이는가

검색 엔진은 사용자 경험 신호를 품질 신호와 함께 고려합니다. LCP가 느리면 첫 인상이 나쁘고, CLS가 크면 오클릭·신뢰가 깨집니다. INP는 SPA·위젯에서 특히 중요합니다.

실전 구현

LCP 개선 순서

1단계: LCP 요소 식별

Chrome DevTools 사용:

DevTools 열기 (F12)
Performance 탭 → 녹화 시작
페이지 새로고침
Timings 섹션에서 LCP 마커 확인
해당 시점의 요소 확인 (보통 히어로 이미지 또는 큰 텍스트 블록)

Lighthouse 사용:

# CLI로 실행
npx lighthouse https://example.com --view

# 또는 Chrome DevTools → Lighthouse 탭

출력 예시:

Largest Contentful Paint: 3.2s
Element: <img class="hero" src="/hero.jpg">

2단계: HTML에서 발견 경로 단축

나쁜 예: 히어로 이미지가 JavaScript로 지연 로드

// React - 클라이언트 사이드 렌더링
function Hero() {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    // JavaScript 실행 후에야 이미지 로드 시작
    setImageSrc('/hero.jpg');
  }, []);

  return <img src={imageSrc} alt="Hero" />;
}

좋은 예: SSR 또는 정적 HTML에 포함

// Next.js - 서버 컴포넌트
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={630}
      priority  // LCP 이미지 우선순위
    />
  );
}

3단계: 우선순위 설정

fetchpriority 사용:

<!-- LCP 이미지 -->
<img
  src="/hero.webp"
  alt="Hero image"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
/>

<!-- 비중요 이미지 -->
<img
  src="/sidebar-ad.jpg"
  alt="Ad"
  width="300"
  height="250"
  fetchpriority="low"
  loading="lazy"
/>

프리로드 (신중하게):

<head>
  <!-- LCP 이미지만 프리로드 -->
  <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
  
  <!-- 폰트 프리로드 (선택적) -->
  <link rel="preload" as="font" href="/fonts/main.woff2" type="font/woff2" crossorigin>
</head>

주의: 프리로드 남용 시 다른 리소스 기아 발생

4단계: 이미지 포맷 및 크기 최적화

반응형 이미지:

<img
  src="/hero-800.webp"
  srcset="
    /hero-400.webp 400w,
    /hero-800.webp 800w,
    /hero-1200.webp 1200w,
    /hero-1600.webp 1600w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  alt="Hero"
  width="1200"
  height="630"
  fetchpriority="high"
/>

Next.js Image 최적화:

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={630}
      priority
      quality={85}  // 기본 75보다 높임
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

5단계: TTFB 개선

서버 응답 시간 측정:

# curl로 TTFB 측정
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://example.com

# 또는 WebPageTest

Next.js App Router 캐싱:

// app/page.tsx
export const revalidate = 3600;  // 1시간 캐싱

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 }
  });

  return <div>{/* ... */}</div>;
}

CDN 캐싱 헤더:

// Vercel Edge Function
export const config = {
  runtime: 'edge',
};

export default async function handler(req) {
  return new Response('Hello', {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

CLS 개선 순서

1단계: 이미지·비디오 치수 지정

나쁜 예: 치수 없음

<img src="/hero.jpg" alt="Hero">
<!-- 이미지 로드 전: 높이 0 → 로드 후: 높이 500px → CLS 발생 -->

좋은 예: 치수 명시

<img src="/hero.jpg" alt="Hero" width="1200" height="630">
<!-- 브라우저가 공간 예약 → CLS 없음 -->

Tailwind CSS + aspect-ratio:

<div class="aspect-video w-full max-w-3xl">
  <img 
    class="h-full w-full object-cover" 
    src="/hero.jpg" 
    alt="Hero" 
    width="1280" 
    height="720" 
  />
</div>

2단계: 웹폰트 최적화

나쁜 예: 폰트 로드 시 큰 레이아웃 이동

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  /* font-display 없음 → FOIT (Flash of Invisible Text) */
}

body {
  font-family: 'CustomFont', sans-serif;
}

좋은 예: font-display + 폴백 메트릭 조정

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;  /* 폴백 폰트 먼저 표시 */
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

Google Fonts 최적화:

<head>
  <!-- 프리커넥트 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- 폰트 로드 (display=swap) -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>

3단계: 동적 삽입 요소 공간 예약

나쁜 예: 광고가 로드되면서 콘텐츠 밀림

<div id="ad-container">
  <!-- 광고 스크립트가 나중에 삽입 → CLS 발생 -->
</div>
<article>
  <h1>Main content</h1>
  <p>...</p>
</article>

좋은 예: 고정 높이 예약

<div id="ad-container" style="min-height: 250px;">
  <!-- 광고 로드 전에도 공간 확보 → CLS 없음 -->
</div>
<article>
  <h1>Main content</h1>
  <p>...</p>
</article>

스켈레톤 UI:

function AdBanner() {
  const [adLoaded, setAdLoaded] = useState(false);

  return (
    <div className="w-full h-[250px] bg-gray-200">
      {!adLoaded && (
        <div className="animate-pulse h-full bg-gray-300" />
      )}
      <div 
        id="ad-slot" 
        onLoad={() => setAdLoaded(true)}
      />
    </div>
  );
}

4단계: 애니메이션 최적화

나쁜 예: 레이아웃 속성 애니메이션

.modal {
  transition: height 0.3s;
}

.modal.open {
  height: 500px;  /* 레이아웃 변경 → CLS */
}

좋은 예: transform/opacity 사용

.modal {
  height: 500px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s;
}

.modal.open {
  transform: scaleY(1);  /* 레이아웃 변경 없음 → CLS 없음 */
}

INP 개선 순서

1단계: 긴 작업 분할

나쁜 예: 메인 스레드 블로킹

button.addEventListener('click', () => {
  // 무거운 계산 (200ms)
  const result = [];
  for (let i = 0; i < 1000000; i++) {
    result.push(Math.sqrt(i));
  }
  updateUI(result);
});

좋은 예: 청크 단위 스케줄링

async function processInChunks(data, chunkSize = 1000) {
  const results = [];
  
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    
    // 청크 처리
    for (const item of chunk) {
      results.push(Math.sqrt(item));
    }
    
    // 메인 스레드 양보
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  return results;
}

button.addEventListener('click', async () => {
  const data = Array.from({ length: 1000000 }, (_, i) => i);
  const result = await processInChunks(data);
  updateUI(result);
});

Web Worker 사용:

// worker.js
self.addEventListener('message', (e) => {
  const result = [];
  for (let i = 0; i < e.data.length; i++) {
    result.push(Math.sqrt(e.data[i]));
  }
  self.postMessage(result);
});

// main.js
const worker = new Worker('/worker.js');

button.addEventListener('click', () => {
  const data = Array.from({ length: 1000000 }, (_, i) => i);
  
  worker.postMessage(data);
  
  worker.addEventListener('message', (e) => {
    updateUI(e.data);
  });
});

2단계: 이벤트 핸들러 최적화

나쁜 예: 동기 DOM 대량 갱신

button.addEventListener('click', () => {
  const container = document.getElementById('list');
  
  // 1000개 DOM 노드 동기 추가 (수백 ms)
  for (let i = 0; i < 1000; i++) {
    const item = document.createElement('div');
    item.textContent = `Item ${i}`;
    container.appendChild(item);
  }
});

좋은 예: DocumentFragment + 가상 스크롤

button.addEventListener('click', () => {
  const container = document.getElementById('list');
  const fragment = document.createDocumentFragment();
  
  // 보이는 영역만 렌더링 (가상 스크롤)
  const visibleStart = 0;
  const visibleEnd = 50;
  
  for (let i = visibleStart; i < visibleEnd; i++) {
    const item = document.createElement('div');
    item.textContent = `Item ${i}`;
    fragment.appendChild(item);
  }
  
  container.appendChild(fragment);
});

React 가상 스크롤:

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      Item {items[index]}
    </div>
  );

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

3단계: 서드파티 스크립트 최적화

나쁜 예: 동기 로드

<head>
  <script src="https://analytics.example.com/script.js"></script>
  <!-- 블로킹 → LCP/INP 악화 -->
</head>

좋은 예: 비동기 + 지연 로드

<head>
  <!-- 비동기 로드 -->
  <script async src="https://analytics.example.com/script.js"></script>
</head>

<!-- 또는 사용자 상호작용 후 로드 -->
<script>
  let analyticsLoaded = false;

  function loadAnalytics() {
    if (analyticsLoaded) return;
    analyticsLoaded = true;

    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/script.js';
    script.async = true;
    document.head.appendChild(script);
  }

  // 첫 상호작용 시 로드
  ['click', 'scroll', 'keydown'].forEach(event => {
    document.addEventListener(event, loadAnalytics, { once: true });
  });

  // 또는 5초 후 자동 로드
  setTimeout(loadAnalytics, 5000);
</script>

Partytown (Web Worker로 서드파티 실행):

// Next.js + Partytown
import { Partytown } from '@builder.io/partytown/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Partytown debug={true} forward={['dataLayer.push']} />
        
        {/* Google Analytics가 Web Worker에서 실행 */}
        <script
          type="text/partytown"
          src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

고급 활용

1) Speculation Rules API (프리페치)

기본 사용:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["/products", "/about"]
    }
  ],
  "prefetch": [
    {
      "where": {
        "href_matches": "/blog/*"
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Next.js 통합:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script
          type="speculationrules"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              prefetch: [
                {
                  where: { href_matches: '/blog/*' },
                  eagerness: 'moderate',
                },
              ],
            }),
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

주의사항:

과도한 프리페치 → 대역폭 낭비
사용자 데이터 요금제 고려
측정 후 적용

2) Critical CSS 인라인

자동 추출 (critters):

npm install critters

// next.config.js
const Critters = require('critters');

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.plugins.push(
        new Critters({
          preload: 'swap',
          pruneSource: true,
        })
      );
    }
    return config;
  },
};

수동 인라인:

<head>
  <style>
    /* Above-the-fold 최소 스타일 */
    body { margin: 0; font-family: sans-serif; }
    .hero { height: 500px; background: #f0f0f0; }
    .nav { height: 60px; }
  </style>
  
  <!-- 나머지 CSS는 비동기 로드 -->
  <link rel="preload" as="style" href="/styles/main.css" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>

3) RUM (Real User Monitoring)

web-vitals 라이브러리:

npm install web-vitals

// app/layout.tsx
'use client';

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

export function WebVitals() {
  useEffect(() => {
    function sendToAnalytics(metric) {
      // Google Analytics 4
      if (window.gtag) {
        window.gtag('event', metric.name, {
          value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
          event_category: 'Web Vitals',
          event_label: metric.id,
          non_interaction: true,
        });
      }

      // 또는 커스텀 엔드포인트
      fetch('/api/vitals', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(metric),
      });
    }

    onLCP(sendToAnalytics);
    onCLS(sendToAnalytics);
    onINP(sendToAnalytics);
  }, []);

  return null;
}

서버 수집 엔드포인트:

// app/api/vitals/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const metric = await req.json();

  // 데이터베이스 저장
  await db.webVitals.create({
    data: {
      name: metric.name,
      value: metric.value,
      id: metric.id,
      url: req.headers.get('referer'),
      userAgent: req.headers.get('user-agent'),
      timestamp: new Date(),
    },
  });

  return NextResponse.json({ success: true });
}

Grafana 대시보드 쿼리:

-- LCP p75 (페이지별)
SELECT
  url,
  PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) as p75
FROM web_vitals
WHERE name = 'LCP'
  AND timestamp > NOW() - INTERVAL '7 days'
GROUP BY url
ORDER BY p75 DESC;

-- CLS p75 (기기별)
SELECT
  CASE
    WHEN user_agent LIKE '%Mobile%' THEN 'Mobile'
    ELSE 'Desktop'
  END as device,
  PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) as p75
FROM web_vitals
WHERE name = 'CLS'
  AND timestamp > NOW() - INTERVAL '7 days'
GROUP BY device;

4) 회귀 방지 (CI 통합)

Lighthouse CI:

# .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
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000/', 'http://localhost:3000/blog'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'interaction-to-next-paint': ['error', { maxNumericValue: 200 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

성능·비교

접근	효과가 큰 경우	주의
이미지 최적화	히어로·목록 썸네일 중심 사이트	과도한 품질 저하
폰트 서브셋·preload	커스텀 폰트 LCP	preload 남용으로 다른 리소스 기아
SSR/캐시	TTFB가 병목인 LCP	동적 데이터는 stale 전략 설계
서드파티 지연 로드	INP·TBT 악화	기능 깨짐 없이 로드 순서 설계

실무 사례

사례 1: 마케팅 랜딩 페이지 - LCP 30% 개선

Before:

// 클라이언트 렌더링 + JPEG
function Hero() {
  return (
    <img src="/hero.jpg" alt="Hero" />
  );
}

측정 결과:

LCP: 3.8s
이미지 크기: 2.5MB
포맷: JPEG

After:

// SSR + WebP + 치수 명시
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1200}
      height={630}
      priority
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/webp;base64,UklGRi..."
    />
  );
}

개선 결과:

LCP: 2.6s (31% 개선)
이미지 크기: 380KB (85% 감소)
포맷: WebP

추가 최적화:

<!-- 배너 고정 높이 컨테이너 -->
<div class="min-h-[100px] bg-gray-100">
  <!-- 광고 스크립트 -->
</div>

CLS 개선: 0.25 → 0.05

사례 2: 대시보드 - INP 개선

Before:

function DataTable({ data }) {
  return (
    <table>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td key={j}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 10,000행 렌더링 → 메인 스레드 블로킹 (500ms)

측정 결과:

INP: 450ms
렌더링 시간: 500ms

After:

import { FixedSizeList } from 'react-window';

function VirtualDataTable({ data }) {
  const Row = ({ index, style }) => (
    <div style={style} className="flex border-b">
      {data[index].map((cell, j) => (
        <div key={j} className="flex-1 px-4 py-2">
          {cell}
        </div>
      ))}
    </div>
  );

  return (
    <FixedSizeList
      height={600}
      itemCount={data.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

개선 결과:

INP: 80ms (82% 개선)
렌더링: 보이는 영역만 (약 20행)

사례 3: 블로그 - 필드 vs 랩 데이터 불일치

문제: Lighthouse는 LCP 2.0s인데, 필드 데이터는 4.5s

원인 분석:

광고 스크립트: 실사용자는 광고 로드 → LCP 지연
느린 네트워크: 필드 데이터는 3G/4G 포함
CDN 캐시 미스: 일부 지역에서 캐시 미스율 높음

해결:

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);

  return (
    <>
      {/* LCP 이미지 우선 로드 */}
      <Image
        src={post.thumbnail}
        alt={post.title}
        width={1200}
        height={630}
        priority
      />

      {/* 광고는 지연 로드 */}
      <Suspense fallback={<div className="h-[250px] bg-gray-100" />}>
        <AdBanner />
      </Suspense>

      <article>{post.content}</article>
    </>
  );
}

// AdBanner 컴포넌트
'use client';

function AdBanner() {
  const [shouldLoad, setShouldLoad] = useState(false);

  useEffect(() => {
    // 3초 후 또는 스크롤 시 로드
    const timer = setTimeout(() => setShouldLoad(true), 3000);
    
    const handleScroll = () => {
      setShouldLoad(true);
    };
    
    window.addEventListener('scroll', handleScroll, { once: true });
    
    return () => {
      clearTimeout(timer);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  if (!shouldLoad) {
    return <div className="h-[250px] bg-gray-100" />;
  }

  return <div id="ad-slot" />;
}

CDN 캐싱 최적화:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:slug',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, s-maxage=3600, stale-while-revalidate=86400',
          },
        ],
      },
    ];
  },
};

개선 결과:

필드 LCP: 4.5s → 2.8s (38% 개선)
CLS: 0.18 → 0.06 (광고 공간 예약)

사례 4: 전자상거래 - 이미지 최적화

Before:

function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      {products.map(product => (
        <div key={product.id}>
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

측정 결과:

LCP: 4.2s (상품 이미지)
이미지 크기: 각 1.5MB
CLS: 0.32 (이미지 로드 시 레이아웃 이동)

After:

import Image from 'next/image';

function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      {products.map((product, index) => (
        <div key={product.id}>
          <Image
            src={product.image}
            alt={product.name}
            width={300}
            height={300}
            priority={index < 4}  // 첫 4개만 우선 로드
            loading={index < 4 ? 'eager' : 'lazy'}
            placeholder="blur"
            blurDataURL={product.blurDataURL}
          />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

개선 결과:

LCP: 2.1s (50% 개선)
이미지 크기: 각 80KB (자동 최적화)
CLS: 0.03 (치수 예약)

트러블슈팅

증상	점검
랩은 좋은데 필드는 나쁨	기기·네트워크·광고·개인정보 확장 프로그램 영향
LCP 요소가 매번 바뀜	슬라이더·랜덤 배너—안정적인 최대 요소 우선 로드
CLS가 간헐적	웹폰트 로딩·지연 광고—예약 공간과 폰트 전략
INP만 악화	특정 위젯 클릭 시만 → 해당 스크립트 프로파일링

마무리

Web Vitals LCP CLS 개선은 단일 트릭이 아니라 측정 → 병목 페이지 선정 → LCP/CLS/INP 순으로 원인 제거의 반복입니다. 렌더링 전략과 함께 Next.js 기반을 쓰는 경우 App Router 글의 캐싱·서버 컴포넌트 설계와 맞추면 TTFB와 LCP를 동시에 다루기 쉽습니다. 필드 데이터를 기준선으로 삼고 점진적으로 줄여 가면 됩니다.

이 글의 핵심

들어가며

이 글을 읽으면

목차

개념 설명

지표 한 줄 정리

왜 LCP·CLS가 SEO·체감에 묶이는가

실전 구현

LCP 개선 순서

1단계: LCP 요소 식별

2단계: HTML에서 발견 경로 단축

3단계: 우선순위 설정

4단계: 이미지 포맷 및 크기 최적화

5단계: TTFB 개선

CLS 개선 순서

1단계: 이미지·비디오 치수 지정

2단계: 웹폰트 최적화

3단계: 동적 삽입 요소 공간 예약

4단계: 애니메이션 최적화

INP 개선 순서

1단계: 긴 작업 분할

2단계: 이벤트 핸들러 최적화

3단계: 서드파티 스크립트 최적화

고급 활용

1) Speculation Rules API (프리페치)

2) Critical CSS 인라인

3) RUM (Real User Monitoring)

4) 회귀 방지 (CI 통합)

성능·비교

실무 사례

사례 1: 마케팅 랜딩 페이지 - LCP 30% 개선

사례 2: 대시보드 - INP 개선

사례 3: 블로그 - 필드 vs 랩 데이터 불일치

사례 4: 전자상거래 - 이미지 최적화

트러블슈팅

마무리