LabHub

블로그

성능·Core Web Vitals 2025 완전 정복: LCP·CLS·INP, Real User Monitoring vs Synthetic, Critical Rendering Path, JS 번들·Image·Font 최적화, Caching·Edge·CDN·HTTP/3, Vercel Speed Insights·CrUX·PageSpeed, 한국 네트워크 특성 — Season 6 Ep 6

2026-04-15 · 15 분 읽기 · #performance#core-web-vitals#lcp#cls#inp#rum#image-optimization#font-optimization#caching#edge#cdn#http3#speed-insights#crux#pagespeed

한국어English日本語

프롤로그 · 성능은 기능이 아니다

개발자들이 자주 착각하는 것: "성능 최적화는 기능 출시 후의 튜닝". 2025년 현실은 다르다.

"성능은 기능이 아니다. 모든 기능의 조건이다."

좋은 AI·좋은 UX·좋은 모션도 느리면 아무 가치 없다. 이번 글은 2025년 실전 성능 가이드.

1장 · Core Web Vitals 2025 — 3대 지표

LCP (Largest Contentful Paint)

CLS (Cumulative Layout Shift)

INP (Interaction to Next Paint) — 2024 FID 대체

측정 기준

보조 지표

2장 · RUM vs Synthetic — 무엇을 측정할까

Synthetic (합성 테스트)

RUM (Real User Monitoring)

병행 원칙

CrUX (Chrome User Experience Report)

3장 · Critical Rendering Path

브라우저의 렌더 파이프라인

  1. Network: HTML 다운로드
  2. Parse HTML → DOM
  3. Parse CSS → CSSOM
  4. DOM + CSSOM → Render Tree
  5. Layout (크기·위치)
  6. Paint (픽셀)
  7. Composite (레이어 합성)

주요 병목

2025년 표준 개선 기법

(1) Critical CSS Inline

(2) defer / async JS

(3) fetchpriority

(4) preconnect / dns-prefetch

(5) preload

4장 · JS 번들 다이어트

2025년 번들의 "좋은 크기":

번들러 지형 2025

번들 분석 도구

흔한 문제

(1) 무거운 라이브러리

(2) 사용 안 하는 코드

(3) Dynamic Import

(4) Polyfill 과잉

(5) CSS-in-JS 오버헤드

5장 · Image 최적화 — LCP의 핵심

포맷 선택 (2025)

포맷용도압축률지원
AVIF최신최강 (~50% vs JPEG)모던 브라우저
WebP표준JPEG 대비 30%모든 모던
JPEG사진기본100%
PNG투명·단순무손실100%
SVG벡터작음100%

2025년 권장: AVIF + WebP + JPEG 폴백

반응형 이미지

Next.js Image 컴포넌트

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority         // LCP 후보
  alt="Hero"
  placeholder="blur"
  blurDataURL={blur}
/>

Astro Image / Astro Assets

CDN 이미지 서비스

주요 팁

6장 · Font 최적화

핵심 이슈

font-display 설정

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard.woff2') format('woff2');
  font-display: swap;  /* 기본 폰트 먼저, 로드 후 교체 */
}

size-adjust·ascent-override

@font-face {
  font-family: 'Pretendard-fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
}

서브셋팅

Variable Font

2025년 권장 스택

7장 · Caching 전략

HTTP 캐시

Next.js 15 Caching (재설계)

Service Worker

Edge Caching

8장 · Edge·CDN·HTTP/3

CDN의 역할

2025년 주요 CDN

Edge Function

HTTP/3 (QUIC)

한국 네트워크 특성

9장 · INP 최적화 — 반응성 실전

INP의 원인

실전 기법

(1) Debounce / Throttle

(2) Scheduler API (Chrome)

scheduler.postTask(() => heavyWork(), { priority: 'background' });

(3) useDeferredValue / useTransition (React 18+)

const [isPending, startTransition] = useTransition();
startTransition(() => setQuery(input));

(4) Web Workers

(5) Virtualization

(6) Code Splitting

측정

10장 · Vercel Speed Insights·CrUX·PageSpeed

Vercel Speed Insights

Datadog RUM / New Relic Browser

CrUX Dashboard

PageSpeed Insights

WebPageTest

11장 · 실전 체크리스트 · 성능 린터

프로젝트 초기 설정

릴리즈 전 체크

릴리즈 후 모니터링

12장 · 2025년 고급 패턴

Partial Pre-Rendering (PPR)

Islands Architecture

Qwik Resumability

Bun/Deno 런타임

Turbopack

Server-sent Streaming

13장 · 다음 글 예고 — Season 6 Ep 7: "접근성과 국제화"

성능을 잘 만들어 놓았다면 다음은 모두가 쓸 수 있는 제품. Ep 7은 접근성(a11y)과 국제화(i18n).

"접근성은 소수의 권리가 아니다. 모두의 품질이다."

다음 글에서 만나자.

에필로그 · 체크리스트 12

  1. Core Web Vitals p75 기준을 RUM으로 추적하는가?
  2. LCP < 2.5s, CLS < 0.1, INP < 200ms 를 달성하는가?
  3. LCP 이미지에 priority + fetchpriority=high 설정되는가?
  4. 모든 이미지에 width·height 가 지정되는가?
  5. 폰트가 font-display + size-adjust 로 FOIT/CLS 방지되는가?
  6. 번들이 초기 <170kb, 라우트 <50kb 인가?
  7. Dynamic Import·Code Splitting 을 적극 활용하는가?
  8. CDN·Edge Caching 이 설정되어 있는가?
  9. HTTP/3 가 활성화되어 있는가?
  10. Lighthouse CI로 회귀 감지되는가?
  11. Vercel Speed Insights 또는 RUM 운영되는가?
  12. 한국 네트워크·모바일 실사용자 경험이 고려되는가?

"빠른 제품은 좋은 제품이다. 느린 제품은 존재하지 않는 제품이다."

— Season 6 Ep 6, Fin.

원문 보기: https://www.youngju.dev/blog/culture/2026-04-15-core-web-vitals-2025-complete-guide-lcp-cls-inp-real-user-monitoring-image-font-js-cache-optimization-edge-cdn-http3-deep-dive-guide-2025

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다