ProgrammingHTML

HTML Lazy Loading 정의와 활용법

HTML Lazy Loading 정의, HTML Lazy Loading 활용법, Lazy Loading

HTML Lazy Loading: 정의와 활용법

Lazy Loading(지연 로딩)은 웹 페이지에서 이미지, 비디오, 스크립트, 또는 기타 리소스를 사용자가 실제로 필요로 할 때까지 로드하지 않고, 나중에 로드하는 기법을 의미합니다. 이 기술을 사용하면 웹 페이지 초기 로딩 속도를 빠르게 하고, 네트워크 대역폭을 효율적으로 사용할 수 있습니다. 특히 이미지나 동영상 같은 대용량 미디어 파일을 지연 로딩하는 것이 효과적입니다.

HTML에서 Lazy Loading은 이미지나 iframe 요소에 적용하여 사용자가 해당 요소를 화면에 볼 때만 로드되도록 할 수 있습니다. 이를 통해 불필요한 리소스 로딩을 방지하고, 페이지 로딩 시간을 단축시킬 수 있습니다.

1. Lazy Loading의 이점

  • 페이지 로딩 속도 향상: 페이지가 처음 로드될 때 필요한 리소스만 로드하므로 초기 로딩 시간이 짧아집니다.
  • 네트워크 대역폭 절약: 사용자가 보지 않는 이미지나 비디오 같은 미디어 파일은 로드하지 않으므로 대역폭을 절약할 수 있습니다.
  • 사용자 경험 개선: 페이지가 빠르게 로드되면 사용자 경험이 향상되고, 이탈률이 줄어듭니다.
  • SEO: 페이지가 빨리 로드되면 검색 엔진에서 페이지 랭킹에 긍정적인 영향을 미칠 수 있습니다.

2. HTML에서 Lazy Loading 사용하기

HTML에서 Lazy Loading을 구현하는 가장 간단한 방법은 loading 속성을 사용하는 것입니다. 이 속성은 이미지(<img>)와 iframe(<iframe>) 요소에 적용할 수 있습니다.

2.1. 이미지에 Lazy Loading 적용

HTML5에서 제공하는 loading 속성으로 이미지에 Lazy Loading을 간단히 적용할 수 있습니다. loading="lazy" 속성을 사용하면 브라우저가 사용자가 이미지가 보일 때까지 로드하지 않도록 지시할 수 있습니다.

1
<img src="image.jpg" alt="Example image" loading="lazy">
  • loading="lazy": 이 속성을 사용하면 이미지가 화면에 보일 때까지 로드되지 않습니다.
작동 방식:
  • 사용자가 페이지를 스크롤하여 이미지가 화면에 나타날 때, 그때 이미지가 로드됩니다.
  • 이미지는 사용자가 보는 화면에 나타날 때만 요청되므로 초기 페이지 로딩 속도가 빨라집니다.

2.2. iframe에 Lazy Loading 적용

iframe 요소에 대해서도 마찬가지로 loading="lazy" 속성을 사용할 수 있습니다. 주로 비디오, 지도, 외부 콘텐츠를 로딩할 때 사용됩니다.

1
<iframe src="https://www.example.com" loading="lazy"></iframe>

이 방식으로, iframe도 화면에 나타날 때 로드되도록 설정할 수 있습니다.

3. Lazy Loading의 동작 원리

Lazy Loading이 어떻게 동작하는지 살펴보면 다음과 같습니다:

  1. 초기 로드: 페이지가 로드되면, loading="lazy" 속성이 있는 요소는 바로 로드되지 않고, 해당 요소가 화면에 보일 때까지 기다립니다.
  2. 사용자 스크롤: 사용자가 페이지를 스크롤하여 이미지나 iframe이 화면에 나타날 때, 브라우저는 해당 리소스를 로드합니다.
  3. 스크롤 이벤트: 화면에 나타날 때만 리소스를 요청하기 때문에, 초기 페이지 로딩에 필요한 리소스만 요청하여 페이지의 로딩 속도가 빨라집니다.

이 기법은 Intersection Observer API를 기반으로 작동하는 브라우저들이 많이 채택하고 있으며, 브라우저는 이 API를 사용하여 요소가 뷰포트에 들어올 때 로드하도록 합니다.

4. Lazy Loading을 사용할 때 고려할 점

4.1. 호환성

loading="lazy" 속성은 현재 대부분의 최신 브라우저에서 지원되지만, 모든 브라우저에서 완벽하게 동작하는 것은 아닙니다. 예를 들어, Internet Explorer와 일부 구형 브라우저에서는 지원하지 않으므로, 이를 고려해야 합니다. 이를 해결하려면 JavaScript polyfill을 사용하거나, Intersection Observer API를 직접 구현하여 Lazy Loading을 지원할 수 있습니다.

4.2. SEO에 미치는 영향

Lazy Loading을 사용할 때 SEO에 부정적인 영향을 미칠 수 있다는 우려가 있습니다. Google과 같은 검색 엔진은 페이지를 크롤링할 때 JavaScript를 실행하여 이미지를 로드하고 콘텐츠를 읽습니다. 그러나 Lazy Loading을 사용할 경우, 검색 엔진 크롤러가 이미지를 놓칠 수 있습니다. 이를 해결하려면, alt 텍스트와 이미지에 대한 충분한 설명을 추가하거나, noscript 태그를 사용하여 대체 콘텐츠를 제공하는 방법을 고려할 수 있습니다.

예시: noscript 사용

1
2
3
<noscript>
    <img src="image.jpg" alt="Example image">
</noscript>

noscript 태그는 JavaScript가 비활성화된 경우에도 리소스가 로드되도록 대체 콘텐츠를 제공하는 방법입니다.

5. JavaScript로 Lazy Loading 구현하기

loading="lazy" 속성을 지원하지 않는 브라우저에서 Lazy Loading을 구현하려면 Intersection Observer API를 사용한 JavaScript 기반 솔루션을 사용할 수 있습니다. 이 API는 요소가 뷰포트에 들어왔을 때 콜백을 실행하는 방식으로 Lazy Loading을 처리합니다.

JavaScript로 Lazy Loading 구현 예시:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img data-src="image.jpg" alt="Lazy load example" class="lazy">

<script>
  // Intersection Observer API 사용
  const images = document.querySelectorAll('img.lazy');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;  // 실제 이미지로 변경
        img.classList.remove('lazy');
        observer.unobserve(img);  // 더 이상 감지하지 않음
      }
    });
  });

  images.forEach(img => observer.observe(img));
</script>

이 코드에서는 이미지가 뷰포트에 들어올 때, data-src에 저장된 실제 이미지 URL을 src 속성에 할당하여 이미지를 로드합니다.

6. Lazy Loading 적용 시 주의사항

  • 리소스 순서: 중요한 콘텐츠가 포함된 이미지나 요소는 Lazy Loading을 적용하지 않거나 우선적으로 로드하도록 설정하는 것이 좋습니다. 예를 들어, 페이지 상단에 위치한 주요 배너 이미지나 아이콘 등은 즉시 로드되도록 설정해야 합니다.
  • 비동기 로딩에 따른 예외 처리: 일부 이미지나 비디오가 로드되지 않는 상황에 대비하여, placeholder나 error 상태를 처리할 수 있는 대체 콘텐츠를 제공해야 합니다.
1
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" alt="Lazy loaded image">

결론

Lazy Loading은 페이지 로딩 속도를 향상시키고, 사용자 경험을 개선하는 데 중요한 기술입니다. HTML5의 loading="lazy" 속성은 Lazy Loading을 매우 쉽게 구현할 수 있게 해줍니다. 이를 통해 웹 페이지의 리소스를 필요한 시점에만 로드하여 초기 로딩 시간을 단축시키고, 네트워크 자원을 효율적으로 사용할 수 있습니다.

다만, 브라우저 호환성 문제나 SEO 측면에서 고려해야 할 사항도 있으므로, 이를 해결할 수 있는 방법을 함께 고민하면서 Lazy Loading을 적용하는 것이 중요합니다.

Reference

Share