Performance & Core Web Vitals

~22 min · LCP, CLS, INP, Web Vitals

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

중요한 metric 셋

Metric	목표	Next.js lever
LCP — Largest Contentful Paint	< 2.5s	SSR, image `preload`, streaming, edge caching
CLS — Cumulative Layout Shift	< 0.1	`next/image` 가 space reserve, `next/font` 가 swap shift kill
INP — Interaction to Next Paint	< 200ms	Server Component 가 JS 줄임, React Transition 이 yield

공짜로 받는 것

Server Component — JS 덜 ship → TTI 더 빠름 / INP 더 좋음.
Per-route 자동 code splitting — 추가 config 0.
next/image 가 WebP/AVIF + responsive size 서빙.
next/font 가 font self-host, swap CLS 제거.
가 default 로 prefetch.
Streaming + Suspense 로 perceived performance.

Measuring

CI 에서 Lighthouse 돌려. Real-user metric 위해 Vercel 의 @vercel/speed-insights 또는 본인 Web Vitals reporter 추가. Synthetic Lighthouse 는 sanity check; real user 가 진실.

Code

next.config 의 bundle analyzer·ts

// next.config.ts
import type { NextConfig } from 'next';
import withBundleAnalyzer from '@next/bundle-analyzer';

const withAnalyzer = withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });

const config: NextConfig = {
  images: { remotePatterns: [{ protocol: 'https', hostname: 'images.example.com' }] },
};

export default withAnalyzer(config);

Report 보는 bash·bash

ANALYZE=true npm run build
# .next/analyze/client.html 열어서 모든 client chunk 의 treemap

Real-user Vitals reporter·tsx

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html><body>
      {children}
      <Analytics />
      <SpeedInsights />
    </body></html>
  );
}

External links

Exercise

Project 에서 bundle analyzer 돌려. 가장 큰 client chunk 셋 찾기. 각각 작업을 Server Component 로 옮기거나 chunk lazy-load 가능한지 결정. 적어도 한 개 fix 적용.

Progress

Progress is local-only — sign in to sync across devices.

← Previousnext/script Next →퀴즈 · 4 questions

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.