이미지 네이티브 레이지 로딩과 폴리필

레이지 로딩이란

이미지와 동영상은 엄청난 양의 데이터를 소비하며 웹 성능에 영향을 미칩니다. 웹 페이지에 많은 이미지(또는 비디오)가 포함되어 있는 경우 그 중 일부(많지는 않더라도)는 표시 영역에서 벗어납니다. 모든 브라우저의 정상적인 동작은 웹 페이지를 로드하는 동안 모든 이미지를 로드하는 것이므로 로드 시간이 느려질 수 있습니다.

지연 로딩은 뷰포트에 들어갈 때까지 이미지 로딩을 연기하고 웹 페이지가 로드되면 표시되는 이미지만 로드하는 데 사용됩니다. 따라서 웹 페이지가 처음 로드되어야 하는 시간이 줄어듭니다.

네이티브 지연 로딩

개발자는 자바스크립트 플러그인을 사용하여 지연 로딩을 만듭니다. 좋은 소식은 이제 기본 지연 로딩이 Chrome 75에서 지원된다는 것입니다. 사용은 매우 간단합니다. loading="lazy" 요소에 속성<img>만 추가하면 됩니다.

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

속성 로드 값은 다음 중 하나일 수 있습니다.

lazy => 화면에 표시되기 직전에 이미지를 로드하도록 브라우저에 지시합니다.

열망 => 가능한 한 빨리 브라우저가 이미지를 로드하도록 합니다. 웹 페이지가 로드되면 뷰포트 내부에 표시될 이미지에 추가할 수 있습니다.

auto => 브라우저가 지연 로드 여부를 결정하도록 합니다.

지연 로딩 플러그인

지연 로딩을 달성하기 위한 많은 자바스크립트 플러그인이 있습니다. 브라우저에서 이미지를 로드하지 못하도록 src 속성을 data-src 속성으로 바꾸는 데 의존합니다.

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

그런 다음 javascript를 사용하여 이미지가 뷰포트에 가까울 때 감지하여 브라우저에서 로드할 수 있도록 data-src 속성 값을 src 속성에 복사합니다.

이러한 라이브러리의 예:

vanilla-lazyload.

lazysizes.

하이브리드 지연 로딩

Smashing Magazine의 그의article에서 설명한 대로:
"하이브리드 지연 로딩은 지원하는 브라우저에서 네이티브 지연 로딩을 사용하는 기술입니다. 그렇지 않으면 JavaScript에 의존하여 지연 로딩을 처리합니다."

<!--Load this hero image as soon as possible-->
<img src="hero.jpg" loading="eager" alt=".."/>

<!--Lazy load these images as user scroll down-->
<img data-src="image1.jpg" loading="lazy" alt=".." class="lazyload"/>

<img data-src="image2.jpg" loading="lazy" alt=".." class="lazyload"/>

<img data-src="image3.jpg" loading="lazy" alt=".." class="lazyload"/>

//Check for browser support.
if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('lazyload')
    //copy the value of the data-src to the src.
    images.forEach(img => img.src = img.dataset.src)
} else {
    //if no support, async load the lazysizes plugin
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
}

지연 로딩이 실행 중입니다.

자원

Native image lazy-loading for the web!

Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading