Optimizing an LFD to improve loading speed

Get Help
1

In this article I will cover how to optimize your LFD to load a little faster. There are 2 basic ways you can do this and I recommend doing both to have the maximum impact.

Note: This will require changing the LFD component HTML and adding some JS to the screen JS.

Images optimization

Note: For this to work the images have to be stored in Fliplet and not in a 3rd party service.

In edit mode click to edit your LFD and click on the edit component HTML.

image
image748×276 15.6 KB

Change the HTML on line 7 to include this query paramter:

style="background-image: url('{{auth [Image]}}?&size=medium')"

See below:

image
image1822×1440 401 KB

Same in the detail template

image
image1822×1250 348 KB

Optimized list loading

You will need to add the following JS to the screen JS to enable lazy loading of list rendering

Fliplet.Hooks.on('flListDataBeforeGetData', function(data) {
  data.config.lazyLoadBatchSize = 10;
});

If you do these both, it should speed up loading of your LFD.

Hope this helps,
Deb