Lazy loading ensures that components are only loaded when they are in the visible area of the browser.

This makes your page load faster, providing a better experience for visitors.

Good to know

We do not offer services, advice or support for your own code.

If you have technical difficulties with your website, remove your own code to check whether this is the problem.

Enable lazy loading for iframes

How to enable lazy loading for embedded iframes:

1. Embed an iframe.
2. Edit the code.
   1. Add the class lazyload.
   2. Replace src with data-src.

   3. Example:

      <iframe data-src="https://..." class="lazyload"></iframe>

3. Click on Save.
4. You can click on Preview in the header bar to see a preview of the changes in a new tab.
5. Click on Save in the header bar.

Enable lazy loading for embedded images

How to enable lazy loading for embedded images:

1. Edit the code.
1. Add the class lazyload.
2. Replace src with data-src.
3. Set data-original-width and data-original-height with the original size of the image.

4. Example:

   <img data-src="https://..." class="lazyload" data-original-width="2048" data-original-height="2048" />

2. Click on Save.
3. You can click on Preview in the header bar to see a preview of the changes in a new tab.
4. Click on Save in the header bar.