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

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.

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.

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 single image, you can add the “fk-disable-lazy” css class to that image. To add “fk-disable-lazy”, 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.

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

Enabling lazy loading to your page.

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

Note* Lazy loading cannot be disabled on background images.

Note* Lazy load on videos requires that the video be embedded inside an iframe.