⏳

lazy loading

lazy loading를 알아야 하는 이유

이미지, 동영상이 웹 페이지의 주요 부분으로 많이 차지하고 있다면 사용자에게 '실제적으로' 더 빠른 사용자 경험을 제공하고 싶다면

이 문서를 보고 나면

이미지나 동영상 같은 콘텐츠들을 lazy loading으로 렌더링할 수 있다.

lazy loading

영어 단어 중 'lazy'는 '가능한 한 길게 일을 미루는 행위'란 의미에 기반합니다. 그래서 lazy loading은 가능한 한 길게 미루어 웹페이지에서 보여줄 콘텐츠들이 실제로 화면에 보일 때까지 미룬 후 로딩하는 기술입니다. 다시 한번 강조하면 이 리소스들은 필요할 때 로드돼야합니다. 텍스트 외에 이미지와 동영상 같은 콘텐츠들은 모든 웹사이트에 애플리케이션에서 매우 중요한 부분입니다. 하지만 이러한 콘텐츠들은 페이지 성능에 가장 많이 영향을 주고 있는 요소이기도 합니다.

그래서 많은 엔지니어가 이미지를 최적화해서 사용자에게 보여주기 위해 노력했고 그 해결 방법의 하나가 lazy loading 입니다.

아래 영상은 lazy loading으로 이미지가 로드되는 장면입니다. 회색의 placeholder 영역은 사용자가 스크롤을 아래로 내릴 때 화면에 정상적으로 load 되는 것을 확인할 수 있습니다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는 데 도움을 줄 수 있습니다.

사용자가 페이지에서 스크롤을 아래로 내림으로써, 이미지의 placeholder는 뷰포트(웹 페이지 내 보이는 부분)에 다가오게 됩니다. 그리고 이 뷰포트에 보이게되면 이미지가 로딩되도록 트리거를 일으킨 후, 실제 이미지를 렌더링합니다.

lazy loading 사용 방법

image tag 이용 방법

Lazy loading 이미지들은 두 단계로 나눌 수 있습니다.

먼저, 이미지 로딩을 사전에 막는 것입니다. 일반적으로 이미지는 태그 내 src 속성을 이용하여 이미지를 로드합니다. 그런데 이 방식은 치명적인 단점이 있습니다. HTML 내 첫 번째 이미지든 1000번째 이미지이든, 혹은 뷰포트 밖에 있든 상관없이 만약 <img> 태그가 src 속성을 가지면, 이미지를 무조건 로드합니다.

그래서 src 속성 대신 다른 속성에다가 이미지 URL을 넣는 방식으로 lazy loading을 이용할 수 있습니다. 예를 들면 <img> 태그에 data-src라는 속성에 이미지 URL을 지정한다면, 초기에 html 태그가 웹페이지에 그려질 때는 이미지는 로드되지 않습니다.

<img data-src="<https://ik.imagekit.io/demo/default-image.jpg>" />
HTML
복사

하지만 이렇게만 작성하면 실제 이미지가 로드되지 않기 때문에 해당 이미지를 언제 로딩할 것인지 알려주어야 합니다. 이를 위해서는, 해당 이미지(현재는 placeholder 상태)가 뷰포트에 들어왔는지(사용자가 보는 페이지에 들어왔는지) 확인해야 합니다.

자바스크립트 이벤트를 이용한 방법

scroll, resize 그리고 orientationChange와 같은 이벤트 리스너를 이용할 수 있습니다. scroll 이벤트는 사용자가 페이지에서 스크롤 하는 시점을 확인할 수 있습니다. resize 이벤트는 윈도우 브라우저 크기가 바뀔 때 발생합니다. orientationChange 이벤트는 디바이스 화면이 가로 또는 세로로 바뀔 때 발생합니다.

이러한 이벤트 리스너를 이용하여 어떤 이미지가 뷰포트 안으로 들어왔는지 확인합니다. 그리고 뷰포트 안으로 들어가면 <img> 태그의 data-src 속성에 지정된 URL을 src 속성에 넣어서 이미지를 로드합니다. 이후 나중에 트리거 이벤트를 일으키기 위해 로딩을 지연시킬 이미지로 식별하던 lazy 클래스를 제거합니다. 모든 이미지가 로딩된 이후에는 이벤트 리스너를 제거합니다.

Intersection Observer API를 이용한 방법

Intersection Observer API는 엘리먼트 요소가 뷰포트에 들어가는 것을 감지하고 액션을 취하는 것을 간단하게 할 수 있도록 도와주는 API입니다. Intersection Observer API는 이미지 로드를 지연시키기 위해 모든 이미지에 Observer를 부착시킵니다. 그리고 엘리먼트가 뷰포트에 들어간 것을 감지하게 되면, isIntersecting 속성을 이용하여 변화를 감지하고, data 속성에 지정된 url을 src 속성으로 옮기는 방식으로 구현할 수 있습니다.

Native lazy loading

최신 브라우저에서는 아래와 같은 방식으로 Native lazy loading을 이용할 수 있습니다.

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
HTML
복사

lazy loading을 구현하기 위해 단지 임베딩 할 이미지 또는 iframe에 'loading' 속성만 추가해주면 됩니다. loading 속성에는 아래와 같은 값을 사용할 수 있습니다.

•

lazy: 뷰포트에서 일정한 거리에 닿을 때까지 로딩을 지연시킵니다.

•

eager: 현재 페이지 위치가 위, 아래 어디에 위치하든 상관없이, 페이지가 로딩되자마자 해당 요소를 로딩합니다.

정리

•

lazy loading을 이용하면, 페이지 초기 로딩 시 필요로 한 이미지의 수를 줄일 수 있기 때문에 이는 자연스럽게 성능 향상에 도움이 된다.

•

lazy loading은 이미지가 보여지지 않으면 절대 로딩하지 않으므로, 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있다.

참고 링크

•

Lazyloading_MDN

•

loading

•

Intersection Observer API