성능 최적화와 네트워크

개념 설명

웹 애플리케이션의 로딩 속도와 사용자 경험 향상을 위한 네트워크 기반 최적화 전략.

핵심 포인트

• 리소스 힌트: preconnect(연결), dns-prefetch(DNS), preload(즉시), prefetch(미래)
• 코드 스플리팅: 라우트별 분할로 초기 번들 크기 최소화, 필요시 동적 로딩
• 캐싱 전략: 브라우저 캐시, Service Worker, CDN 캐싱으로 반복 요청 최적화
• 압축: Gzip/Brotli 압축, 이미지 최적화(WebP), 번들 압축으로 전송량 감소

예시 코드

<!-- 리소스 힌트로 로딩 최적화 -->
<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page.js">