JavaScript 웹 성능 최적화

🚀 웹 성능 최적화 (Web Performance Optimization)

빠른 웹사이트는 사용자 경험(UX), 검색엔진 최적화(SEO), 전환율 향상 등 다양한 이점을 가져옵니다. 이 글에서는 자바스크립트를 포함한 웹 성능 최적화 방법들을 항목별로 정리했습니다.

📌 1. 이미지 최적화

• 가능한 경우 WebP, AVIF 같은 차세대 포맷 사용
• 불필요하게 큰 이미지 → 크기 축소 및 압축
• Lazy loading 적용: <img loading="lazy">

📌 2. CSS/JS 최적화

• 미사용 코드 제거 (Tree shaking, PurgeCSS)
• 파일 압축 및 병합 (Minify, Bundle)
• 자바스크립트는 defer 또는 async로 로드

<script src="app.js" defer></script>

📌 3. 코드 분할 (Code Splitting)

초기 로딩 속도를 줄이기 위해 필요한 기능만 동적으로 로드합니다.

// 필요할 때 import
button.addEventListener("click", async () => {
  const { feature } = await import("./feature.js");
  feature();
});

📌 4. 캐싱 전략

• HTTP 캐시 헤더 활용: Cache-Control, ETag
• 서비스 워커로 오프라인 캐싱 구현

📌 5. 렌더링 최적화

• Critical CSS 인라인화
• 리플로우/리페인트를 유발하는 스타일 변경 최소화
• 애니메이션은 transform과 opacity 사용

📌 6. 웹폰트 최적화

• 필요한 글자만 서브셋(Subsetting)
• font-display: swap으로 빠른 렌더링 유도

📌 7. 서버 및 네트워크

• Gzip / Brotli 압축
• CDN(Content Delivery Network) 사용
• HTTP/2 또는 HTTP/3 적용

📌 8. 메모리 및 자바스크립트 최적화

• 불필요한 이벤트 리스너 제거
• 클로저 및 타이머 메모리 누수 방지
• GC-friendly 코드 작성 (참조 제거)

📌 9. 성능 측정 도구

• 🧪 Lighthouse (Chrome DevTools)
• 📈 WebPageTest, PageSpeed Insights
• 🔍 Performance 탭으로 렌더링, 네트워크, 메모리 분석

✅ 정리

웹 성능 최적화는 작은 개선들의 누적이 중요합니다. 각 항목을 체크리스트처럼 적용하면서, 실제 사용자 경험(UX)에 어떤 변화가 있는지 측정해 보세요.