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.
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=”https://blog.josedasilva.net/wp-content/plugins/sw-lazy-load/assets/media/b.gif” width=”569″ height=”103″ data-src=”https://blog.josedasilva.net/wp-content/uploads/2014/03/screenshot-1.png”>
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: http://wordpress.org/plugins/sw-lazy-load/
Please let me know if you need any help with the plugin, or any suggestion for improvement.