# Lazy Loading

Checkout Champ automatically implements “lazy loading” of images, videos, and background images. Lazy loading means that images, videos, and background images will not be loaded in the browser until just before they are visible. This creates significant improvement in page load speeds, as the device loads only content currently visible on the screen.

To further improve page load speeds, try using the WebP image format. WebP is an image format with superior compression and quality compared to JPEG and PNG. Using WebP rather than JPEG or PNG means your images will load faster and consume less cellular data.

Learn more about WebP, here: [WebP Image Format](https://developers.google.com/speed/webp/)<br>

{% hint style="info" %}
Please note: Lazy loading is not supported on Checkout pages without adding the “force-lazy-load” class to each element you would like to delay.
{% endhint %}

#### Disabling Lazy Load

**Disable by funnel**

To disable lazy loading on an entire funnel, go to the funnel Settings > Maintenance page. There is a checkbox to disable.

<figure><img src="/files/inRxIqiVgyGpg5BElmN7" alt="" width="563"><figcaption></figcaption></figure>

Please note: Disabling lazy loading in the funnel settings does not immediately disable lazy loading for existing pages. Once the “Disable lazy loading” checkbox has been selected, you will need to resave any existing pages prior to publish.

**Disable by page**

To disable lazy loading on a single image, you can add the “fk-disable-lazy” css class to that image. Click on the image or element you want to disable. Notice the classes input bar above the element settings menu.

Then simply type in **fk-disable-lazy** and hit enter.  The new class will remain visible in that box.

<figure><img src="/files/fJBCc7aAjxZ8C753CuJN" alt="" width="563"><figcaption></figcaption></figure>

You may also go into the Code Editor and add the class **fk-disable-lazy** to the element.

#### Enabling lazy loading on your page

Alternatively to add lazy loading to an image, just follow the steps above, but instead of **fk-disable-lazy**, type in **fk-lazy.**

{% hint style="info" %}
Lazy loading cannot be disabled on background images.
{% endhint %}

{% hint style="info" %}
Lazy load on videos requires that the video be embedded inside an iframe.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/lazy-loading.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.