Speed Up Your Site With WordPress Lazy Load Plugins

December 7, 2012 · 7 comments

by Lars

wordpress-lazy-load-plugins

With WordPress lazy load plugins your website serve content only when it is visible to the visitor. The lazy load technique is opposite of what is known as content preloading. It is quite popular and used on many high traffic websites to lower bandwidth usage and to ensure the visible elements are served first, check out huffingtonpost.com to see the effect. It is great for user experience and stable operations. Lazy loading content often applies to images, but recently it has become very popular to integrate interactive social media buttons everywhere and they are potential performance killers!

It is a known fact that shorter loading time on a website has a positive effect on the number of visitors. With a website that loads significantly slower than average, you may miss out on customers, subscribers and even search engine traffic. There are many factors that influence how fast a WordPress website loads, but luckily we are able to work around most of them to give visitors a great experience. First step is usually to install and configure a general purpose cache plugin like W3 Total Cache or WP Super Cache. Simply speaking, caching plugins like there improve the load time by serving a cached version of a page. However, they also help us minify and combine CSS and JavaScript into fewer files, enforce browser caching etc.  Browser caching in particular is important for websites with many heavy images as images are served from a local cache on subsequent requests. On the first page view, however, every image needs to be downloaded. It is not easy to get around this, but to improve the download time you can compress the images, use smaller versions of the images and offer the originals using a lightbox plugin, use a content delivery network and finally lazy load plugins to serve images just in time. This article, list the lazy load plugins currently available for WordPress. I installed and tested most of them, and I must say… it is probably a lot easier to add lazy loading than most WordPress site owners think.


ElegantThemes
ThemeForest

Advertisement
Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

BJ Lazy Load

BJ Laazy Load replaces all your post images, post thumbnails, gravatar images and content iframes with a placeholder and loads the content as it gets close to enter the browser window when the visitor scrolls the page. It uses jQuery and degrades gracefully for non-js users. It works with both images and iframes. You are able to control what content elements to lazy load and where the script is inserted. This is quite nice.

bj-lazy-load

WordPress Advanced Image Lazy Load (premium plugin)

This plugin provides a better user experience by delaying the load of images in (especially long) web pages. Images outside of the visible portion of the page that the user is viewing wont be loaded before the user scrolls down to them. The plugin support all WordPress images even those from plugins, sidebars, theme featured images… Just make sure your images are standard img tag and are not dependent on some advanced JavaScript event like e.g. slider plugins.

Please note that some themes that are based on an advanced framework may use an image preload mechanism that may break the lazy loading script. There is a lot of options and settings available on this plugin. You can control what posts and page the script applies to and if it should be used on mobile devices etc.

wordpress-advanced-image-lazy-load

Lazy Load

This plugin gives you lazy load of images to improve page load times. It uses jQuery.sonar to only load an image when it’s visible in the viewport. There is no options or setting to make, once the plugin is activated your images will load only when visible.

jQuery Image Lazy Load WP

Another really simple and no options available lazy loader plugin for WordPress. It is based on the Lazy Load jQuery plugin and may seem outdated at first. However it works great on recent versions of WordPress.

Lazy Widget Loader

Lazy Widget Loader provides lazy loading for widgets to improve page loading. It is useful for holding back slow widgets e.g. with content from external sources like Facebook, Twitter and AdSense.

lazy-widget

YS images lazyload (Server Side)

Inspired by jQuery lazyload plug-in, but due to different browsers can not guarantee that images are lazy (like chrome), so using server-side image src attribute changes to ensure that all browsers can support. YSLazyload lazy picture, only loaded after DOM elements finished, and to determine the current window to load and save your bandwidth resources. Since changes in the service side image src attribute, so compatible with all browsers. Note: Make sure your browser supports javascript and your blog should supported jQuery library

WP YouTube Lyte

WP YouTube Lyte allows you to “lazy load” your video’s, by inserting “Lite YouTube Embeds”. These look and feel like normal embedded YouTube, but only call the actual “fat” Flash or HTML5-player when clicked on, thereby reducing download size & rendering time substantially when embedding YouTube occasionally and improving page performance dramatically when you’ve got multiple YouTube video’s on one and the same page.

MooTools Image Lazy Load (Tested: and I’m not sure it worked on my demo WordPress 3.4.2)

This plugin adds lazy loading to WP images and use the Mootools Lazy Load plugin, however I was not able to see the lazy loading as with all the plugins above that I tested.

Ai Loader (Tested: and did not work on my demo WordPress 3.4.2)

Once I activated this plugin  was not able to save blog posts due to a runtime error!

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 7 comments… read them below or add one }

?ALUZJE ELBL?G April 10, 2013 at 7:45 am

It is exactly what I have been seeking.
Great thanks for the author for such thorough amplification of that topic.

Reply

Paul March 8, 2013 at 8:18 pm

Another good way to speed up loading your images is to use a CDN with your WordPress site.

Reply

Govind Choudhary December 26, 2012 at 2:12 pm

Great list of plugins to speed up blogs.I’m gonna try these plugin to speed my site.Thanks for share :)

Reply

andreivictor December 12, 2012 at 9:50 pm

thanks for sharing this article. it helped me a lot on my current project.

best wishes for you and for all your readers!

Reply

annesofie December 13, 2012 at 9:29 am

Hi Andrei, thank you for your comment. We’re just glad you found the article useful.
Best of luck with your project!
Regards, Sofie

Reply

Dubai website design December 11, 2012 at 11:53 am

Excellent Plugin. I liked that.

Reply

Harsh Vardhan December 10, 2012 at 9:03 am

I feel choosing the right theme plays an important role in loading time of a website. The plugins that are mentioned in this post looks good and useful, I am not using any plugins to enhance the loading speed of my website as off now but I might use some in the future.

Reply

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=""> <strike> <strong>

Previous post:

Next post:


Web Analytics