Lazy render elements

The "Lazy render" elements feature in FlyingPress allows for elements on a page to be skipped during rendering until they are actually needed by the user. This can significantly improve page load time and speed up the website.

There are three ways you can lazy render in FlyingPress.

1. Using page builders

We've integrations with the following page builders:

Gutenberg
Elementor
Divi
Oxygen
Breakdance

Select the element you want and enable "Lazy Render" from the settings.

Here is an example in Elementor:

2. Using "lazy-render" CSS class

Add the CSS class "lazy-render" the element you want to lazy render.

Example in code:

<div class="lazy-render">
  ....
</div>

Example via Bricks page builder:

3. Using CSS selectors

Enter the CSS selector of the element you want to Lazy Render in the FlyingPress CSS settings.

Only basic CSS selectors are supported. Selectors that involve nested elements, such as #container > .section -> .reviews, or complex rules, are not supported.

For example:
- footer keyword targets <footer>
- #comments keyword targets <div id="comments">
- .container-123 keyword targets <div class="container-123">

Avoid applying lazy rendering to child elements when the parent is already lazy rendered
Elements which rely heavily on JavaScript may not render properly

How to verify lazy render is working?

FlyingPress wraps the lazy rendered elements in a <div data-flying-press-lazy-render ...> ... </div> tag.

To verify, search "data-flying-press-lazy-render" in the source code (Right-click -> View Page Source).

Updated on: 27/02/2024