Reduce DOM Size In Elementor Achieve 15% Faster Page Speed

Reduce DOM size Elementor
Play Video

One of many ranking factors in search engine algorthms, is page speed. One of the factors is the amount of code it takes to render the page or DOM. To reduce the DOM size in Elementor up to Version 3. As of the newest updates (V3+), Elementor includes an option within the page builder to do this.

Our beloved Elementor, what difference it has made to the web development process, it is so much faster now to build a site, duplicate, make templates and duplicate them and create custom themes lightning fast. We make more money, the clients save more money, everyone wins right?

All of that convenience does however come at a cost, and that is page speed. Google has admitted that page speed is a ranking factor, how much of a factor? Well we will likely never know, however, we do know it as a huge impact on bounce rate, customer experience and conversion rate.

Each new section you create in Elementor, creates 3 DIV classes, then each column and widget class are added into it. That’s a lot of HTML creating the structure around our content, before we even egt started with our precious content, widgets, images and all the cool elements we like to use.

Consider this, rather than adding that inner section to deliver a row on top of two or more columns, what if there was a way do do away with the extra section, and reduce that extra HTML without losing any functionality, thereby, helping just a little more to our page speed.

Well luckily there is! It does take just a tiny bit of simple CSS added to your page/section/column, but relax, I’m about to show you just how simple it is.

First, let’s create a new section, and for this example, add 3 columns, I’ve added a spacer widget to each one, and some background colour just to make it easier to visualize.

Elementor New Section 3 Columns

Now for the exercise, try to set column 1 to 100% width:

Left mouse click on the column >layout tab > width: 100%

This is where something interesting happens, Elementor automatically reduces the width to 10%. However, this is only in Desktop mode, Tablet and Mobile work just fine. So to start with, the first thing we want to do is set the first column to 100% using custom CSS.

Left mouse click on the column >advanced tab > custom css > 

selector {width: 100%;}Elementor Column 1 CSS

I then set the other 2 columns to 50% width using the same code:

selector {width: 50%;}

For those that don’t know, Elementor has a handy feature when adding custom CSS, rather than writing a long list of class names, we can use the term “selector” which will automatically assign the CSS to whatever element is selected, cool right!

As you can see, we still have the columns in a line, and what we should have is the column with 100% width, stretching the whole way across the row, the issue is that the without a paramter, the flex-box property will try to fit all the items ontoa single line. Armed with this knowledge, we can add one more single line of custom CSS code, however this time we add it to the section.

Left mouse click on the column >advanced tab > custom css >

selector .elementor-container .elementor-row {flex-wrap: wrap;}

Elementor Columns Flex Wrap

The result can be as significant as a 25% reduction in the

DOM size in Elementor

: *following image taken from Elementor website

DOM Size In Elementor

There it is! We now have the option to fully control the columns the way we want. If you’re interested in seeing an awesome video on this procedure check out OohBoi on this link.

*Note: This is applicable up to Elementor Version 3.0, the new versions have options to reduce the “HTML Bloat.”

 If you are interested in more tips, or need some help with your sites, drop me a line.