---
id: PERF-CWV-LCP-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [core-web-vitals, lcp, performance, loading, web-vitals, seo, frontend-optimization]
last_reinforced: 2026-04-26
---

# Largest Contentful Paint: LCP (최대 콘텐츠 페인팅)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "사용자가 보고 싶어 하는 가장 큰 주인공(이미지나 텍스트)을 2.5초 이내에 무대 위에 올리고, 로딩의 지루함이 이탈의 원인이 되지 않도록 전송 경로의 모든 저항을 제거하라" — 페이지 로딩 성능을 측정하는 가장 직관적인 Core Web Vitals 지표.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Hero Element Prioritization and Critical Path Acceleration" — 뷰포트 내 가장 큰 요소(Hero image, Banner 등)를 식별하고, 해당 요소를 렌더링하기 위한 중요 경로(Critical Path)를 최단 시간으로 압축하는 패턴.
- **LCP의 4대 하위 지표:**
    - **TTFB (Time to First Byte):** 서버로부터 첫 번째 바이트가 도착하는 시간.
    - **Resource Load Delay:** LCP 요소의 로딩이 시작되기까지의 지연.
    - **Resource Load Duration:** 리소스 자체의 다운로드 시간.
    - **Element Render Delay:** 리소스 로드 후 실제 화면에 그려지기까지의 지연.
- **LCP 최적화 전략:**
    - **Preload Critical Images:** LCP 후보가 될 이미지는 `<link rel="preload">`로 우선순위 격상.
    - **Server-Side Rendering (SSR):** 초기 HTML에 콘텐츠를 포함하여 렌더링 지연 제거.
    - **Image Compression & Next-gen Formats:** AVIF/WebP 사용으로 전송 용량 최소화.
    - **Eliminate Render-blocking Resources:** 렌더링을 방해하는 JS/CSS 비동기 로드.
- **의의:** 사용자가 웹사이트의 가치를 체감하는 결정적 순간을 가속화하여 사용자 경험 점수를 극대화함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 전체 로드 시간(Window Load)이 중요했으나, 현대 정책은 실제 사용자가 보는 '가장 큰 요소'의 렌더링 완료 정책(LCP)을 유일한 진실 정책으로 채택함.
- **정책 변화:** Antigravity 프로젝트는 모든 랜딩 페이지의 LCP 요소를 수동 지정하여 최우선 순위로 관리하며, LCP 요소에 대해 지연 로딩(Lazy Loading) 적용을 엄격히 금지함.

## 🔗 지식 연결 (Graph)
- [[Core-Web-Vitals-Metrics|Core-Web-Vitals-Metrics]], [[Image-Optimization-for-Web-Performance|Image-Optimization-for-Web-Performance]], [[Web-Rendering-Strategies-CSR-vs-SSR|Web-Rendering-Strategies-CSR-vs-SSR]], [[Frontend-Performance-Optimization-Guide|Frontend-Performance-Optimization-Guide]]
- **Raw Source:** 00_Raw/Largest Contentful Paint (LCP).md, 00_Raw/LCP (Largest Contentful Paint).md