Itthinx LazyLoader

Download

Purchase to download it and obtain a license.

Description

The Itthinx LazyLoader plugin provides a versatile lazy loading mechanism for content that may improve page load time and bandwidth usage. Use it on slow content, especially such where external data is loaded like widgets from Facebook, Twitter, AdSense, …

Advanced lazy loading integration

The Itthinx LazyLoader provides an advanced asynchronous loading mechanism for content and widgets. This plugin helps to optimize site speed by greatly improving page load time and bandwidth usage. Instead of deferred loading in the footer, it provides advanced options that allow to load any content only when needed. These include shortcodes that allow to lazy-load content anywhere on a page, the option to load content on sight and an automatic noscript feature that helps to provide alternative content for visitors that have disabled JavaScript. You can see a demo of the Itthinx LazyLoader here.

In action

To get a clear idea on how the loader affects loading a page, let’s take a look at the following video which shows the loader in action. You can try the demo yourself here.

 

 

So what?

Site Speed

It took 44,85 seconds for the complete page to load, but the onload event ocurred at just 2,92 seconds! Without Itthinx LazyLoader’s help, the onload event would have ocurred much later. Site speed is a very important factor in visitors’ experience surfing your site and search rankings. If you’re not sure why this is so important, read more about it in Using site speed in web search ranking, where Google announced “we’re including a new signal in our search ranking algorithms: site speed“.

Better visitor experience

Often ads and other external content slows down the way your main content is presented to your site’s visitors. To visit a site that just takes too long to show the main thing is simply frustrating and usually results in one-time visitors – they’ve had it and won’t come back. The Itthinx LazyLoader helps you to avoid this mistake by letting your main content be presented before slower content is shown.

Content on demand

The content handled by the loader can be presented on demand or always.
It handles more than just images, virtually any widget or content that is placed within itthinx-lazyloader shortcodes.

Automatic and coding free

The loader works automatically on virtually any content and is completely coding-free. You do not need to understand anything about JavaScript, jQuery or PHP to use it. Just paste the markup within itthinx-lazyloader shortcodes and it will be handled by the loader. The shortcodes admit several options that are used to control how the content is presented.

Documentation

Browser compatibility

Tested and working at least on these and other browsers:

  • Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

Test environment details

Windows 7 : IE8, IE9, Opera 11.5, Chrome 13, FF 5.0, FF 6.0, FF7, FF8, FF9, FF10, FF11, FF12
Mac OS X : Safari 4, Safari 5

Linux (Debian Squeeze) : FF5, FF6, FF7, FF8, FF9, FF10, FF11, IceWeasel, Opera 11.10, Epiphany 2.30.6

Linux (Debian Lenny) : Iceweasel 3.0.6

Ubuntu : FF4

Android : Opera 11.1, Opera 11.5.3, Browser, FF6, FF7, FF8

75 comments

  • Hi,
    Just one question.
    As my site loading is really slow, I’ve just performed a test on Zoompf.
    Here is what it’s saying :

    Empty Response Body :
    – High impact
    – Easy to solve

    Issue Summary :
    This response contained no data. This usually indicates a broken or misconfigured web server or web application. If you really did not intend to return data to the client for this request (as is common for beacons for web analytics software) you should return a 204 HTTP status code instead.

    Affected URLs :
    http://www.oreille-malade.com/wp-content/plugins/lazy-widget-loader/css/lwl-widget-css.php

    Could you have a look ?

    Best Regards,
    Laurent

  • Hello,

    Many thanks for the great plugin concept. I’ve just donated but can’t seem to be able to get it to work. It is installed fine, I have set the following options:

    http://www.visicode.co.uk on the domain whitelist (my website domain)
    and i’ve selected the option for nested shortcodes. However, when I test the plugin by simply including the opening and closing shortcode tags, putting text or images in between; it simply shows this on the page!:

    [itthinx-shortdecode]IDxkaXYgc3R5bGU9IndpZHRoOjBweDtoZWlnaHQ6MHB4OyIgaWQ9Imxjc2l0dGhpbnhfbGxfMSI+PC9kaXY+IDxzY3JpcHQgaWQ9ImxjaXR0aGlueF9sbF8xIiB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPiAoZnVuY3Rpb24oJCkgeyBsQ1JpdHRoaW54X2xsXzEgPSBmdW5jdGlvbigpIHsgJCgiI2xjaXR0aGlueF9sbF8xIikuYWZ0ZXIoIjxkaXYgaWQ9XCJpdHRoaW54X2xsXzFcIiA+IiArICJcbiIgKyAiZGRkZGQiICsgIlxuIiArICI8L2Rpdj4iKTsgJCh3aW5kb3cpLnRyaWdnZXIoIklYX2VYIiwiI2xjaXR0aGlueF9sbF8xIik7IH07IGl0dGhpbngubGF6eUxvYWRlci5hV0xFTChmdW5jdGlvbigpeyBpdHRoaW54LmxhenlMb2FkZXIubEMoJCgiI2xjc2l0dGhpbnhfbGxfMSIpLCBsQ1JpdHRoaW54X2xsXzEsICJpdHRoaW54X2xsXzEiLCAwKTsgfSk7IH0pKGpRdWVyeSk7IDwvc2NyaXB0PiA8bm9zY3JpcHQ+PGRpdiBpZD0iaXR0aGlueF9sbF8xIj4NCmRkZGRkDQo8L2Rpdj48L25vc2NyaXB0Pg==[/itthinx-shortdecode]

    Not got a clue what is going on, any chance you could help out :)
    Jordan

    • Thanks to Jordan’s nice cooperation it was easy to figure out what went wrong and now everything seems to work just fine. If anyone stumbles upon issues, please contact me and I’m happy to help.

  • Thanks for your supprt kento, I had the same problem as Laurent and you solved it! Kudos Sir. ^^

  • Duc

    Can I pay by another ways by credit card. I can’t use paypal :(

    • Yes you can also pay with your credit card. When you click the contribution button, the PayPal page will give you several options to pay, including credit card instead of using a PayPal account. You should see the option “Credit Card” under “Choose a way to pay”.

  • Duc

    I used your plugin but I see it only works on function the_content()
    My site have some image from custom field so it not work on that, it also not work on category page with post thumbnail
    How to do that?

  • Moogle Stiltzkin

    Hi,

    I’m using Itthinx LazyLoader 1.42

    but i noticed when i enable this plugin, my site load time worsens, not improves.

    I uses gtmetrix and webpagetest to do the testing to find this out. Also not only just that, even browsing i notice the increased lag.

    Honestly i’m not sure if it’s just the plugins fault, or the default settings for it isn’t ideal for my site. Any ideas ?

    • It seems you currently have it deactivated. This performance report shows several issues that are not related to (or could be resolved by) lazy loading but most probably are due to server performance and how the site is set up. There is a +10 second delay in getting a response from the server alone after the main page is redirected to the site’s root. I’d recommend to first solve the most important issues the site/server have and then fine-tune with lazy loading.

  • Moogle Stiltzkin

    fair enough :X

    any ideas who i can consult regarding the things you suggested ? i too was wondering what the heck that 10 seconds thing was about :/

    • There are lots of options, e.g. use a caching plugin … but one thing I noticed is you have this Quick Chat, I would test the site with it disabled.

  • Ivica

    I have an compatibility issue between Itthinx LazyLoader (I bought your license) and Jigoshop e-commerce plugin.

    Namely, when I activate Lazy Loading for widgets and use Itthinx LazyLoader option (Load on sight and Automatic noscript option) all widgets are working nicely when Jigoshop plugin is INACTIVE.
    BUT, when I activate Jigoshop plugin, widgets are NOT VISIBLE at all.
    Then, if I deactivate one option in Itthinx LazyLoader (Load on sight), widgets are visible again even when Jigoshop plugin is active.
    QUESTION: can you do something with the Itthinx LazyLoader plugin in order that I can use simultaneously Load on sight option in Itthinx LazyLoader and that Jigoshop plugin is active?
    I need both plugins to work properly when they are both active. Thank you in advance for your prompt answer.
    BTW, I’m very happy with your plugins, they do what they are advertised for, and they do it very well so I sincerely hope you’ll be able to fix this compatibility issue between these (above mentioned) fantastic WP plugins.

    • Thanks for reporting the issue you have Ivica, let’s see if we can find out what happens. Could you please let me know:
      – your WP version
      – what theme you are using (and version)
      – which Jigoshop version
      – other plugins that are active on the site
      – the widgets with issues (do all widgets have problems or specific ones?)
      And thanks for the praise, it’s always nice to hear that :)

      • Ivica

        Dear Kento, thx for fast reaction. Below are requested details/answers on particular questions. As I performed testings on my local PC server (XAMPP), currently it is not accessible to others, but I started to build/clone on-line testing environment as well – as soon as it is finished I’ll give you all necessary details (including access details) if you could at least take a short look on it – I hope I won’t have to give up on such a this WordPress plugin,, not because I paid for it but as it is so useful! I’ll came back to you as soon as possible!

        – your WP version: 3.3.1 (latest)
        – what theme you are using (and version): Weaver 2.2.6 by Bruce Wampler
        – which Jigoshop version 1.1 (latest)
        – other plugins that are active on the site (more then 60 :-))
        – the widgets with issues (do all widgets have problems or specific ones?): ALL of them

        • Thanks for the details Ivica,
          I’ll have a look at how this works with the Weaver theme first, let’s see if that works as expected.
          Cheers

          • Ivica

            Kento, feedback for you – thx to fantastic guys from Jigoshop they solve one compatibility issue with Itthinx LazyLoader and Jigoshop plugin.
            Apparently an issue was on Jigoshop side and if anybody else run into problems like I did, here is the solution from the Jigoshop team:
            First deactivate LazyLoader, Itthinx LazyLoader & Jigoshop.

            Then in jigoshop.php, delete:
            add_action( ‘activated_plugin’, ‘jigoshop_plugin_loads_first’, 999 );

            Then activate your LazyLoader, Itthinx LazyLoader and activate Jigoshop. And that’s it!

            BTW, second issue (below) is still existing, but I’ll come back to you on this when I finish my on line test environment.

            • Thanks for taking the time to look into this yourself as well. Ideally you wouldn’t need to hack jigoshop.php so that things still work after an update without the need to touch the file again. I’ll have a look at that and the second issue and let you know.

            • Ok I’ve tested this on WP 3.3.1, using the Weaver 2.2.6 theme and these active plugins:

              Custom Post Widget 1.9.1
              Itthinx LazyLoader 1.4.3
              Jigoshop 1.1.1
              Lazy Widget Loader 1.2.3

              I did *not* apply the hack in jigoshop.php as suggested. $active_plugins = get_option( ‘active_plugins’ ); error_log(var_export($active_plugins,true)); results in:

              array (
              0 => ‘jigoshop/jigoshop.php’,
              1 => ‘custom-post-widget/custom-post-widget.php’,
              2 => ‘itthinx-lazyloader/itthinx-lazyloader.php’,
              3 => ‘lazy-widget-loader/lazy-widget-loader.php’,
              )

              Findings: With the above setup, the issues reported do not occur: Widgets are shown correctly (including those loaded on sight by LL), the issue you experience on the checkout page does also not occur. Based on that, I would say that there probably is a conflict with another plugin but no conflict between Jigoshop and LL.

              Please let me know when the test site is available online though, I’d be interested in eventually finding out what causes the issues you have seen on your setup.

  • Ivica

    And another issue discovered between Itthinx LazyLoader and Jigoshop plugin. Namely, when I activate Itthinx LazyLoader plugin he mess up the Jigoshop “Checkout” page in a sense that all fields on this page are not justified as they should be but all over the Checkout page.
    When I deactivate Itthinx LazyLoader plugin everything get back to normal, and the fields are justified and in order as they should be on the Checkout page. Can you help me on this too, please?

  • Ivica

    No, I’m not using any LazyLoader shortcode on that (or any other) page, just activate general plugin for the whole web site. But as I wrote in previous post, when I fully activate on-line test environment with the Jigoshop installed and setup up, I’ll provide you with the access details so you can take a brief look. I know that it is not easy to “recreate” the exact error especially in every environment, therefore I’m very thankful to you for offer support! Just another prove of wisely invested money in WP website speed. :-)

    • Great, please let me know when you’ve got it set up. And thanks for your kind cooperation :)

    • Findings posted in this comment. We’ll have a look when your site is available.

      • Thx Kento for your support and help! My test on line site is up and running, but I did apply mentioned hack in jigoshop php.
        Tell me on what e-mail address I can send you login acces details?

        Thx again!

        • Great, send it to the one on this page please.

          • Ivica

            Thx, I sent it :-)

            • Thanks Ivica, I’ve checked your site: what happens to your checkout page is that it’s not themed well. It’s not related to LL, you need to get the CSS right for the fields.
              Also you should not lazy load or load on sight all the widgets, there is no need to do that if they simply show small pieces of content that are pulled off your site anyway. Worse even, it adds overhead. It makes sense to lazy load (with or without loading on sight) only if you load content from slow sources or where you load substantial amounts of data that does not need to be shown unless a visitors comes to a certain part of a page.

  • Ivica

    Thx kento, but I couldn’t exactly agree with the below statement:
    “… what happens to your checkout page is that it’s not themed well”

    Why? Because I activated and deactivated Itthinx Lazy Loader plugin and you can see difference in pictures I sent you. On the picture with deactivated plugin formating is OK on the Checkout page and on the picture where the plugin is activated you can see that formatting is not ok.

    For second tip – thx, I’ll do it accordingly. :-)

    Thank you for your good will to help me on this issue, although the issue with Jigoshop Checkout formatting page stays. :-(

    • It really looks like there is something else conflicting, when tested with the configuration as mentioned in this comment, the checkout page is rendered correctly. Taking this into account along with the fact that things change when you (de)activate the LazyLoader plugin, in my opinion suggests that there is a conflict with another plugin.

      What I suggest is to do the following: 1) Deactivate all plugins except the following to start with a minimal basic setup based on what has already been proven to work, that is: using the original Weaver theme and these plugins activated: Jigoshop, Itthinx LazyLoader, Lazy Widget Loader – with these, the checkout page appears normally – subject to no changes have been made to either the plugins’ code or the theme’s. If, using this minimal configuration, your checkout page already shows the fields misaligned, then it is due to changes that have been made to the theme or the plugins. If not, proceed to 2) activate other desired plugins one by one, after activating each one, verify the checkout page.

  • Here I go again :-) Sorry for these few bugs reporting on this very good and helpful plugins of yours, but it is because I want to continue to use them, along Jigoshop.
    Namely, when I tested putting Jigoshop shortcodes on one web page, I found out that product image is not showing at all. After I deactivated Lazy Loader plugin product picture showed up (you can check it by yourself on the link provided).
    Can you help me on this with some usable solution, please? Thank you in advance!

    • That’s ok :) Sometimes it can be daunting to find out what’s happening … same thing applies to this as mentioned regarding the checkout page issue you see. Please let me know when you’ve checked that.

  • mel

    Hi, im interested in your plugin and have sent you en email about certain query but have yet to receive a reply. Hope to hear from you. Thansk

    • Hi, thanks, didn’t get to take a look at these until now. Regarding your questions:

      Can it be used around other plugins that uses shortcodes like slickr flickr and wp robot?
      It depends, in many cases it works smoothly, in some it may not work at all. Might be worth a try at least.

      … is there a way to ‘auto-add’ to all images …
      No, there are solutions based on jQuery for that which you might consider.

      Will it strain the server cpu?
      No it won’t if used correctly. Please see the notes and comments on when and when not to use it.

  • m3lvin

    ok kento, i tried on wprobot and flickr but it seems to mess things up. Im using shortcdes on them.

    I tried implementing the function on my template: sidebar.php (i do not want to use repeated shortcodes on that), single.php (div with social buttons), and it only loadup partially.

    example
    “true” );
    echo IX_LL_lazyload( $markup, $atts );
    ?>

    • Let’s have a look at that and see if it can be made to work smoothly. Looks like the comment filter (nom-nom-nom) ate part of the code you pasted in the comment, can you use e.g. pastebin please to share the code? Also I’d like to see how you have used it with the shortcodes (you can put that in a comment directly).

  • m3lvin

    the code was taken from your manual btw under api

  • m3lvin

    hxp://pastebin.com/NSwruqfq

    on sidebar and single template

  • m3lvin

    ? soory i din’t get that. must i still apply the shortcodes to that?

    • No, actually I was asking to see how you applied the shortcodes you mentioned in this previous comment: “…tried on wprobot and flickr but it seems to mess things up. Im using shortcdes on them” – what I would like to see is what shortcodes you have tried so that I can test them. Can you also give a link to the site you’re testing this on please?

  • m3lvin

    1) heed your advice on the not wrapping the whole sidebar. I reinstalled the widget plugin and there are 2 options:
    Lazy Loading
    Use Itthinx LazyLoader
    Lazy Loading must be enabled to activate this option.
    Which shall i choose or should i choose both?

    2) Please take a look at http://pastebin.com/GWk30zAz. This wrap is not on the sidebar but in single.php template

    I decided not to use on wprobot and slickr yet. Thanks

    • On 1) First try to use both options together, if it doesn’t work just use the first one (Lazy Loading).
      For 2) you need to change src="//platform.twitter.com/widgets.js" to src="http://platform.twitter.com/widgets.js"

  • m3lvin

    for 2) only twitter and pinterst is loading up but not facebook and g+.

    http://pastebin.com/QF4kJeLy

    Morever when i set the throbber to true, the throbber does not seem to be working.

    • The loader won’t allow the <fb:like ... > and <g:plusone ...> tags but you can use the alternatives as shown here. The throbber is there but you should check whether it is actually visible (probably depending on your CSS styles).

  • m3lvin

    Thanks, the social part wrks well now with your help, but what do you mean by depending on my css style? On the widget load plugin, it works fine but i cant get it working on the template. thanks

    • Basically, what I mean is that the throbber is there (I checked it on a test site), if it does not seem to appear on your site, it might be related to CSS.

  • Zach

    I’m trying to lazyload products on a site using woocommerce. I’ve inserted the code into the loop-shop.php template file, surrounding the which contains the products. Firebug shows that the ix-lazyloader-min.js script is loading but the images are not lazy loading — they are all loading immediately. You can see an example on this page: http://tinyurl.com/cznf5aj

    Here’s the modified loop-shop.php file: http://pastebin.com/LvsEZMZi

    Any ideas?

    • The lazy loading works but you are wrapping practically the whole content, so what happens is that once the products enter the viewport, the whole set is loaded at once. What you want to achieve should work as shown here http://pastebin.com/NJ8kfifm

      • Zach

        Thanks, your code is working! But for some reason it is loading the first 9 row/27 products right away, Only the first two are in the viewport when the page loads initially. Do you know how I could prevent it from loading so many?

        • How many are loaded at once depends on how many are visible in the viewport, you can assign a minimum height to the containers so that fewer are loaded. Anyhow, although I would actually rather load these in bunches anyhow, something like http://pastebin.com/yveTQ2PD

  • Zach

    That version made the page pretty much unresponsive. But no big deal, I will mess with the viewport sizing. I did notice that the AJAX layered navigation won’t display any images now that lazyload is working. Any clues as to how to fix that? I realize it’s not your plugin, but if you can point me in the right direction maybe I can get it sorted out. Thanks!

    • Would you mind applying that last version to a test page and posting a link? I’m curious to see how it reacts (I didn’t actually test the template myself). Regarding the AJAX layered navigation, I’m not sure what you refer to …

      • Zach

        Here’s the page running the last version you posted: http://tinyurl.com/6wn9gfy
        After it fully loads it is not unresponsive, but it’s pretty initially.

        The AJAX layered naviagtion is the “Product Types” widget on the right sidebar. When you click a type it filters those items. Looking at it again, it is sort of working with the last version, but I’m seeing lots of duplicate items. With the first version of the code you posted, it just wouldn’t display any items when you selected a type. If you remove the word “upgrades” from the URL you can see a page where it’s working properly (without lazyload).

  • livefreedietravelling

    Hi Kento,

    Just purchased your plugin, all working well, Thanks.

    I wondered if you knew how to lazy load a currently installed plugin via your script?

    I’ve got a pop-up subscribe plugin that shows at the end of the article, and is not needed to load straight away.

    I figured I’d ask for your help on this issue as I think that many people would probably experience similar issues.

    Thanks for any help you can offer,

    Regards,
    Paul

    • Hi Paul,
      Thanks for using the plugin, good to see it’s working for your site. Does the pop-up plugin you use provide a short code or API that you could wrap within LL’s?
      Cheers

      • Hi Kento,

        Thanks for getting back to me, apologies for the delay in my response.

        I’m currently using the Pippity plugin (http://pippity.com/), It does not use shortcodes or API’s that I’m aware of. Don’t suppose there is any workaround to this?

        Also, when debugging my site I get this error and cannot seem to work it out, any assistance would be great!

        wp-content/plugins/itthinx-lazyloader/lib/ix/class-ix-lazyloader-min.php:17 – DOMDocument::loadHTML(): Unexpected end tag : span in Entity, line: 12

        Regards,
        Paul

        • Hi Paul,
          If the plugin doesn’t provide a widget or means of wrapping its code within LL’s, then it’s not going to be possible to make them work together easily.
          What code are you using on the page with the error please?

          • Hi Kento,

            Thanks for getting back to me quickly, the error was reported to me via the debug bar. I’ve not changed or edited any of your plugin’s code.

            Error is being reported on all pages,

            Can you please be more specific on the information you require?

            Regards,
            Paul

            • I was referring to a possible use of one of the methods from the manual, for example the [itthinx-lazyload] shortcode – the error could be related to what is enclosed within it or a filter from another plugin that might interfere and introduce elements that modify the HTML rendered. I’d like to try the same as you have on the page to see what happens, if you can give access to the back end of the site that would be fine too.

  • wadelaube

    Hi Kento,

    I installed the LazyLoader plugin and have tried to use the shortcode approach. I’m finding, however, that LazyLoader isn’t recognising embedded shortcodes or html at all. The only thing I could get it to act on was an embedded YouTube video.

    (I use a theme called Blox and the main shortcode I’m aiming to use is for RoyalSlider, however I’ve also tried other shortcodes to confirm it’s not a problem specific to RoyalSlider itself.)

    I’d appreciate any suggestions you’ve got.

    Cheers,
    Wade

    • Hi Wade,
      Can you please post the code you have tried?
      Cheers

      • Wade Laube

        Hi Kento,

        Well, it’s a shortcode within a shortcode, so…

        [itthinx-lazyload]

        [new_royalslider id=”5″]

        [/itthinx-lazyload]

        …with no success. It loads the content as though the LazyLoad shortcode were not there.

        I’ve also tried HTML (text and pictures) with no luck. Could it be the theme?

        The site is not publicly accessible at the moment, or I’d send you a link.

        Thanks for any tips.

        Regards,
        Wade

        • It could be that they are simply not compatible, but before giving up on it, can you try putting the shortcodes all on one line and with no spaces? Like this:

          [itthinx-lazyload][new_royalslider id="5"][/itthinx-lazyload]

  • soodrajat1834

    Hi I just downloaded the lazy load plugin for wordpress

    I used the echo lazy load function in one of my divs to load posts

    When i use this function no content is shown at all . please help me with this

  • Hi Kento,

    Can you please let me know what the latest version of lazyloader and lazy widget loader is incase I need to update? Also, where is your changelog?

    Thanks,
    Paul :-)

Leave a comment

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

*

Please follow the Support guidelines.

Premium Support is available for customers in the Forums.