help center

On this page

Analyze Flexbox container performance

Last Update: January 10, 2024

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

Benefits Section Analyze Flexbox container performance 1

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

Benefits Container Analyze Flexbox container performance 3

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.

Benefits Section Dom Analyze Flexbox container performance 5

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.

Benefits Container Dom Analyze Flexbox container performance 7


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
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.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article