Frontend Grid Loading Optimization Options

Normally when a page loads, it will also load any images on the page (including images used in the grid) immediately. But depending on the size of your images, in addition to other content on the page, this can sometimes slow down the initial loading of the page.

“Smart Loading” can be used to apply “Lazy Loading” to your grid’s images.  When this option is used, the images won’t load immediately when the page first loads, and instead, will be loaded after the other content from your page and the page itself has loaded.

To use this option, from the “Grid Settings” tab, scroll to the “Smart Loading” section:

If your grid has many items, the “Load More” is super-useful for speeding things up.  When this option is used, additional grid items get loaded into the page via Ajax, which means they won’t be loaded when the page itself first initially loads.

For example, if your grid had 100 items, you could initially show 10 items, and then only “fetch” additional grid items when the user clicks the “Load More” button (or “Infinite Scroll”).

Essential Grid has a built-in cache option which will cache the grid’s HTML markups, making them super fast for processing and loading into the page.

To use the built-in cache, from the plugin’s “Global Settings” section, set “Use Own Caching System” to “On”:

Because of this, after making any changes to your grid’s content or settings, be sure to click the “Delete Cache” button immediately afterward in order for the changes to appear on the front-end of your site.