M

MLOG

한국어

이미지와 컴포넌트의 지연 로딩에 대한 종합 가이드. 웹사이트 성능과 전 세계 사용자를 위한 사용자 경험을 향상시키세요.

지연 로딩: 이미지와 컴포넌트로 웹 성능 최적화하기

오늘날의 디지털 환경에서 웹사이트 성능은 매우 중요합니다. 사용자들은 빠르고 반응성이 좋은 경험을 기대하며, 검색 엔진은 이를 제공하는 웹사이트를 우선적으로 평가합니다. 성능을 향상시키는 중요한 기술 중 하나가 바로 지연 로딩(lazy loading)입니다. 이 글은 이미지와 컴포넌트의 지연 로딩에 대한 종합적인 가이드를 제공하여, 전 세계 사용자를 위해 웹사이트를 최적화하는 데 도움을 줍니다.

지연 로딩(Lazy Loading)이란 무엇인가요?

지연 로딩은 리소스(이미지, iframe, 컴포넌트 등)가 실제로 필요해질 때까지, 즉 뷰포트에 들어오기 직전까지 로딩을 지연시키는 기술입니다. 이는 모든 자산을 한 번에 로드하는 대신, 브라우저가 초기 페이지 로드 시 사용자에게 보이는 리소스만 먼저 로드한다는 것을 의미합니다. 사용자가 페이지를 아래로 스크롤하면, 더 많은 리소스가 보이게 되면서 로드됩니다.

이렇게 생각해 보세요. 여행 짐을 꾸린다고 상상해 보세요. 처음부터 옷장 전체를 들고 가는 대신, 당장 필요할 것이라고 아는 옷만 챙깁니다. 여행을 계속하면서 필요에 따라 추가적인 물품을 꺼내게 되죠. 이것이 바로 웹사이트에서 지연 로딩이 작동하는 방식입니다.

지연 로딩을 사용하는 이유는 무엇인가요?

지연 로딩은 여러 가지 중요한 이점을 제공합니다:

이미지 지연 로딩

이미지는 종종 웹사이트에서 가장 큰 자산이므로 지연 로딩의 주요 대상이 됩니다. 다음은 이미지를 위한 지연 로딩 구현 방법입니다:

네이티브 지연 로딩

최신 브라우저(Chrome, Firefox, Safari, Edge)는 이제 loading 속성을 사용한 네이티브 지연 로딩을 지원합니다. 이것이 이미지를 지연 로딩하는 가장 간단하고 효율적인 방법입니다.

네이티브 지연 로딩을 활성화하려면, 간단히 loading="lazy" 속성을 <img> 태그에 추가하면 됩니다:

<img src="image.jpg" alt="My Image" loading="lazy">

loading 속성은 세 가지 값을 가질 수 있습니다:

예시:

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

이 예시에서 런던 브리지, 도쿄 스카이라인, 리우데자네이루 이미지는 사용자가 해당 위치로 스크롤할 때만 로드됩니다. 이는 사용자가 페이지 맨 아래까지 스크롤하지 않을 경우 특히 유용합니다.

JavaScript를 이용한 지연 로딩

네이티브 지연 로딩을 지원하지 않는 구형 브라우저의 경우, JavaScript 라이브러리를 사용하거나 직접 스크립트를 작성할 수 있습니다. 다음은 Intersection Observer API를 사용한 기본 예제입니다:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

설명:

  1. data-src 속성을 가진 모든 <img> 요소를 선택합니다.
  2. 새로운 IntersectionObserver 인스턴스를 생성합니다. 콜백 함수는 관찰된 요소가 뷰포트에 들어오거나 나갈 때 실행됩니다.
  3. 콜백 함수 내에서 entries(뷰포트와 교차된 요소들)를 순회합니다.
  4. 요소가 교차 중이면(entry.isIntersecting이 true이면), 이미지의 src 속성을 data-src 속성의 값으로 설정합니다.
  5. 그 후 더 이상 필요하지 않으므로 data-src 속성을 제거하고 이미지 관찰을 중단합니다.
  6. 마지막으로, observer.observe(img)를 사용하여 각 이미지를 관찰합니다.

HTML 구조:

<img data-src="image.jpg" alt="My Image">

실제 이미지 URL이 src 속성 대신 data-src 속성에 위치한다는 점에 유의하세요. 이는 브라우저가 이미지를 즉시 로드하는 것을 방지합니다.

지연 로딩 라이브러리 사용하기

몇몇 JavaScript 라이브러리는 이미지 지연 로딩 과정을 단순화할 수 있습니다. 인기 있는 옵션은 다음과 같습니다:

이러한 라이브러리들은 일반적으로 지연 로딩을 초기화하기 위한 간단한 API를 제공하며, 플레이스홀더 이미지나 전환 효과와 같은 추가 기능을 제공합니다.

컴포넌트 지연 로딩

지연 로딩은 이미지에만 국한되지 않습니다. React, Angular, Vue와 같은 최신 JavaScript 프레임워크에서는 컴포넌트에도 적용할 수 있습니다. 이는 많은 컴포넌트를 가진 대규모 단일 페이지 애플리케이션(SPA)에 특히 유용합니다.

React에서의 지연 로딩

React는 컴포넌트를 지연 로딩하기 위한 내장 함수인 React.lazy()를 제공합니다. 이 함수를 사용하면 컴포넌트를 동적으로 가져올 수 있으며, 이 컴포넌트들은 렌더링될 때만 로드됩니다.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

설명:

  1. React.lazy()를 사용하여 MyComponent를 동적으로 가져옵니다. import() 함수는 컴포넌트 모듈로 해석되는 프로미스를 반환합니다.
  2. MyComponent를 <Suspense> 컴포넌트로 감쌉니다. Suspense 컴포넌트는 컴포넌트가 로드되는 동안 폴백 UI(이 경우 "Loading...")를 표시할 수 있게 해줍니다.

Angular에서의 지연 로딩

Angular는 라우팅 설정의 loadChildren 속성을 사용하여 모듈의 지연 로딩을 지원합니다.

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

설명:

  1. my-module 경로에 대한 라우트를 정의합니다.
  2. loadChildren 속성을 사용하여 MyModuleModule이 지연 로드되어야 함을 지정합니다. import() 함수가 모듈을 동적으로 가져옵니다.
  3. then() 메서드는 모듈에 접근하여 MyModuleModule 클래스를 반환하는 데 사용됩니다.

Vue.js에서의 지연 로딩

Vue.js는 동적 가져오기 및 component 태그를 사용하여 컴포넌트의 지연 로딩을 지원합니다.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

설명:

  1. :is 속성과 함께 <component> 태그를 사용하여 컴포넌트를 동적으로 렌더링합니다.
  2. mounted 생명주기 훅에서 import() 함수를 사용하여 MyComponent.vue를 동적으로 가져옵니다.
  3. 그런 다음 dynamicComponent 데이터 속성을 모듈의 기본 내보내기(default export)로 설정합니다.

지연 로딩을 위한 모범 사례

지연 로딩이 효과적으로 구현되도록 하려면 다음 모범 사례를 고려하세요:

국제화 고려 사항

전 세계 사용자를 대상으로 지연 로딩을 구현할 때 다음 국제화 요소를 고려하세요:

결론

지연 로딩은 웹사이트 성능을 최적화하고 사용자 경험을 향상시키는 강력한 기술입니다. 화면 밖의 리소스 로딩을 지연시킴으로써 초기 페이지 로드 시간을 줄이고, 대역폭 소비를 감소시키며, 서버 부하를 낮출 수 있습니다. 작은 개인 웹사이트를 구축하든 대규모 엔터프라이즈 애플리케이션을 구축하든, 지연 로딩은 성능 최적화 전략의 핵심 부분이 되어야 합니다. 이 글에서 설명한 모범 사례를 따르고 국제화 요소를 고려함으로써, 지연 로딩 구현이 효과적이고 전 세계 사용자에게 긍정적인 사용자 경험을 제공하도록 할 수 있습니다.

지연 로딩을 도입하여 모두를 위한 더 빠르고, 더 효율적이며, 더 사용자 친화적인 웹 경험을 만들어 보세요.