[JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes

Lazysizes JS를 사용하여
웹 사이트 이미지에 오프스크린 이미지 지연(lazyload)를 적용시킬 수 있습니다.

 

Lazy loading

lazy loading은 페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술입니다. 대신에 이 중요하지 않은 리소스들은 필요할 때 로드가 되어야 합니다.

 

이미지와 관련된 경우에는 중요하지 않은 리소스들은 "off-screen"와 함께 동기화가 됩니다.

 

누군가가 웹페이지(이미지, 비디오 등)에 리소스를 추가할 때, 리소스는 small placeholder를 참조합니다. 사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시 되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체합니다.

 

예를 들어, 사용자가 웹페이지를 로드하고 즉시 남겨 두면 웹페이지의 맨 위 부분 이외의 항목이 로드되지 않습니다.

이미지, 비디오를 그냥 로딩하지 않고 lazy loading을 사용하는 이유는 사용자가 볼 수 없는 것들을 로딩할 가능성이 있기 때문입니다.

 

lazy load를 사용하지 않으면 SEO에 미치는 영향

 

lazy load는 검색 엔진 순위(SEO)에 영향을 미칩니다. 

 

블로그 게시물과 같은 웹페이지의 전체 구성 요소를 느리게 로드하면 검색 엔진이 해당 구성 요소를 우회하여 콘텐츠가 인덱싱 되지 않아 검색 엔진 결과가 줄어들 수 있습니다.

 

이러한 문제를 극복하는 한 가지 요령은 lazy load 하는 콘텐츠에 대한 링크를 제공하는 것입니다. 이렇게 하면 기본적으로 검색 엔진 크롤러가 액세스 할 수 있는 콘텐츠에서 웹페이지를 만듭니다. 검색 엔진이 웹사이트를 index 하면 이러한 링크를 따라가며 검색한 내용을 색인화 합니다. 이 방법은 기본적으로 사용자가 콘텐츠를 동적으로 로드할 수 있게 하면서 lazy load도 웹사이트를 전통적인 웹사이트로 구성합니다.

lazysizes

lazysizes 라는 open API를 사용하여 lazy load를 쉽게 적용시킬 수 있습니다.

 

데모 페이지

lazysizes - the ultimate lazyloader for responsive images, iframes and widget

blank 파일 업로드

적용시키기 전에 아래 파일을 다운로드하여 웹사이트에 업로드해줍니다. 

blank.svg

0.00MB

lazysizes 적용 방법

이제 lazysizes를 적용시켜보도록 하죠.

 

웹사이트의 HTML </body> 제일 윗부분에 다음 코드를 복사해서 넣어주면 되는데, 수정해야 할 부분이 있습니다.

 

티스토리라면 ./images/blank.svg 로 경로가 일치하지만, 다른 웹사이트라면 이 부분의 경로를 알맞게 설정해주면 됩니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function(event) {
    const imgs = document.querySelectorAll('img');
    if (imgs.length > 0) {
      imgs.forEach(function(img) {
        if (img.getAttribute('srcset') != null) {
          img.setAttribute('data-srcset', img.getAttribute('srcset'));
          img.setAttribute('srcset', './images/blank.svg')
        }
        if (img.getAttribute('src') != null) {
          img.setAttribute('data-src', img.getAttribute('src'));
          img.setAttribute('src', './images/blank.svg')
        }
        img.classList.add('lazyload')
      })
    }
  })
</script>

특정 이미지 오프 스크린 이미지 지연 효과 제거

만약, 특정 컨테이너 부분에 이미지에는 오프 스크린 이미지 지연 효과를 적용하지 않으려면 위 코드를 수정해주면 되는데, 위치는 아래 코드 부분입니다.

const imgs = document.querySelectorAll('img');

코드를 살펴보면 모든 img 태그들에 오프 스크린 이미지 지연 효과를 적용시키도록 해줬습니다. 여기 img 태그에 :not 메서드를 사용하면 됩니다. 

 

만약 div 태그 같은 요소의 클래스명이 'someContainer'이고, 그 안에 img 태그가 존재한다고 가정해보겠습니다. 그렇다면 아래와 같이 수정해줄 수 있습니다.

const imgs = document.querySelectorAll('img:not(.someContainer img)');

CSS 구문 추가

엑박 현상을 막기 위한 아래 CSS 코드를 추가할 수 있습니다.

img.lazyload:not([src]) {
visibility: hidden;
}

lazy load를 사용하거나, 이미지 태그안에 이미지 파일 주소가 없다면 이미지 파일을 바로 출력하지 않기 때문에 페이지 로딩 초기에 이미지 소스 파일 부재로 인한 엑스 박스가 나타납니다. 이미지 파일 링크에 숨김(hidden) 속성을 부여하여 잠시 보이지 않게 설정하는 것입니다.

Lazysizes options

lazysizes의 다양한 옵션 및 사용방법은 아래 깃허브를 참고할 수 있습니다.

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more,

---

오늘은 이렇게 Lazysizes JS를 사용하여 웹 사이트 이미지에 오프 스크린 이미지 지연(lazyload)을 적용하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟