[UX] img 태그의 loading 태그 속성을 이용하여 이미지 레이지 로드

LazyLoad (레이지 로드)

화면에 보이지 않는 불필요한 리소스를 로드하지 않고, 화면이 들어왔을 때 로드하도록 한다.

 

웹페이지 안에 100개의 이미지가 있어도, 이용자는 첫 이미지만을 보고 다른 페이지로 전환을 할 수 있다.

그렇다면 나머지 99개의 이미지를 전부 로드하는 것은 불필요한 자원을 낭비하게 된다.

 

빠른 속도의 무제한 데이터나 빠른 wifi 환경이라면 그나마 상황이 낫겠지만,

데이터에 제한이 있는 이용자의 경우에는 불필요한 데이터 소모를 안 좋은 경험으로 받아들일 수 밖에 없다. 

LazyLoad를 통해 얻을 수 있는 이점

화면 안에 들어온 리소스를 먼저 로드하여 초기 렌더링을 빠르게 한다.

이용하지 않을 불필요한 리소스를 로드하지 않아 자원의 낭비를 줄인다.

 

실제로 적용되었는지 확인하는 방법

Network tab을 통해 로드된 데이터를 확인할 수 있다.

 

ex1) 적용 전 (모든 리소스를 로드하여 스크롤 바가 쌀알만해졌다)

 

ex2) 적용 후 (필수 리소스와 화면 내에 들어온 리소스만을 로드한 모습) 

HTML img 태그의 속성을 이용하여 LazyLoad 구현하기

      <div className="video-thumbnail">
        <Anchor href={`${videoBaseUrl}${videoId}`}>
          <img src={videoThumbnailUrl} alt="youtube video thumbnail" loading="lazy" />
        </Anchor>
      </div>

아주 간단하다.

img 태그에 loading="lazy" 속성을 넣어주면 된다.

 

 

Chromium 기반 브라우저(Chrome, Edge, Opera) 및 Firefox에서 지원