• X

    How to LazyLoad images to Improve Page Speed [WordPress]

    By in WordPress

    Bluehost hosting

    Blog pages with lots of images can take a lot of time to load. The loading time can be decreased by using the sexy lazyloading image effect. Lazyloading script loads images when all the other things on a page are loaded and shows them with a stylish fade-in effect. More over, you will see this effect on many high traffic site including mashable.

    Lazyload effect can be added using 2 plugins which I am going to share here while there is also custom code for thesis theme users.

    jQuery lazy load plugin

    jQuery LazyLoad plugin is a really simple solution to get lazyloading effect on your site. Just install and activate the plugin. No settings required. <Link>

    Installation:

    • Download jQuery lazy load plugin.
    • Upload it to wp-content/plugins folder.
    • Open installed plugin from you WordPress dashboard and activate the plugin.
    • Congrats! Check your site. You will have the lazyload image effect.

    Lazy Loader Plugin

    Lazy loader plugin is a bit advanced and give you a lot of control on where to use the lazy load image effect and where not. You can select whether to use the effect on homepage, pages, posts or everywhere. You can also change the effect from fade-in to scroll-in etc. ( Installation is the same as 1st plugin )

    LazyLoader Settings 550x345 How to LazyLoad images to Improve Page Speed [WordPress]

    <Download>

    Thesis Theme Custom code

    Now that’s why we say thesis is the best. Plugins can slow down your blog, that’s why I am sharing custom code which you can use in your thesis theme and have the lazyload effect without using any extra plugin.

    1) Download this script and placeholder image. <Link>

    2) Upload it to your server.

    3) Add the following code in custom.php file.

    function lazy_load_html() {
    ?>
    <script src="http://www.havefunforever.com/wp-content/themes/thesis_18/custom/scripts/jquery.lazyload.mini.js?cda6c1" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    if (navigator.platform == "iPad") return;
    $("img").lazyload({
    placeholder : "http://www.havefunforever.com/wp-content/themes/thesis_18/custom/images/lazyload.gif",
    effect : "fadeIn"
    });
    });
    </script>
    <?php }
    add_action('thesis_hook_after_html','lazy_load_html');

    4) Replace http://www.havefunforever.com/wp-content/themes/thesis_18/custom/scripts/jquery.lazyload.mini.js  with script location and http://www.havefunforever.com/wp-content/themes/thesis_18/custom/images/lazyload.gif with the placeholder image location.

    jquery Thesis 550x152 How to LazyLoad images to Improve Page Speed [WordPress]

    5) Go to Thesis Options >> Design Options >> Home Page Display Options and enable jquery library.

    6)  Go to Thesis Options >> Design Options >> JavaScript and enable jquery library.

    Well, that’s it. You will now be having the lazyload image effect in thesis theme blog without using any plugin.

    Lazy load is not the only way to improve page speed but there are many other things which you can do to improve your blog loading time. Here are some of the best tutorials from the past, which you can refer to improve your blog load time:

    Do let us know if you use Lazyload method to show your images, do you see any improvement in loading time of your blog after using Lazyload plugin?

    Get Free Blogging updates in your Email

    Article by

    Yousuf has written 7 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

    { 7 comments… read them below or add one }

    rakesh kumar

    That’s a great help Yousuf. Most of the time we are afraid of adding pictures due to loading time. Now this script will help us to add more relevant pictures inside our articles.

    Reply

    Yousuf Khan Jee

    Yeah, it’s really useful and I too add many pictures in my posts!

    Reply

    Suresh Khanal

    So, this means the images will load after the post text is completely loaded. Because this is using Javascript to load images, does it affect SEO? What will be when the browser JavaScript is disabled? Will they be able to see the images or not?

    Reply

    VISHAL

    Hey Yousuf,

    Thanks for the list of this great plugins.. I will try them :))

    Reply

    Paritosh

    None of the plugin are compatible with wordpress 3.2.1 and don’t work for all the web browsers. Moreover, IMO this plugin is useful for those on Shared hosting where limited transfer b/w is available and for Image intensive blogs. I used this plugin for a while and barely noticed any increase in page load speed.

    Reply

    Yousuf Khan Jee

    I have used it 3.2.1 and it’s working

    Reply

    Abhay

    Thanks Yousuf.
    Thats a great help from you.

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `