chore: Clean up 00_Raw directory by moving processed files to 00_Processed
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,31 @@
|
||||
# [[Core Web Vitals 최적화]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Core Web Vitals는 구글이 웹페이지의 실제 사용자 경험을 로딩 속도, 상호작용성, 시각적 안정성 측면에서 객관적으로 평가하기 위해 제정한 핵심 성능 지표입니다 [1-3]. 2025년 업데이트를 통해 기존의 상호작용 지표였던 FID(First Input Delay)가 사용자 상호작용의 전체 지연 시간을 측정하는 INP(Interaction to Next Paint)로 공식 대체되었습니다 [1, 4, 5]. 이 지표들을 최적화하는 것은 단순히 페이지 속도를 개선하는 것을 넘어, 최신 검색 엔진 최적화(SEO) 순위를 높이고 전환율과 사용자 만족도를 극대화하는 모던 웹 엔지니어링의 필수 과제입니다 [6-8].
|
||||
|
||||
## 📖 Core Content
|
||||
**1. 핵심 지표별 이해와 최적화 전략**
|
||||
* **LCP (Largest Contentful Paint - 로딩 성능):** 뷰포트 내에서 가장 큰 메인 콘텐츠(주로 히어로 이미지나 큰 텍스트 블록)가 화면에 표시될 때까지의 시간을 측정합니다 [9-11].
|
||||
* *문제 원인:* 렌더링을 차단하는 CSS/JS 리소스, 느린 서버 응답 시간(TTFB), 최적화되지 않은 대용량 이미지, 클라이언트 사이드 렌더링(CSR) 환경에서의 렌더링 지연이 주요 원인입니다 [12, 13].
|
||||
* *최적화 방법:* 차세대 이미지 포맷(WebP, AVIF) 사용 및 압축, LCP 리소스에 `fetchpriority="high"` 적용 및 사전 로드(preload), 정적 에셋의 CDN 제공을 적용해야 합니다 [9, 14-16]. 또한, SSR(Server-Side Rendering)을 도입하고 중요 CSS(Critical CSS)를 인라인으로 처리하여 로딩 속도를 향상할 수 있습니다 [16-18].
|
||||
* **INP (Interaction to Next Paint - 상호작용성):** 사용자의 상호작용(클릭, 탭, 키 입력 등) 발생 후 브라우저가 다음 프레임을 표시할 때까지 걸리는 전체 응답 시간을 측정합니다 [4, 19, 20].
|
||||
* *문제 원인:* 메인 스레드를 차단하는 무거운 JavaScript 작업(50ms 초과), 과도한 서드파티 스크립트 실행, 복잡한 DOM 조작 및 프레임워크(React 등)의 불필요한 리렌더링이 INP 저하를 일으킵니다 [21, 22].
|
||||
* *최적화 방법:* 연산이 무거운 작업은 Web Workers를 이용해 메인 스레드 밖으로 오프로드(Offload)하고, 긴 작업은 50ms 이하의 청크 단위로 분할하여 브라우저에 제어권을 양보(`setTimeout` 활용)해야 합니다 [19, 23-25]. 더불어 서드파티 스크립트 지연(defer), 이벤트 핸들러 최적화(디바운스/스로틀), React 환경에서의 코드 스플리팅(Code Splitting) 및 점진적 하이드레이션(Progressive Hydration)의 도입이 필수적입니다 [22, 26-28].
|
||||
* **CLS (Cumulative Layout Shift - 시각적 안정성):** 페이지가 로드되는 동안 사용자에게 예상치 못한 레이아웃의 이동이 얼마나 일어나는지 측정합니다 [9, 29, 30].
|
||||
* *문제 원인:* `width` 및 `height` 속성이 지정되지 않은 이미지 및 비디오, 기존 콘텐츠 위로 동적으로 삽입되는 광고, 웹 폰트 로딩 지연으로 인한 텍스트 폰트 깜빡임(FOIT/FOUT), 레이아웃을 다시 계산하게 만드는 애니메이션 속성 사용 등이 있습니다 [29, 31].
|
||||
* *최적화 방법:* 미디어 요소에 명시적인 크기를 지정하고, 광고나 동적 임베드를 위한 공간을 `min-height`나 `aspect-ratio`를 이용해 미리 확보해 두어야 합니다 [32-34]. 웹 폰트는 `font-display: swap` 또는 `optional`을 사용하여 처리하며, 애니메이션은 레이아웃 재계산을 유발하지 않는 CSS `transform` 속성으로 제어해야 합니다 [34, 35].
|
||||
|
||||
**2. 성능 측정 도구 및 모니터링**
|
||||
* *실험실 데이터(Lab Testing):* 통제된 환경에서 기술적 결함을 분석하기 위해 Google Lighthouse, WebPageTest, Chrome DevTools, PageSpeed Insights 등을 사용해 병목 구간을 진단합니다 [36, 37].
|
||||
* *실제 사용자 데이터(RUM):* 사용자 체감 성능 모니터링을 위해 Google Search Console(Core Web Vitals 보고서), GTmetrix, New Relic, Datadog RUM 등을 활용해 지속적으로 성과 예산을 모니터링하고 회귀(Regression)를 방지해야 합니다 [38-41].
|
||||
|
||||
**3. 비즈니스 및 SEO 관점의 효과**
|
||||
최적화가 되지 않은 사이트에서 Core Web Vitals의 모든 지표를 "Good(우수)" 수준으로 끌어올리면 평균적으로 전환율 25% 상승, 이탈률 35% 감소, 방문자당 수익이 30% 개선되는 효과를 거둘 수 있습니다 [42, 43].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Search Engine Optimization (SEO)]], [[First Contentful Paint (FCP)]], [[Time to First Byte (TTFB)]], [[JavaScript Optimization]]
|
||||
- **Projects/Contexts:** [[React SEO 및 성능 최적화]], [[이커머스 웹사이트 속도 및 전환율 개선]], [[웹 접근성 및 모바일 최적화]]
|
||||
- **Contradictions/Notes:** 소스 [44]은 2025년 Google의 Core Web Vitals 기준이 더욱 엄격해져 LCP 2.0초 미만, CLS 0.08 미만, INP 150ms 미만을 달성해야 한다고 주장합니다 [45]. 하지만 소스 [46], [47], [48], [49] 등 다른 여러 최신 문서에서는 여전히 LCP 2.5초 이하, CLS 0.1 이하, INP 200ms 이하를 '우수(Good)' 기준으로 명시하고 있어, 기준 임계값에 대한 정보 간의 불일치가 존재합니다 [4, 10, 32, 50, 51].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
Reference in New Issue
Block a user