Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.1 KiB

Raw Blame History

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, 프론트엔드_및_UIUX_표준, Core Web Vitals Optimization (INP, LCP 개선), 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: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값: