Image Lazy Loading

Image Lazy Loading은 페이지 안에 있는 이미지들이 화면에 보여질 필요가 있을 때 로딩일 이루어지도록하는 기법으로 웹사이트 방문 시 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이다.

Image Lazy Loading 적용 시 장점

웹 사이트의 로딩 시간에서 이점을 주는 점으로 페이지의 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 이미지 수를 줄이면 리소스 요청이 줄어들어 다운로드 용량을 적어지며 사용자가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미한다. 다른 리소스들을 더 빠르게 처리할 수 있게 도와주어 사용자가 페이지를 더 빠르게 볼 수 있도록 돕는다.

통신 비용은 이미지 전달 또는 다른 전달할 무언가의 전송 바이트 수에 기반하여 청구되어진다.

Lazy Load 적용이 안되어있는 일반적인 웹사이트의 경우 사용자가 방문하면 브라우저는 해당 페이지의 모든 리소스를 로드 시키며 보이지 않는 이미지 로딩으로 인해 이미 네트워크 리소스가 낭비되어진다. 그래서 이미지가 많은 웹사이트의 경우 자원의 손실은 커져 Lazy Load 기능을 활용해 호스팅 비용을 아낄 수 있다.

Lazy Loading 적용 방법

HTML : <img> 태그 활용

이미지 로딩을 사전에 막는 방법으로 img 태그는 이미지를 로드하기 위해서 브라우저는 태그 내 src 속성을 이용한다. 그래서 이미지들의 로딩을 지연시키기 위해서 scr속성은 비워두고 다른 속성에 이미지 URL를 지정하면 된다. 그러면 브라우저는 해당 이미지를 로드하지 않는다.

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

자바스크립트 이벤트 활용하여 img load 방법

브라우저에 해당 이미지를 언제 로딩 할 것인지 알려줘야 한다.

브라우저 변화를 감지하는 scroll, resize, orientationChange 이벤트 리스너를 활용한다.

Intersection Observer API

엘리먼트 요소가 뷰 포트에 들어가는 것을 감지하고 액션을 취하는 것을 간단하게 만든다.

CSS : background 활용

참고