지연 로딩으로 속도 최적화 - 자바스크립트 없이

로드할 때 이미지가 웹사이트에서 가장 무거운 부분 중 하나라는 것은 놀라운 일이 아닙니다. 웹사이트 로딩을 최적화하기 위해 할 수 있는 가장 좋은 방법 중 하나는 가능한 한 많은 이미지를 지연 로드하는 것입니다. 이제 네이티브 Lazy Loading 덕분에 자체 Javascript를 사용하지 않고도 그렇게 할 수 있습니다.

Javascript 없이 이미지를 비동기적으로 로드하는 방법

이미지를 비동기식으로 로드한다는 것은 이미지가 브라우저의 뷰포트에 나타날 때만(또는 직전에) 이미지를 로드한다는 의미입니다. 이것의 이점은 웹사이트의 초기 페인트 내에서 볼 수 없는 모든 이미지를 로드할 필요가 없기 때문에 사이트가 처음에 더 빨리 로드된다는 것입니다. nowwell supported 기본loading 속성 덕분에 이미지가 뷰포트에 있을 때 이를 감지하고 로드하여 Javascript 라이브러리를 추가(또는 자체 스크립트 작성)하는 것을 피할 수 있습니다.

로딩 속성 사용

loading 속성과 함께 사용할 수 있는 세 가지 값이 있습니다.

자동 - 기본값입니다. 속성을 설정하지 않은 것과 같습니다.

열망 - 리소스를 즉시 로드합니다.

게으른 - 뷰포트에 있는 리소스를 로드합니다.

일반적으로 말해서, 스크롤 없이 볼 수 있는 리소스에 대해 즉시 값을 사용하고 스크롤 없이 볼 수 있는 리소스에 대해 지연 값을 사용하는 것이 합리적입니다. 또는 스크롤 없이 볼 수 있는 이미지에 loading 속성을 포함하지 마십시오.

loading 속성을 사용한 이미지 마크업

그러면 loading 속성을 사용하기 위해 이미지 마크업이 필요로 하는 것은 무엇입니까? 다음은 예입니다.

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

지연을 사용할 때 width 및 height 속성 또는 인라인 스타일 내에서 이미지 크기를 지정하는 것이 중요합니다. 설정하지 않으면 레이아웃 이동이 발생할 수 있으므로 이것이 중요합니다. 이는 최상의 UX가 아닙니다.

그림 요소와 함께 loading 속성 사용하기

<picture>
  <source srcset="large.jpg 1x, larger.jpg 2x" media="(min-width: 800px)" />
  <img src="image.jpg" alt="..." />
</picture>

브라우저는 소스에서 로드할 이미지를 결정합니다. loading 속성은 fallback 요소에만 포함하면 됩니다.

이전 브라우저에 대한 지연 로딩 지원

이를 지원하지 않는 이전 브라우저의 경우 loading 속성은 간단하게 무시되며 초기 페이지 방문 시 이미지가 웹사이트의 나머지 부분과 함께 로드됩니다. 물론 어떤 브라우저를 사용하든 가능한 한 많은 웹사이트 방문자에게 지연 로딩을 제공해야 합니다. 그렇다면 지원되지 않는 브라우저의 사용자에게 이를 어떻게 제공할 수 있습니까? 유일한 방법은 동일한 기능을 제공하기 위해 Javascript 폴백을 로드하는 것입니다. 우리가 하고 싶지 않은 것은 지원되는 브라우저를 사용하는 사람들을 위해 스크립트를 로드하는 것입니다. 그렇게 하면 로드를 무효화하기 위한 모든 작업을 수행할 수 있기 때문입니다. 그래서 우리가 뭘 할 수 있지? 이 스니펫을 사용하여 사용자가 지원되는 브라우저를 사용 중인지 감지합니다.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

함께 모아서

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazyload the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

이제 우리는 웹사이트 내에서 로드해야 하는 이미지를 최적화하는 이전 브라우저에 대한 폴백을 제공하면서 네이티브 지연 로드를 사용하기 위한 견고한 만능 솔루션을 갖게 되었습니다.