웹 성능 최적화 ✅ 코드 스플리팅, Lazy Loading, 이미지 최적화

 

 

웹사이트 속도는 UX, SEO, 매출, 이탈률까지 모든 것에 영향을 미칩니다.
특히 3초 이상 로딩되면 40%의 사용자가 떠난다는 통계가 있을 정도죠 ⚡

 

이번 포스팅에서는 실제 서비스에서 바로 적용 가능한
프론트엔드 성능 최적화 핵심 3단계를 다룹니다 👇

---

⚙️ 1. 코드 스플리팅 (Code Splitting)

앱을 여러 조각으로 나눠, 필요한 코드만 로드하는 기술

🔸 React 예시 (Dynamic Import)

 

import React, { Suspense, lazy } from "react";

const Chart = lazy(() => import("./Chart"));

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <Suspense fallback={<p>로딩 중...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

 

📌 핵심 포인트

• import()로 컴포넌트를 지연 로드
• Suspense로 로딩 상태 제어
• 초기 JS 번들 사이즈 감소 ✅

💡 실무에서는 페이지별 컴포넌트, 모달, 차트, 관리자 페이지 등
“초기 진입에 필요 없는 코드”는 전부 Lazy Loading 처리

---

🧩 2. Lazy Loading (지연 로딩)

“보이는 순간에만” 자원 로드하기 👀

🖼️ 이미지 Lazy Loading

 

<img src="thumbnail.jpg" loading="lazy" alt="상품 이미지" />

 

📌 loading="lazy"
→ 스크롤로 이미지가 뷰포트에 들어올 때만 로드됨

 

✅ SEO 영향 없음
✅ 네트워크 낭비 최소화

---

⚛️ React에서 컴포넌트 Lazy Loading

 

const ProductDetail = lazy(() => import("./ProductDetail"));

<Suspense fallback={<p>로딩 중...</p>}>
  <ProductDetail />
</Suspense>;

 

📌 화면 밖의 요소를 렌더링할 때만 JS를 불러옴
→ 초기 렌더링 속도 향상 🚀

---

🧱 3. 이미지 최적화 (Image Optimization)

이미지 용량 = 웹 성능의 절반 이상 차지 💥

🔸 기본 전략

항목	권장 형식	설명
사진	WebP	JPG보다 30~50% 압축 효율
벡터	SVG	로고, 아이콘 등
배경	CSS gradient	이미지 대체 가능

---

🔸 Next.js 이미지 최적화

 

import Image from "next/image";

<Image
  src="/product.jpg"
  alt="상품"
  width={400}
  height={300}
  priority={true}
/>

 

📌 장점

• 자동 WebP 변환
• 뷰포트 기반 Lazy Loading
• 사이즈 최적화 및 캐싱

---

⚡ 4. 번들 분석 & 최적화

🧠 Webpack / Vite 기준

 

npm run build -- --analyze

 

📌 번들 분석 도구 (예: webpack-bundle-analyzer, vite-plugin-analyzer)
→ 불필요한 패키지, 중복 import, 거대한 의존성 식별

 

✅ React-icons → 필요한 아이콘만 import
✅ Lodash → 부분 import (import debounce from "lodash/debounce")

---

🧩 5. 코드 및 상태 관리 최적화

✅ React.memo

• 동일한 props면 렌더링 방지

✅ useMemo / useCallback

• 불필요한 재계산 차단

✅ React Query / SWR 캐싱

• API 응답 재사용 (중복 요청 방지)

---

🧠 6. 기타 실무 최적화 포인트

✅ HTTP/2, Brotli 압축 → 서버단에서 압축 응답
✅ Preload / Prefetch → 중요한 자원 미리 불러오기
✅ 폰트 최적화

 

<link rel="preload" href="/fonts/Pretendard.woff2" as="font" type="font/woff2" crossorigin />

 

✅ CSS 최적화

• 사용하지 않는 CSS 제거 (PurgeCSS, Tailwind purge 기능)

---

🚀 7. 성능 측정 도구 추천

도구	설명
Lighthouse	구글의 웹 성능 측정 도구
PageSpeed Insights	SEO + Core Web Vitals 분석
WebPageTest	로딩 타임, 리소스 타이밍
React Profiler	렌더링 성능 분석

---

📈 최적화 전후 비교 예시

항목	최적화 전	최적화 후
초기 JS 크기	1.8MB	600KB
첫 페인트 속도	4.3s	1.6s
TTI (상호작용 가능 시점)	5.2s	2.0s
Lighthouse 점수	61점	96점 ✅

---

📝 마무리 정리

• 코드 스플리팅 → JS 크기 감소
• Lazy Loading → 초기 렌더링 가속
• 이미지 최적화 → 네트워크 절약
• React.memo / useMemo → 렌더링 절감
• Preload / Prefetch → UX 개선

💡 “빠른 사이트는 곧 신뢰와 전환율이다.”