워드프레스 느림의 미학 – lazy loading 플러그인 6선

lazyload

대 고참, 학교 선생님 또는 직장 상사에게서 “느리다!”라는 지적을 받았다면 어떤 일을 진행함에 있어 남들보다 진척 속도가 느리다는 의미로 해석됩니다. 하지만 일을 효율적으로 못해서 느린 것과 [highlight bg="#DDFF99" color="#000000"]일을 효율적으로 하기 위해 느리게 하는 것은[/highlight] 또 다르게 해석을 해야겠죠. 이번 포스트에 소개할 lazy load 플러그인들은 느린 로딩을 이용해 웹사이트 로딩을 빠르게 처리할 수 있도록 도와줍니다.

[box title="Lazy Laoding 이란" color="#333333"]이미지와 같이 사이즈가 큰 데이터를 로딩할 때 사용자의 브라우져 화면에 나타나지 않은 이미지까지 로딩을 하면 페이지 로딩이 느려질 수 있습니다. lazy loading은 사용자 브라우져에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤 하면서 이미지에 가까워지면 로딩됩니다.
더 자세한 내용은 Wikipedia를 참고해보세요. [/box]

[divider top="0"]

Lazy Load

[quote style="1"]Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.[/quote]
automattic이 개발에 참여한 플러그인라 신뢰도가 높습니다. 사용자가 스크롤하면서 이미지에 다다르면 이미지가 로딩 됩니다. 인스톨 후 옵션 설정 없이 바로 사이트에 적용됩니다.
[button link="http://wordpress.org/extend/plugins/lazy-load/" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

BJ Lazy Load

[quote style="1"]Lazy loading makes your site load faster and saves bandwidth. Uses jQuery and degrades gracefully for non-js users. Works with both images and iframes[/quote]
포스트 이미지, 썸네일, gravatar, iframe에 lazy loading 적용하여 사이트의 로딩 속도를 향상시킵니다.
[button link="http://wordpress.org/extend/plugins/bj-lazy-load/" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

jQuery Image Lazy Load WP

[quote style="1"]add jquery lazy loading to images[/quote]
플러그인 소개는 심플하지만 다운로드 횟수는 다른 lazy laod 플러그인보다 많습니다. 이미지에 lazy loading을 적용하여 페이지 로딩 속도를 향상시켜줍니다.
[button link="http://wordpress.org/extend/plugins/jquery-image-lazy-loading/" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

Lazy Widget Loader

[quote style="1"]Lazy Widget Loader provides lazy loading for widgets to improve page loading.[/quote]
원하는 위젯의 로딩을 느리게 할 수 있습니다. 위젯이 로딩에 영향을 많이 미친다면 유용한 플러그인입니다. 워드프레스 위젯 로딩을 느리게 하면?!을 참고하세요.
[button link="http://wordpress.org/extend/plugins/lazy-widget-loader/" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

[heading style="1"]프리미엄 플러그인[/heading]

WordPress Advanced Image Lazy Load


[button link="http://codecanyon.net/item/wordpress-advanced-image-lazy-load/704574?ref=mysearchfish" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

Performance Optimizer


[button link="http://codecanyon.net/item/performance-optimizer-plugin-for-wordpress/2413770?ref=mysearchfish" color="#ff6600" size="3" style="1" dark="0" radius="auto" target="blank"]자세히 보기[/button]

[divider top="yes" text="↑"]

마치며

페이지 전체가 느리게 로딩된다면 문제가 있지만 현재 브라우져에 보이지 않는 이미지 등을 필요할 때 로딩하는 것은 매우 효율적인 페이지 로딩 방법인 것같습니다. 여러분의 워드프레스 사이트도 lazy load를 통해서 빠른 페이지 로딩하시기 바랍니다. 그럼 오늘도 즐거운 블로깅 하세요. :)
[divider top="yes" text="↑"]

그외 관심 포스트

4 Comments

  1. 1

    이런 기능도 플러그인이 존재하는군요.. 정말 워드프레스의 끝은 어디일지.. 알수록 재미있어지는 것 같습니다.

  2. 3
    • 4

      대부분 사용해보았는데 지금은
      jQuery Image Lazy Load WP 를 사용하고있어요. 하지만 이 플러그인은 워드프레스에 이미 있는 jquery를 사용하지 않고 jquery를 구글에서 불러오니 사용전에 참고하세요. 사이트에서 여러 플러그인을 테스트 해보시고 가장 궁합이 잘 맞는 것을 선택해보세요. :)

Add Comment Register



댓글 남기기

Your email address will not be published. Required fields are marked *

HTML 태그 및 속성을 사용하실 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>