# [[LCP (Largest Contentful Paint)]] ## πŸ“Œ Brief Summary LCP(Largest Contentful Paint)λŠ” μ›ΉνŽ˜μ΄μ§€μ—μ„œ νžˆμ–΄λ‘œ 이미지, λΉ„λ””μ˜€, 큰 ν…μŠ€νŠΈ 블둝 λ“± κ°€μž₯ 큰 μ£Όμš” μ½˜ν…μΈ  μš”μ†Œκ°€ μ‚¬μš©μžμ˜ 화면에 ν‘œμ‹œλ˜λŠ” 데 κ±Έλ¦¬λŠ” μ‹œκ°„μ„ μΈ‘μ •ν•˜λŠ” μ„±λŠ₯ μ§€ν‘œμž…λ‹ˆλ‹€ [1-4]. μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€μ˜ λ‘œλ”© 속도λ₯Ό μ²΄κ°ν•˜λŠ” μ£Όμš” 척도이며, κ΅¬κΈ€μ˜ μ½”μ–΄ μ›Ή λ°”μ΄νƒˆ(Core Web Vitals)μ—μ„œ μ‹œκ°μ  λ‘œλ”© 속도와 SEO 검색 μˆœμœ„λ₯Ό κ²°μ •ν•˜λŠ” 핡심 μš”μ†Œλ‘œ κΈ°λŠ₯ν•©λ‹ˆλ‹€ [4-7]. 졜적의 μ‚¬μš©μž κ²½ν—˜κ³Ό μ „ν™˜μœ¨μ„ μœ μ§€ν•˜κΈ° μœ„ν•΄ 2025λ…„ κΈ°μ€€ LCPλŠ” 2.0초(일뢀 κΈ°μ€€ 2.5초) 이내에 λ‘œλ“œλ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€ [1, 2, 8, 9]. ## πŸ“– Core Content - **μ„±λŠ₯ κΈ°μ€€ 및 2025λ…„ μ—…λ°μ΄νŠΈ**: 2025λ…„ μ½”μ–΄ μ›Ή λ°”μ΄νƒˆ μ—…λ°μ΄νŠΈμ—μ„œ ꡬ글은 LCP의 '우수(Good)' μž„κ³„κ°’μ„ κΈ°μ‘΄ 2.5μ΄ˆμ—μ„œ 2.0초 미만으둜 λ”μš± μ—„κ²©ν•˜κ²Œ μ‘°μ •ν–ˆμŠ΅λ‹ˆλ‹€ [1, 8, 9]. 반면, 일뢀 μ†ŒμŠ€μ—μ„œλŠ” μ—¬μ „νžˆ 2.5초 μ΄ν•˜λ₯Ό 적정 κΈ°μ€€μœΌλ‘œ μ•ˆλ‚΄ν•˜κΈ°λ„ ν•©λ‹ˆλ‹€ [2, 4, 10]. LCPκ°€ 4.0초λ₯Ό μ΄ˆκ³Όν•˜λ©΄ 'λ‚˜μ¨(Poor)'으둜 κ°„μ£Όλ˜λ©° [10], LCP λ‘œλ”© 속도가 2.0초λ₯Ό λ„˜μ–΄κ°€λ©΄ μ „ν™˜μœ¨μ΄ 7% κ°μ†Œν•˜κ³  검색 μˆœμœ„μ— μ•…μ˜ν–₯을 λ―ΈμΉ©λ‹ˆλ‹€ [11]. λ°˜λŒ€λ‘œ LCPλ₯Ό 1초 λ‹¨μΆ•ν•˜λ©΄ μ „ν™˜μœ¨μ„ 15% μƒμŠΉμ‹œν‚€κ³  μ΄νƒˆλ₯ μ„ 20% 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€ [12]. - **μ£Όμš” 병λͺ© 원인(Bottlenecks)**: LCPκ°€ μ§€μ—°λ˜λŠ” μ£Όμš” μ›μΈμœΌλ‘œλŠ” λ Œλ”λ§μ„ μ°¨λ‹¨ν•˜λŠ” λ¦¬μ†ŒμŠ€(λ™κΈ°μ‹μœΌλ‘œ λ‘œλ“œλ˜λŠ” CSS 및 JavaScript), 느린 μ„œλ²„ 응닡 μ‹œκ°„(TTFB), μ΅œμ ν™”λ˜μ§€ μ•Šμ€ λŒ€μš©λŸ‰ 이미지 포맷(500KB μ΄μƒμ˜ PNG/JPEG λ“±), 그리고 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ λ Œλ”λ§(CSR) μ•±μ—μ„œμ˜ ν•˜μ΄λ“œλ ˆμ΄μ…˜(Hydration) 및 무거운 JavaScript λ²ˆλ“€ 처리 μ§€μ—° 등이 μžˆμŠ΅λ‹ˆλ‹€ [13, 14]. - **LCP μ΅œμ ν™” μ „λž΅**: - **이미지 및 λ―Έλ””μ–΄ μ΅œμ ν™”**: WebPλ‚˜ AVIF와 같은 μ°¨μ„ΈλŒ€ 이미지 포맷을 μ‚¬μš©ν•˜μ—¬ 파일 크기λ₯Ό 크게 쀄여야 ν•©λ‹ˆλ‹€ [1, 15-17]. 특히 LCP μΈ‘μ • λŒ€μƒμ΄ λ˜λŠ” 첫 ν™”λ©΄μ˜ νžˆμ–΄λ‘œ μ΄λ―Έμ§€μ—λŠ” μ§€μ—° λ‘œλ”©(Lazy Loading)을 μ μš©ν•˜μ§€ 말고, `loading="eager"` 및 `fetchpriority="high"` 속성을 μ‚¬μš©ν•˜μ—¬ μš°μ„ μ μœΌλ‘œ λ‘œλ“œ(Preload)ν•΄μ•Ό ν•©λ‹ˆλ‹€ [9, 16, 18-21]. - **μ„œλ²„ 응닡 속도 및 λ¦¬μ†ŒμŠ€ 전솑 ν–₯상**: κΈ€λ‘œλ²Œ νŠΈλž˜ν”½ ν™˜κ²½μ—μ„œλŠ” CDN(μ½˜ν…μΈ  전솑 λ„€νŠΈμ›Œν¬)을 μ‚¬μš©ν•˜μ—¬ 정적 μžμ‚°μ„ μ „μ†‘ν•˜κ³ , λΈŒλΌμš°μ € 및 μ„œλ²„ μˆ˜μ€€μ˜ 캐싱을 ν™œμ„±ν™”ν•˜μ—¬ λ‘œλ”© μ‹œκ°„μ„ 단좕해야 ν•©λ‹ˆλ‹€ [1, 16, 22, 23]. - **μ½”λ“œ 및 λ Œλ”λ§ μ΅œμ ν™”**: λ Œλ”λ§ 차단 μŠ€ν¬λ¦½νŠΈμ™€ μ€‘μš”ν•˜μ§€ μ•Šμ€ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ§€μ—°(Defer)μ‹œν‚€κ³  μ€‘μš”ν•œ CSSλŠ” 인라인(Inline)으둜 λ°°μΉ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€ [14, 24, 25]. λ˜ν•œ, React와 같은 ν”„λ ˆμž„μ›Œν¬μ—μ„œλŠ” ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§(CSR)에 λ”°λ₯Έ 지연을 ν”Όν•˜κΈ° μœ„ν•΄ μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR)μ΄λ‚˜ 정적 μ‚¬μ΄νŠΈ 생성(SSG)을 μ μš©ν•˜μ—¬ μ™„μ„±λœ HTML을 μ¦‰μ‹œ λΈŒλΌμš°μ €μ— μ œκ³΅ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€ [26-28]. ## πŸ”— Knowledge Connections - **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[INP (Interaction to Next Paint)]], [[SEO (Search Engine Optimization)]] - **Projects/Contexts:** [[Web Performance Optimization]], [[React SEO Guide]] - **Contradictions/Notes:** κ΅¬κΈ€μ˜ 2025λ…„ μ½”μ–΄ μ›Ή λ°”μ΄νƒˆ μ—…λ°μ΄νŠΈλ₯Ό 닀룬 μ†ŒμŠ€μ—μ„œλŠ” LCP의 '우수' μž„κ³„κ°’μ΄ 2.5μ΄ˆμ—μ„œ 2.0초 미만으둜 κ°•ν™”λ˜μ—ˆλ‹€κ³  λͺ…μ‹œν•˜κ³  μžˆμœΌλ‚˜ [1, 8, 9], 일뢀 뢄석 및 μ§€μΉ¨ μ†ŒμŠ€μ—μ„œλŠ” μ—¬μ „νžˆ κΈ°μ‘΄ 기쀀인 2.5초λ₯Ό λͺ©ν‘œμΉ˜λ‘œ μ œμ‹œν•˜κ³  μžˆμ–΄ 기쀀에 λŒ€ν•œ ν˜Όμž¬κ°€ μžˆμŠ΅λ‹ˆλ‹€ [2, 7, 29]. λ˜ν•œ λΉ„νŒμ  μ½˜ν…μΈ  μ΅œμ ν™” 방식에 λŒ€ν•΄, μ§€μ—° λ‘œλ”©(Lazy Loading)은 전체 μ‚¬μ΄νŠΈ 속도λ₯Ό λ†’μ΄λŠ” 쒋은 κΈ°λ²•μ΄μ§€λ§Œ 첫 ν™”λ©΄(Above-the-fold)의 메인 μ½˜ν…μΈ μ— μ μš©ν•  경우 였히렀 LCP 점수λ₯Ό μ‹¬κ°ν•˜κ²Œ ν›Όμ†ν•œλ‹€λŠ” 주의 사항이 반볡적으둜 κ°•μ‘°λ©λ‹ˆλ‹€ [18, 19, 21]. --- *Last updated: 2026-04-26*