Improving TBT, LCP, and Time to Interactive with Lazy Elements

As of v1.4.2, ToolKit > Booster > CSS now has a new feature called Lazy Elements.

Lazy Elements works a lot like Lazy Loading images- it renders the content once it enters the user’s viewport. The main difference is that Lazy Elements works on HTML elements via targeting CSS Selectors that you define!

This allows Elementor users the amazing ability to:

✅ Drastically reduce Div’s and DOM’s by lazy rendering elements below the fold
✅ Significantly Improve Time to Interactive, TBT, and LCP metrics
✅ Improve mobile performance

Lazy Elements: CSS Selectors

In order to help ToolKit lazy render a particular HTML element, you’ll need to provide the CSS selector for your selected element.

1) To locate and get the CSS selector for your element, simply right click on that element in your browser and click Inspect:

Right click, then click on Inspect

2) Then select + right click on a div in the Inspector results > Copy > CSS Selector

Right click on a selected div and click Copy > CSS Selector

3) Now that you’ve copied your CSS Selector onto your clipboard, go to:
ToolKit > Booster > CSS Optimizations > Lazy Elements and paste your CSS selector into the field:

copy and paste your CSS selectors into ToolKit

Helpful Tips:

Lazy Elements is a powerful feature and should be tested with caution. Attempting to load too many elements to lazy render can have the opposite intended effect.

Here are a few tips to help you maximize your use of the new Lazy Elements feature:

✅ Only use Lazy Elements on HTML elements “Below the Fold” (not in the viewport)
✅ Lazy rendering parent divs will also lazy render the inner divs.
✅ Don’t forget to assign height and width attributes to all elements whenever possible, to reduce CLS issues.
✅ Some excellent elements to use Lazy Elements on include: comments, footer, and other heavy elements below the fold