Mar 19 2014

WordPress Plugin – SW Lazy Load

While working on a client project, on optimizing the website speed, found it hard to get a Lazy Loading plugin that fit on my needs.

Sw Lazy Load

Sw Lazy Load

Please note that there are plenty of plugins Lazy Load Plugins for WP, although i couldn’t find one that work the way i needed do the way theme was initially built.

How does it work ?

The plugin add’s a hook to wp_head and wp_footer and uses php Output Buffer to get all the output content.

Then parses all the output content and replaces all the images src with a blank pixel, adding a new attribute on the img tag named data-src, same as Google does.

Your images will look something like

<img … src=”” width=”569″ height=”103″ data-src=””>

Then using the Unveil Js library, it shows the images that are on your viewport or close to be (200px below the viewport).

Why Lazy Loading ?

By lazy Loading the images, your browser will only load the images when they are needed, and this results in 2 important factors:

  • Performance improvement on your website load
  • Bandwidth savings

Who doesn’t like a fast website ?

Link for the plugin:

Please let me know if you need any help with the plugin, or any suggestion for improvement.

2 comments on “WordPress Plugin – SW Lazy Load

  1. This doesn’t work with Gravatars enabled. Getting error message for each Gravatar image:
    sw_replace_html_images() [function.sw-replace-html-images]: unterminated entity reference d=identicon&r=G in public_html/wp-content/plugins/sw-lazy-load/sw_lazyload.php on line 57

    Works fine on other images.

  2. Hi Massa,

    Sorry for the delay, i just submited version 0.4 for the plugin to WordPress that should fix that issue.

    Please let me know if everything is working as it should now.

    Thank you

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>