성능 최적화
0.1초의 로딩 속도 차이가 수익과 사용자 경험을 결정합니다.
세계적인 기업들의 연구 결과가 이를 증명합니다.
왜 성능이 중요한가?
Amazon1%페이지 로딩이 100ms(0.1초) 늦어질 때마다
매출이 1%씩 감소
매출이 1%씩 감소
Google53%모바일 사용자의 53%가
로딩에 3초 이상 걸리면 이탈
로딩에 3초 이상 걸리면 이탈
Walmart+2%로딩 속도 1초 개선 시
전환율이 2% 증가
전환율이 2% 증가
💡 핵심 인사이트
Google은 Core Web Vitals를 검색 순위 요소로 공식 채택했습니다.(2021년)
즉, 느린 사이트는 검색 결과에서도 밀려납니다. 성능 최적화는 선택이 아닌 필수입니다.
Next.js에서 성능 최적화하기
1. 이미지 최적화
Next.js의 <Image /> 컴포넌트를 사용하면:
- 자동으로 WebP/AVIF 포맷 변환 (용량 최대 50% 감소)
- Lazy Loading으로 보이는 이미지만 먼저 로딩
- Layout Shift 방지로 CLS 점수 개선
2. 폰트 최적화
next/font를 사용하면 폰트 파일을 빌드 시점에 최적화하고, FOUT(Flash of Unstyled Text) 현상을 방지합니다.
3. 번들 사이즈 최적화
불필요한 라이브러리를 제거하고, Dynamic Import로 필요한 코드만 로딩하세요. next/dynamic을 활용하면 됩니다.
Lighthouse로 측정하기
크롬 개발자 도구(F12) → Lighthouse 탭에서 성능 점수를 측정할 수 있습니다.
- LCP (Largest Contentful Paint): 2.5초 이내 권장
- FID (First Input Delay): 100ms 이내 권장
- CLS (Cumulative Layout Shift): 0.1 이하 권장