How to Lazy Render elements

Lazy Render is very similar to the lazy loading of images.

In lazy loading images, downloading of images is done only when needed, when they're inside or nearby the viewport.
Lazy Render works similarly. It will render elements on the page only when required. This way Browser can focus on rendering content in the above fold. Lazy Render will dramatically reduce Time to Interactive, Total Blocking Time and Largest Contentful Paint.

Ideal Elements to Lazy Render

Just like lazy loading images, you shouldn't lazy render elements in the above fold.

Elements like below ideal for lazy render:

  • Comments
  • Footer
  • Related posts/products
  • Product reviews
  • Gallery, table,  inside posts
  • Submenu inside mega menu
  • Ads

How to Lazy Render an Element

To Lazy Render an element, you've to specify the CSS selector of the element under FlyingPress -> CSS -> Lazy Render.
Here are some sample HTML elements and their selectors:
  • Element: <footer>Footer with copy right info</footer>
    Selector: "footer"
  • Element: <div id="comments">Nice post!</div>
    Selector: "#comments"
  • Element: <div class="gallery"></div>
    Selector: ".gallery"
If you've control over HTML, you can even add a class "lazy-render" to tell FlyingPress that it should render lazily.

Finding Selector using Browser Inspector

Right-click on the element and open "Inspect".
Find the right outermost element, right click -> Copy -> Copy Selector.