핵심 답변
📌 1. 이미지 최적화
WebP, AVIF 포맷 사용
레이지 로딩(lazy loading) 적용
적절한 크기로 리사이징
📌 2. 번들 크기 최소화
Tree Shaking: 사용하지 않는 코드 제거
코드 스플리팅: 필요할 때만 로드
📌 3. 캐싱 활용
CDN(Content Delivery Network) 활용
브라우저 캐시, 서버 캐시 설정
📌 4. Core Web Vitals 개선
LCP(최대 콘텐츠 페인트): 주요 콘텐츠 로딩 속도
CLS(누적 레이아웃 시프트): 예기치 않은 레이아웃 변경 방지
INP(다음 페인트까지의 상호작용): 상호작용 응답성
핵심 용어
📌 Core Web VitalsGoogle이 정의한 웹 성능 핵심 지표로 LCP, CLS, INP가 있습니다. SEO에도 직접 영향을 미층니다.
📌 Tree Shaking사용되지 않는 코드(dead code)를 번들에서 제거하는 기법입니다. ES Module의 정적 분석을 통해 가능합니다.
📌 CDN(Content Delivery Network)전 세계에 분산된 서버 네트워크에서 사용자에게 가장 가까운 서버에서 콘텐츠를 제공하는 기술입니다.