React, Vue

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

jonbeo 2025. 12. 13. 09:03
반응형

 

 

웹사이트 속도는 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 개선

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

반응형