Vercel Engineering 팀이 Vercel Dashboard의 Lighthouse 점수를 51에서 94로 끌어올린 구체적인 최적화 과정을 공개했다. Vercel Analytics의 실사용자 데이터로 개선 효과를 검증했으며, 데스크톱 기준 Analytics 점수가 90에서 95로 향상됐다. 가장 인상적인 결과는 `isLoggedIn()` 함수가 단일 렌더 패스에서 400회 이상 호출되고 있었다는 발견과, 이 문제 해결만으로 렌더 시간을 270ms에서 90ms로 줄인 케이스다.
핵심 포인트- `isLoggedIn()` (document.cookie 읽기)가 단일 렌더에서 **400회 이상** 호출 → 리팩토링으로 렌더 270ms → 90ms
- `slugify()` 함수(1~3ms)가 수백 번 반복 호출 → 객체 캐시 메모이제이션으로 렌더 **~200ms** 단축
- IntersectionObserver 기반 `useInViewport` 훅으로 화면 밖 컴포넌트 DOM 마운트 지연
- `import Sentry from '@sentry/nextjs'` → `import { captureException }` 방식 트리쉐이킹으로 번들 크기 감소
- `next/script` 전략 선택으로 Google Tag Manager 등 써드파티 스크립트가 LCP/FID에 미치는 영향 최소화
- 가변 폰트(variable fonts)로 여러 폰트 파일을 단일 파일에 통합, `@font-face` 가중치 범위 선언
상세 정리- **핫 패스 집중 전략**: 초기 로드 경로(hot path)에 집중. Chrome DevTools + React Developer Tools로 flame graph 분석, Vercel Top Paths로 가장 많이 사용하는 에셋 파악
- **`isLoggedIn()` 최적화**: `document.cookie`를 읽는 함수가 단일 렌더에서 400회 이상 호출되고 있었음. 구조 개선으로 렌더 시간 270ms → 90ms
- **`slugify()` 메모이제이션**: 빈 객체를 캐시로 활용 — 동일 입력의 첫 호출 시 캐시에 저장, 이후 캐시에서 반환. 렌더 ~200ms 단축
- **라이브러리 vs 직접 구현**: 라이브러리는 수천 가지 엣지 케이스를 커버하지만 코드 크기도 큼. 사용 케이스가 단순하다면 경량 직접 구현 고려
- **IntersectionObserver lazy loading**: `useInViewport` 커스텀 훅이 viewport 진입 여부를 `useState`로 추적. viewport 밖이면 컴포넌트를 DOM에 마운트하지 않음. 한번 로드되면 스크롤아웃 시에도 언마운트하지 않음(isLoaded 상태)
- **트리쉐이킹**: `import Sentry from '@sentry/nextjs'` 는 전체 패키지를 번들에 포함. Named import(`{ captureException }`)로 필요한 코드만 포함
- **Stripe 지연 로드**: 사용자 액션 시점까지 스크립트 로드를 미뤄 초기 번들에서 제외 가능
- **`next/script` 전략**: `strategy="lazyOnload"` (페이지 로드 완료 후), `"afterInteractive"` (hydration 후) 등 적절한 전략 선택으로 LCP/FID 개선
- **HTML/CSS 최적화**: 불필요한 wrapper `<div>` 제거 (`<p>` 는 이미 `display: block`), `marginTop: 0` → `marginTop: undefined`로 브라우저 기본값 활용
- **Next.js Image 최적화**: `<Image />` 컴포넌트가 디바이스에 맞는 크기 제공, 자동 폰트 CSS 인라인으로 추가 요청 제거
왜 읽나단일 함수의 400번 반복 호출처럼 눈에 잘 띄지 않는 핫 패스 병목을 발견하는 접근법과, 실측 수치로 검증된 다양한 최적화 기법을 체계적으로 확인할 수 있다.
Vercel Blog·
LINE Engineering·