# Optimizing an LFD to improve loading speed

**URL:** <https://community.fliplet.com/t/optimizing-an-lfd-to-improve-loading-speed/677>\
**Category:** Get Help\
**Created:** [August 12, 2024, 2:05pm UTC](https://community.fliplet.com/t/optimizing-an-lfd-to-improve-loading-speed/677 "2024-08-12T14:05:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [August 12, 2024, 2:05pm UTC](https://community.fliplet.com/t/optimizing-an-lfd-to-improve-loading-speed/677/1 "2024-08-12T14:05:43Z")

</div>

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](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/129f4c9ad94e4d86d1ddb0d1169b83c15af5f092.png)

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

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

```

See below:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/bfdd81ee577dca9b2642370ff08246f792750cbb.png)

Same in the detail template

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/a3badb90c4c5945e6735956dcf1dac5e06c6a2c2.png)

**Optimized list loading**

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

```js
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