CSS Rendering Performance Improvement in Elementor 3.0

Elementor has two ways for rendering website CSS: 

  1. Printing it in a <style> tag in the DOM
  2. Writing it to a CSS file that will be loaded with the page

The CSS written to files, for example, is completely static. It is printed once into a file, and that file is only updated when a change is made to the page’s content.

But what about dynamic content? Some dynamic content includes its own CSS, such as colors and images (when used as background-image values). Dynamic content, such as custom fields, is disconnected from the page’s content, and can be changed outside of editing the post or page in Elementor Editor. So what happens when dynamic values include CSS that needs to be printed every single time a page is loaded?

Up until Elementor 3.0, whenever a page was loaded, Elementor’s Dynamic Tags module scanned the entire page for any elements that include dynamic content. If dynamic content was found, the module fetched that element’s dynamic values, wrote the relevant CSS into a <style> tag, and injected it into the DOM. This, as described in the elementor.com blog post, is an expensive process, costing precious loading time.

In Elementor 3.0, we changed the way we manage the rendering process of dynamic CSS. On the first time a page is loaded, when the page’s static CSS is rendered, we create a cache which includes a list of the page’s elements which have dynamic CSS values. Then, whenever that page is visited, we fetch the list of dynamic elements from the cache, and render them immediately. Instead of having to iterate over all the elements of the page every single time the page loads – we get those elements from the already-available list of dynamic elements. This saves a lot of run time and makes page load noticeably faster.

Here are some results from tests we ran on Blackfire to examine the difference before and after our optimization:

Page with no dynamic content at all:

Page with dynamic elements:

Liked This Article?

We have a lot more where that came from! Join 2,333,586 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Udi Dollberg
Udi Dollberg
Udi is a talented developer in Elementor’s Editor team and loves cars, woodworking and classic jazz.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss an update
Subscribe to our developer’s newsletter for every latest update