lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)

lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)

---

웹사이트를 제작하게되면 자연스럽게 페이지내 수 많은 이미지 및 동영상등 미디어 콘텐츠를 사용되게 된다.  그러한 미디어 콘텐츠들은 눈으로 보기엔 좋지만 당연히 리소스를 많이 차지하게 되며, 이는 사이트의 성능에도 영향을 끼치고 나아가서는 사용자로 하여금 불편함을 주게된다. 사용자에게 중요하지 않은 (눈에 보이지 않는) 이미지를 먼저 로딩시키느라 사용에게 중요한 (눈에 보이는) 화면을 보여주지 못하고 있을 수 있다는 것이다.
아래 이미지를 보면 임의로 40개의 이미지 목록을 보여주는 페이지를 만들었는데 로드 시 이미지의 순서와 관계없이 뒤죽박죽 모든 이미지를 로드하느라 서버가 바쁜 것을 확인할 수 있다. (브라우저 개발자도구 > Network 탭을 통해 확인 가능하다)

 

일반적 웹사이트 이미지 로드방식, 불필요한 이미지를 전부 로드(load)한다.

내눈에 지금 보이지도 않는 이미지들을 로드하느라 페이지 로드가 끝나는데까지는 무려 11.14초가 소요됐다. 이를 개선하기 위해 로딩 방식이 lazyload라고 불리우는 지연 로딩방식이다. 하나의 아이디어라고 볼 수 있는데, 사용자는 콘텐츠를 볼 때  특별한 경우가 아니라면 위에서 아래 방향으로 스크롤을 하며 보게된다. 따라서 현재 브라우저에 나타나지 않은 미디어 콘텐츠는 로드하지 않고 대기하다가 사용자가 스크롤을 내려 아직 로드하지 않은 미디어 콘텐츠를 봐야할 시점이 되면 그제서야 미디어 콘텐츠를 로드하는 것이다.

이를 구현하기 위한 방법은 여러가지가 있겠지만, jQuery Lazy 라는 플러그인이 있어 이를 사용해보았다.

 

jQuery Lazy

사용방법은 매우 간단하다. 우선 플러그인을 다운로드 받아 jQuery와 함께 로드(또는 CDN방식으로)시킨 후 Javascript에서 지연 로드시킬 이미지 콘텐츠에 메소드만 호출해주면 된다.

(img태그에 src속성에 들어갈 값을 data-original속성에 넣어줘야 한다)

<!-- HTML -->
<ul class="imageList">
    <!-- src속성에 들어갈 값을 data-original속성에 넣어줌 -->
    <li><img data-original="http://jquery.eisbehr.de/lazy/images/1.jpg" alt=""></li>
    <li><img data-original="http://jquery.eisbehr.de/lazy/images/2.jpg" alt=""></li>
    ...
    <!-- 생략 -->
    ...
    <li><img data-original="http://jquery.eisbehr.de/lazy/images/39.jpg" alt=""></li>
    <li><img data-original="http://jquery.eisbehr.de/lazy/images/40.jpg" alt=""></li>
</ul>

<!-- CDN -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>

//Javascript
$(function(){
    $('.imageList li img').lazyload();
})

페이지를 새로고침 해보면 놀라울정도로 페이지 로딩속도가 짧아졌다.그런 뒤 페이지를 새로고침 해보면 총 40개의 이미지 중  눈에 보이는 3개의 이미지만 로드하며, 덕분에 놀라울정도로 페이지 최초 로딩속도가 짧아진걸 볼 수 있다.

 

lazyload 적용 후 페이지 로드, 필요한 이미지만 로드한다.

그리고 아래로 스크롤을 해보면 자연스럽게 사용자가 봐야하는, 즉 필요한 이미지들을 로드시키는 것을 볼 수 있다.

 

lazyload 적용 후, 필요한 이미지만 그때그때 로드시킨다.

사용방법이 너무나도 간단하지만 그 효과는 무척이나 크다. 추가적인 옵션이나 효과 등에 대한 설명은 이 굳이 포스트에서는 다루지 않고 jQuery Lazy 플러그인 공식사이트에서 샘플과 함께 볼 수 있다.

---

2019/09/04 - [JavaScript] - 스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

2019/09/04 - [JavaScript] - 무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

2019/09/03 - [UI 클론(Clone)] - 구글 로그인 인풋박스(Google Login Inputbox) UI Clone

구글 로그인 인풋박스(Google Login Inputbox) UI Clone

2019/09/02 - [HTML] - HTML 구글 스타일가이드 자세히보기 #intro

HTML 구글 스타일가이드 자세히보기 #intro