Skip to main content

Lazy Render Elements

Updated this week

FlyingPress speeds up your site by delaying the rendering of complex or non-visible elements until they’re needed. This reduces the initial load cost and improves page responsiveness.

How it works

  • Our cloud optimizer automatically detects elements that are suitable for lazy rendering

  • These elements are assigned the CSS property:

    content-visibility: auto;
  • This is a native browser feature that skips rendering elements until they are about to enter the viewport

  • It reduces initial layout and paint time, improving overall performance

Benefits

  • Faster initial load

  • Reduced DOM rendering and JavaScript execution

  • Improved Core Web Vitals, especially Total Blocking Time (TBT) and Time to Interactive (TTI)

Excluding elements

If you need to prevent lazy rendering for specific elements:

  • You can exclude them by adding a keyword that matches part of the HTML element

  • FlyingPress checks the entire element (including tag name, class names, IDs, and attributes)

✅ Matching is partial and case-insensitive
Regex and wildcards are not supported

Examples:

<div class="contact-form-section">...</div>
<div id="map-block">...</div>

To exclude these, you could enter:

contact-form
map-block

Notes

  • Lazy rendering is applied only to elements below the fold

  • Critical content above the fold is not delayed

  • No manual setup is required—FlyingPress handles everything during caching

Did this answer your question?