115 lines
5.0 KiB
Markdown
115 lines
5.0 KiB
Markdown
---
|
|
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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)* |