[Lazy Loading] 성능과 사용자 경험을 모두 잡는 웹 최적화 전략

 

728x90

지연 로딩(Lazy Loading) 

웹 페이지의 성능과 사용자 경험은 로딩 속도에 크게 좌우됩니다. 사용자가 실제로 보지도 않는 리소스를 미리 모두 불러오는 건 자원 낭비일 뿐만 아니라, 사용자에게 느린 사이트라는 인식을 심어줄 수 있습니다.

이 문제를 해결하기 위한 대표적인 기법이 바로 Lazy Loading(지연 로딩)입니다.

 

---

1.  Lazy Loading이란?

Lazy Loading은 웹 페이지를 불러올 때 즉시 필요한 리소스만 로드하고, 나머지는 사용자가 필요로 할 때 로딩하는 방식입니다. 예를 들어 스크롤을 내려야 보이는 이미지나, 특정 버튼을 눌러야 보이는 컴포넌트 등이 그 대상입니다.

이 기법을 통해 다음과 같은 효과를 기대할 수 있습니다.

• 초기 로딩 속도 단축
• 불필요한 네트워크 요청 감소
• 사용자 경험 향상
• 모바일 환경에서 데이터 절약

Lazy Loading의 대표 대상

1. 이미지
2. 동영상 / 오디오
3. 컴포넌트 또는 모듈 (코드 분할)
4. 3rd-party 라이브러리

 

---

2.  Lazy Loading은 보통 이런 경우에 사용해요

a.  스크롤을 내려야 보이는 이미지, 콘텐츠

• 대표적인 사용처입니다.
• Next.js의 next/image 컴포넌트는 기본적으로 Lazy Loading이 적용되어 있으며, 사용자가 해당 이미지를 스크롤로 시야에 진입할 때 로딩이 트리거됩니다.
• 예: 갤러리, 상품 목록, 피드, 블로그 글 등

 <!-- HTML 예제 -->
<img src="..." loading="lazy" />

// Next.js 예제
import Image from 'next/image';

export default function Gallery() {
  return (
    <div style={{ height: '1500px' }}>
      <p>스크롤을 내려야 이미지가 보입니다.</p>
      <Image
        src="/large-image.jpg"
        alt="대형 이미지"
        width={800}
        height={600}
      />
    </div>
  );
}

 

b.  초기 렌더링과 관계없는 무거운 컴포넌트

• 예: 대형 차트, 맵 컴포넌트, 비디오 플레이어 등
• React에서는 React.lazy와 Suspense, Next.js에서는 next/dynamic을 통해 컴포넌트를 필요할 때만 불러올 수 있습니다.

// 기본 예제
const Chart = React.lazy(() => import('./BigChart'));

// React 예제
import { lazy, Suspense } from 'react';

const Chart = lazy(() => import('./HeavyChart'));

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <Suspense fallback={<div>차트를 불러오는 중...</div>}>
        <Chart />
      </Suspense>
    </div>
  );
}

// Next.js 예제
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>로딩 중...</p>,
  ssr: false,
});

export default function Page() {
  return (
    <div>
      <h1>동적 컴포넌트</h1>
      <DynamicComponent />
    </div>
  );
}

c.  조건부로 등장하는 컴포넌트

• 예: 설정창, 모달, 탭의 비활성 영역 등

{showSettings && (
  <Suspense fallback={<div>로딩중</div>}>
    <SettingsPanel />
  </Suspense>
)}

d.  서드파티 라이브러리

• 무겁고 자주 안 쓰는 경우 동적으로 import 할 수 있습니다.
• 예: 차트 라이브러리, 날짜 피커, 데이터 시각화 도구 등

const DatePicker = dynamic(() => import('react-datepicker'), { ssr: false });

e.  라우트별 페이지 구성 (Next.js 자동 지원)

• 페이지 단위로 스플리팅됩니다.
• 각 페이지는 실제 이동할 때 로드됩니다.
• Next.js, React Router 등은 자동으로 처리하지만, 중첩 라우트나 중복 컴포넌트는 수동 관리가 필요할 수도 있습니다.

 

---

3.  그러면 언제 Lazy Loading을 쓰면 안 좋을까?

상황	이유
매우 자주 쓰는 요소	오히려 로딩 지연이 UX를 나쁘게 만들 수 있어요
첫 화면에 보여야 하는 요소	첫 렌더링 전에 반드시 필요하므로, 즉시 로딩이 적절
작고 가벼운 컴포넌트들	분리 비용 > 성능 이득

 

---

4.  Lazy Loading vs Eager Loading

항목	Lazy Loading	Eager Loading
로딩 시점	필요할 때 (스크롤, 클릭 등)	페이지 로드 시 즉시
성능 최적화	우수 (초기 로딩 빠름)	상대적으로 느림
코드 복잡도	다소 증가 (조건부 로딩 필요)	단순 (모든 리소스 즉시 로딩)
적용 대상	이미지, 컴포넌트, 비디오 등	중요 핵심 리소스

 

---

5.  마무리

• Lazy Loading은 초기 로딩 속도를 줄이고 리소스 사용을 최적화하는 핵심 기술입니다.
• Next.js의 next/image, React의 lazy, HTML의 loading="lazy" 속성 등을 통해 다양한 방식으로 구현할 수 있습니다.
• 대형 이미지, 무거운 컴포넌트, 외부 라이브러리를 지연 로딩함으로써 사용자 경험과 성능을 동시에 개선할 수 있습니다.

함께 보면 좋은 자료

외부 사이트

• MDN Web Docs - Lazy Loading

 

---

반응형