압축의 트레이드오프
압축은 CPU 시간과 네트워크 시간을 교환합니다.손익분기점
최적의 Threshold 찾기
Threshold는 압축할 최소 크기입니다.Threshold별 효과
| 크기 | Threshold: 256 | Threshold: 1024 | Threshold: 4096 |
|---|---|---|---|
| 100B | 압축 ❌ (오버헤드) | 압축 ❌ | 압축 ❌ |
| 500B | 압축 ⚠️ (효과 작음) | 압축 ❌ | 압축 ❌ |
| 2KB | 압축 ✅ | 압축 ✅ | 압축 ❌ |
| 10KB | 압축 ✅ | 압축 ✅ | 압축 ✅ |
권장 Threshold
- 적극적 (256B)
- 기본 (1KB)
- 보수적 (4KB)
- 모바일 네트워크 (느린 속도)
- 대역폭 비용이 비쌈
- 대부분 응답이 작음 (< 10KB)
실험으로 최적값 찾기
알고리즘 선택 전략
Brotli vs Gzip
| 기준 | Brotli (br) | Gzip |
|---|---|---|
| 압축률 | 최고 (15~20% 더 압축) | 중간 |
| 압축 속도 | 느림 (CPU 사용 ↑) | 빠름 |
| 압축 해제 속도 | 빠름 | 빠름 |
| 브라우저 지원 | 모던 브라우저 | 모든 브라우저 |
사용 전략
- 정적 콘텐츠
- 동적 API
- 하이브리드
사전 압축 → Brotli 사용장점:
- 압축 시간 걱정 없음 (미리 압축)
- 최고 압축률 (quality 11)
- 런타임 CPU 부하 없음
환경별 전략
캐싱과 압축 조합
압축과 캐싱을 함께 사용하면 최고의 성능을 얻습니다.효과
레이어별 최적화:- 브라우저 캐시: 0ms (가장 빠름)
- CDN 캐시: 10ms (네트워크만)
- 서버 캐시: 50ms (압축만, DB 없음)
- DB 조회: 500ms (압축 + DB)
CDN과 압축
CloudFront 최적화
- Origin에서 압축된 응답 수신
- CloudFront가 그대로 캐싱
- 엣지에서 빠르게 제공
Vary 헤더 주의
압축 사용 시Accept-Encoding에 따라 다른 응답이므로:
사전 압축 (Pre-compression)
빌드 시 정적 파일을 미리 압축하면 런타임 CPU 부하가 없습니다.빌드 스크립트
서버 설정
- 런타임 CPU 부하 없음
- 최고 압축률 (quality 11)
- 즉시 응답
성능 측정
1. 브라우저 개발자 도구
2. 서버 로깅
3. 부하 테스트
실전 최적화 체크리스트
- 초기 설정
- API 최적화
- 캐싱 조합
- 모니터링
✅ 전역 압축 활성화✅ Threshold 설정
- 일반: 1024 (1KB)
- 모바일: 256 (256B)
- 고성능: 4096 (4KB)
- 정적: brotli (사전 압축)
- 동적: gzip (실시간)
일반적인 실수
성능 벤치마크
실제 100KB JSON 응답 기준:| 설정 | 압축 시간 | 전송 크기 | 네트워크 시간 | 총 시간 |
|---|---|---|---|---|
| 압축 없음 | 0ms | 100KB | 1000ms | 1000ms |
| Gzip | 2ms | 14KB | 140ms | 142ms |
| Brotli | 5ms | 12KB | 120ms | 125ms |
| Pre-compressed | 0ms | 12KB | 120ms | 120ms |
- Gzip: 85% 시간 절약
- Brotli: 87% 시간 절약
- Pre-compressed: 88% 시간 절약 (최고)
