Lighthouse 95+ 달성을 위한 Core Web Vitals 중심의 프론트엔드 최적화 전략

Context

AI 기반 검색 엔진의 크롤링 예산 우선순위와 Google Core Web Vitals의 랭킹 영향력 증대로 인한 웹 성능 최적화 필수성 대두. 단순한 페이지 로딩 속도를 넘어 LCP, CLS, INP 등 사용자 경험 지표 중심의 정밀한 제어 구조 필요.

Technical Solution

• WebP/AVIF 포맷 및 picture 엘리먼트 활용을 통한 이미지 페이로드 최적화
• Critical CSS 인라이닝 및 비임계 리소스 defer 처리를 통한 Render-blocking 제거
• Edge Node 기반 CDN 배포 및 Brotli 압축 적용으로 네트워크 레이턴시 및 전송량 최소화
• SSG/SSR 프레임워크 도입 및 Islands Architecture 기반의 JavaScript Hydration 최소화
• Partytown을 활용한 Third-party 스크립트의 Web Worker 격리로 Main Thread 부하 해소
• CI/CD 파이프라인 내 Lighthouse CI 통합을 통한 Performance Budget 강제 제어