Note to authors: Lazy loading is needed more with complexity of sites.

People like sites that pop, have eye candy etc…So either more plugins with lazy load are needed, or themes. Here are a few suggestions.

Plugins:1) A lazy load plugin that works 2 ways. A default which can be set to the customer’s idea of how close or how far into the view port the rest of the page loads. Not just photos, the whole rest of the page. Text, pics, videos. Doing it this way can allow the site builder to customize a complex page to load quickly because the part that has a lot to it is not loaded upfront. The benefit is not only a fast loading page, but for devices of the person loading the page, it did not waste a bunch of data bandwidth on a page he just loaded and if they are not interested in the rest once the loaded part is seen.

  1. A manual option that overrides the default where shortcode can be use to make 2 separate points.

a) The lazy load (stop point). Which will determine exactly how much of the page will load before it’s scrolled. Short code would look something like this “lazy-stop”. Actual scrolling activates the next lazy load section. If need be to make it easier maybe name each section. Might make the coding easier. Like part that loads when page first loads is lazy load section one. And so on.

b) Then a short code that is the start point for the next lazy load section. Like a load more button without the button. This way each section can be customized to load as quick as possible. Each section to have a view port setting as to when to load the nest section as the page is scrolled. That way you don;t get 2 sections loading at once. Also have a separate setting for devices that works the same way so the mobile part can be defined and optimized as well.

c) And because the designer would want every section to load as quick as possible. have it to where if there is an empty space between sections (because next section is heavy loading) that an option to use an animated arrow pointing downward to the next section for the reader, so they scroll and not think that was it. So the next section loads if the reader wants to see it. And to make the plugin really good smooth scrolling. Maybe some type of animation so the page does not jerk as you scroll with the lazy loading. The reason I say this is because pages that animate along with lazy load seem so scroll much more smoothly.

  1. Lazy loading tabs. I figure there are 2 ways this can be done.

a) Actual lazy loading per tap once clicked on.

b) Have each tab have it;s own url. What I mean is: Have the main page url and default each tab with a number. Such as: Main url + the # 1 for tab one etc… And have a custom setting that allows the default number system overwritten if the site builder want to use names instead of numbers on the end of the main url. I’m not well verses in how SEO works. But if it friendly to use it like this or another way then whatever works. But the advantage for the programmer using this method is it will work well with other plugins. Because all you are doing is adding URL’s. And the new URL does not load until the tab is clicked on.

Side note: The tabs with this option are basically just links to a sub-page. But because it does not load with the rest of the page the tabbed pages do not slow up the loading of the main page. So this would be like a page within a page. So instead of a load more button this would be a load more tab. But from the prospective that it has it’s own url. And because this could effect SEO have a no index of the tabbed url option so the sub-page is not indexed as a main page on search engines.

  1. Caching and lazy loading. Some caching plugins do not work well with lazy loading. So have a short code like “no-cache” the site builder can use to solve the problem. Which also solves the problem of every wanting support for it. Oh here’s an idea. Like the lazy start and stop point. Have a no cache start and stop point. This would allow things that caching does not effect to be cached while others things that don;t load right like animations can skip being cached. If this could be implemented into the rows in VC, man that would allow a lot of problems to be solved on so many things by the user.

  2. Widgets. Widgets are getting very complex also. And many types really slow down a pages load time. 2 options here:

a) A check box to lazy load the whole widget. Having this option makes it to where the site builder can choose not to lazy load some while lazy loading others. Because why lazy load the widgets at the top of the page that load with the page confusing some browsers?

b) Loading delay in seconds or milliseconds. Not sure which would be best I’m not a coder. But having the option to check a box to delay the load of widgets that are in the top of page can allow the main part of the page to load much quicker. And if the site builder wants to be fancy he can set widgets to load up in a certain order as well.

c) And having it to where both can work together makes to where even the lazy loaded widgets further down the page can be set up to load in a certain order as well.

Probably the best way to integrate this would be to add this option to the row option in VC. It could go something like this: Would you like this row to lazy load? Check box if you do. Default view port is this would you like to change that? Making the whole row lazy load means everything in it has to lazy load. And if caching happens to be a problem just have a check box for no cache.for each row.

Side note: Having a mobile check box on each widget to drop down a menu to customize how the same widgets load for mobiles would be great. Or just the check box option: Lazy load the widget for mobiles? One note and I’m not sure how this would be done because the theme controls this. But if there was an option to load either widgets first to the top of screen, or last would be a great option. Because that seems to very from theme to theme. Being able to control what the mobile visitors see first would be great. Because most would choose the page then the widgets.

And instead of making this a 2 topics I’ll go ahead and add my other idea.

Asset management.: 2 things. Either a number order or drag and drop order of how the assets load. And a millisecond delay option to control render block.

Now you add both plugins to one site and the person setting them up does it right. Do you know how fast and how smooth a page can load with options like this to take almost total control over the page loading? If someone built such plugins or plugin I certainly would be your first customer.


It’s really good feedback. Would love to see an Author give their two cents…

1 Like

After thinking about this a little longer I not only came up with some more ideas, but some problems and solutions that need to be added to such a plugin (added to the original post). I’m not a coder but I have tried several plugins because I like to experiment. And I have seen the good bad and the ugly lol. But these were options I found in some plugins that if implemented in combination would really be something. The easiest way I think would be adding some of these option to the row sections of VC so what’s in that row is easily controlled separate from the rest of the page. I mean the row already separates other design option why not add to it? Or make a problem solving row. Where sections of a page that are a problem can be added to a special row that has problem solving features while the rest of the page stays in the normal rows…

Example: An element that does not animate because of caching code be put in a row with the no caching check box checked. Problem solved.

An element that does not work well with lazy loading. Put in a row where lazy loading box is not checked problem solved.

Elements that conflict on the same page, another idea that just came to mind while typing all this. But have a row option of a sub page aka page within a page loading. So the element that’s not working well with others is separate so conflict resolved. That could be a check box for the row that the element that has the conflict can be set in where it’s code is no loaded to be in conflict with any other code. If someone could write a code to do this with VC you know how many problems that would solve?

You guys do not realize how having those rows having such options could solve so many problems. And making it just a check box so it can be tested to see if problem solved is about as user friendly as one can get.