웹 애플리케이션 렌더링 & LCP 극한 성능 최적화

문제

외부 폰트 CDN과 무거운 애니메이션 라이브러리로 인해 초기 렌더링이 블로킹되고, 대규모 데이터 뷰에서 메모리 누수로 브라우저 크래시가 빈번했습니다.

접근

• 외부 CDN 의존성을 제거하고 Pretendard 92개 동적 서브셋을 Self-host로 전환하여 런타임 CSS 블로킹 해소
• Framer Motion 등 무거운 JS 애니메이션을 브라우저 네이티브 CSS Scroll-driven animation으로 전면 대체 (JS 0KB)
• Chrome DevTools 힙스냅샷 및 메모리 프로파일링을 통해 클로저/이벤트 리스너 누수를 근본적으로 격리 해결

AI를 어떻게 썼는가

• 빌드 시 Satori와 결합하여 한글 타이포그래피가 적용된 동적 OG 이미지를 자동 렌더링하는 파이프라인 구축

결과

1.1s

LCP (Largest Contentful Paint)

0

CLS (Cumulative Layout Shift)

100 / 100

Lighthouse Performance