{"id":29073,"date":"2022-09-18T12:00:00","date_gmt":"2022-09-18T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29073"},"modified":"2025-09-02T15:40:56","modified_gmt":"2025-09-02T12:40:56","slug":"container-performance-a-closer-look","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/","title":{"rendered":"Analyze Flexbox container performance"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

Traditional method using Section \/ Columns \/ Inner Sections<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Using containers to achieve the same result<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

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 Structure window has been reduced. Learn more about creating this benefits\/services section.<\/p>\n\n\n\n

A closer look<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Results<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

DOM<\/th>Div Elements<\/th>Lines Of Code<\/th><\/tr><\/thead>
Section<\/td>37<\/td>105<\/td><\/tr>
Container<\/td>23<\/td>76<\/td><\/tr>
Total Reduction<\/td>14<\/td>29<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

 <\/h2>\n\n\n\n

Next steps<\/h2>\n\n\n\n

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<\/a>. <\/p>\n\n\n\n

To get the most out of Elementor,<\/strong> check out the Elementor Academy<\/a> for helpful learning resources. If you come across any issues or need help, please contact our Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb0dd614e3c27985e4bcd"],"footnotes":""},"categories":[1461],"tags":[],"class_list":["post-29073","post","type-post","status-publish","format-standard","hentry","category-performance"],"acf":[],"yoast_head":"\nAnalyze Flexbox container performance | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Analyze Flexbox container performance | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-18T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-02T12:40:56+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Analyze Flexbox container performance\",\"datePublished\":\"2022-09-18T09:00:00+00:00\",\"dateModified\":\"2025-09-02T12:40:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\"},\"wordCount\":376,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Benefits-Section-1024x364.png\",\"articleSection\":[\"Performance\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\",\"url\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\",\"name\":\"Analyze Flexbox container performance | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Benefits-Section-1024x364.png\",\"datePublished\":\"2022-09-18T09:00:00+00:00\",\"dateModified\":\"2025-09-02T12:40:56+00:00\",\"description\":\"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Performance\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/performance\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Analyze Flexbox container performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Analyze Flexbox container performance | Elementor","description":"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/","og_locale":"en_US","og_type":"article","og_title":"Analyze Flexbox container performance | Elementor","og_description":"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/","og_site_name":"Help","article_published_time":"2022-09-18T09:00:00+00:00","article_modified_time":"2025-09-02T12:40:56+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Analyze Flexbox container performance","datePublished":"2022-09-18T09:00:00+00:00","dateModified":"2025-09-02T12:40:56+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/"},"wordCount":376,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Benefits-Section-1024x364.png","articleSection":["Performance"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/","url":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/","name":"Analyze Flexbox container performance | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Benefits-Section-1024x364.png","datePublished":"2022-09-18T09:00:00+00:00","dateModified":"2025-09-02T12:40:56+00:00","description":"Learn everything about Analyze Flexbox container performance in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/container-performance-a-closer-look\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Performance","item":"https:\/\/elementor.com\/help\/elementor-editor\/performance\/"},{"@type":"ListItem","position":4,"name":"Analyze Flexbox container performance"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=29073"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29073\/revisions"}],"predecessor-version":[{"id":152169,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29073\/revisions\/152169"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}