Container performance – A closer look

Introduction

In the following example, a section was imported from the kit library that uses the traditional Elementor section. A Container will then be used to replicate the same result. A basic comparison between the two can then be established. 

Traditional method using Section / Columns / Inner Sections

The above example shows a section with five elements using the traditional method. A heading widget is placed above an inner-section with four columns. An icon box widget is then placed in each column of the inner-section and adjusted with padding. This achieves the desired result.

The disadvantage of using this method is that it produces a lot of div elements in the DOM. With performance being a key ranking factor of search results, developers need a better method to help reduce these.

Using containers to achieve the same result

The above example achieves the same visual results on the page however, this time a container is used for the five elements. As you can already see, the amount of elements in the navigator panel has been reduced. Learn more about creating this benefits/services section.

A closer look

This is a closer look at the DOM of the traditional section. As you can see, quite a large number of nested div elements are created by these five elements in the section.

This is a closer look at the DOM of the Container. By using flexbox to control the layout and widths of the child elements, the number of div elements has been reduced. This will result in a much better page performance.

Results

This is a result of the above comparison for Sections and Containers. For this we will only be comparing the output of the HTML. The reduction of CSS is not compared at this time.

DOMDiv ElementsLines Of Code
Section37105
Container2376
Total Reduction1429

 

Next steps

Now that you’re an expert on improving performance with containers, let’s take a look at one of the container’s exciting new features – that fact that you can make them clickable.

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page