---
id: wiki-2026-0508-web-performance-optimization
title: Web Performance Optimization
category: Web
status: needs_review
canonical_id: self
aliases: [web_performance_optimization]
duplicate_of: none
source_trust_level: A
confidence_score: 1.0
tags: [- web-performance - web-vitals - lcp - inp - cls - browser-rendering]
raw_sources: [- AI/Core-Web-Vitals.md - AI/Interaction to Next Paint (INP).md - AI/Largest Contentful Paint (LCP).md - AI/Long Animation Frames API.md - AI/PageSpeed Insights.md - AI/Soft Navigation.md]
last_reinforced: 2026-05-08
github_commit: pending
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
tech_stack:
  language: unspecified
  framework: unspecified
---

# 웹 성능 최적화 및 Web Vitals (Web Performance & Web Vitals)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "사용자 경험의 계량화: 단순히 페이지가 빨리 뜨는 것을 넘어, 로딩(LCP), 반응성(INP), 시각적 안정성(CLS)을 측정하여 사용자가 체감하는 '쾌적함'을 숫자로 관리하는 전략."

## 📖 핵심 내용 (Core Content)

### 1. Core Web Vitals (핵심 웹 지표)
구글이 사용자 경험을 평가하기 위해 제시한 3대 지표입니다.
*   **LCP (Largest Contentful Paint)**: 가장 큰 콘텐츠(이미지, 텍스트 블록 등)가 렌더링되는 시점. **로딩 성능**을 측정합니다. (2.5초 이내 권장)
*   **CLS (Cumulative Layout Shift)**: 페이지 로드 중 예기치 않은 레이아웃 이동이 발생하는 정도. **시각적 안정성**을 측정합니다. (0.1 이하 권장)
*   **INP (Interaction to Next Paint)**: 사용자의 클릭, 탭, 키보드 입력에 대해 브라우저가 다음 프레임을 그릴 때까지의 시간. **반응성**을 측정합니다. (FID를 대체하는 최신 지표)

### 2. 브라우저 렌더링 최적화
*   **Main Thread 관리**: JavaScript 실행 시간이 길어지면 메인 스레드가 차단되어 반응성이 저하됩니다. **Long Tasks**를 분할하거나 Web Workers를 활용해야 합니다.
*   **Layout & Paint**: 불필요한 DOM 변경과 리플로우(Reflow)를 방지하고, GPU 가속(transform, opacity)을 활용하여 부드러운 애니메이션을 구현합니다.
*   **Long Animation Frames (LoAF) API**: 기존의 Long Tasks API보다 더 정밀하게 프레임 지연의 원인을 추적할 수 있는 최신 API입니다.

### 3. 도구 및 방법론
*   **PageSpeed Insights & Lighthouse**: 웹 페이지의 성능 점수와 구체적인 개선 가이드를 제공합니다.
*   **Chrome DevTools Performance Tab**: 프레임 드랍, 메인 스레드 점유율, 네트워크 워크플로우를 타임라인으로 분석합니다.
*   **Soft Navigation**: SPA(Single Page Application)에서 URL이 바뀌지만 전체 페이지 로드가 없는 경우의 성능을 측정하는 새로운 지표입니다.

## ⚠️ 트레이드오프 및 주의사항 (Trade-offs)
*   **점수 vs 실제 경험**: Lighthouse 점수가 높더라도 실제 사용자가 느끼는 환경(네트워크, 디바이스 성능)에 따라 체감 성능은 다를 수 있으므로 **Field Data(CrUX)**를 확인해야 합니다.
*   **최적화 과잉**: 과도한 이미지 압축이나 기능 제한은 사용자 경험(UX)의 질을 오히려 떨어뜨릴 수 있습니다.

## 🔗 지식 연결 (Graph)
- **Related Topics**: [[Performance_Profiling_and_Memory]], [[Frontend-Architecture]], [[Core-Web-Vitals]], [[SEO]]
- **Next Step**: HTTP/3 도입 및 에지 컴퓨팅(Edge Computing)을 통한 응답 속도 극대화 전략 수립.

---
*Last updated: 2026-05-08*

## 📖 구조화된 지식 (Synthesized Content)

**추출된 패턴:**
> *(TODO)*

**세부 내용:**
- *(TODO)*

## 🤖 LLM 활용 힌트 (How to Use This Knowledge)

**언제 이 지식을 쓰는가:**
- *(TODO)*

**언제 쓰면 안 되는가:**
- *(TODO)*

## 🧪 검증 상태 (Validation)

- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*

## 🧬 중복 검사 (Duplicate Check)

- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.

## ⚠️ 모순 및 업데이트 (Contradictions & Updates)

- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음

## 🕓 변경 이력 (Changelog)

| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |

## 💻 코드 패턴 (Code Patterns)

**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*

```text
# TODO
```

## 🤔 의사결정 기준 (Decision Criteria)

**선택 A를 써야 할 때:**
- *(TODO)*

**선택 B를 써야 할 때:**
- *(TODO)*

**기본값:**
> *(TODO)*

## ❌ 안티패턴 (Anti-Patterns)

- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*