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

📌 한 줄 통찰 (The Karpathy Summary)

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

추출된 패턴: "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 비동기 로드.
의의: 사용자가 웹사이트의 가치를 체감하는 결정적 순간을 가속화하여 사용자 경험 점수를 극대화함.

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