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:
- Related posts/products
- Product reviews
- Gallery, table, inside posts
- Submenu inside mega menu
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:
<footer>Footer with copy right info</footer>
<div id="comments">Nice post!</div>
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.