Image Lazy Loading

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 이벤트 리스너를 활용한다.

• 이벤트 들 중 하나가 발생할 때 로딩이 지연되었거나 아직 로딩 되지 않은 이미지들을 모두 찾는다.
• 어떤 이미지가 뷰 포트 안으로 들어왔는지 확인하여 뷰 포트 안으로 들어가면 <img /> 태그의 data-src 속성에 지정된 URL 을 src 속성에 넣어 이미지를 로드 한다.
• 로딩을 지연 시킬 이미지로 식별하던 lazy 클래스를 제거한다.
• 모든 이미지가 로딩 되면 이벤트 리스너를 제거한다.

See the Pen Lazy loading use <img> tag by pminsun (@pminsun) on CodePen.

 

 

Intersection Observer API

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

• 이미지에 옵저버를 부착시킨다.
• 엘리먼트가 뷰 포트에 들어간 것을 API가 감지했을 때 isIntersecting 속성을 이용해서 URL을 data-src 속성에서 src 속성으로 이동시켜서 브라우저가 이미지를 로드하도록 트리거를 일으킨다.
• 전부 로드 되면 lazy 클래스명을 이미지에서 삭제하고 부착했던 옵저버를 삭제한다.

See the Pen Lazy loading Intersection Observer API by pminsun (@pminsun) on CodePen.

 

 

CSS : background 활용

• 각 태그마다 background-image가 있지만 lazy 클래스 명을 활용하여 background-image 속성을 none으로 변경한다.
• 스크롤을 아래로 내릴 때, Intersection Observer(또는 이벤트 리스너)는 이미지가 뷰포트에 들어오는 것을 감지하고 엘리먼트의 lazy 클래스를 삭제해 적용한 background-image속성을 가져온다.

See the Pen Lazy loading use css background by pminsun (@pminsun) on CodePen.

 

참고

웹 성능 최적화를 위한 Image Lazy Loading 기법