Kadence Blocks DOM Size – Will Kadence Blocks Slow Down Your Website?

We are here to talk about Kadence Blocks DOM Size and will Kadence Blocks slow down your website.

Gutenberg Blocks are awesome because they are lightweight? Well, not all Gutenberg Blocks are made equal, and the same goes for Kadence Blocks. We will be discovering the DOM Size for each and every Gutenberg Blocks by the Kadence Blocks Plugin.

DOM or document object model is an audit in the Google Page Speed insights. I’m pretty sure you have seen this before:

But if you haven’t, you are lucky.

So, what exactly is DOM, and how do they affect your page speed?

If you want to watch me in action, feel free to do so:

What is Document Object Model (DOM)?

Simply speaking, every single element you use on your page, be it a paragraph, a container, advanced columns, a link, an image, a button, or whatever, adds to the DOM.

But, here are some elements that constructs DOM:

• Nodes: Every element, such as an image, a link, a button, a paragraph, by itself are called Nodes.
• DOM Depth: The distance between each node and the root element is known as the depth.
• Child Nodes: Elements below each parent node are called child nodes.

Here’s an image that will help solidify your understanding.

Google Page Speed Insights will flag your page with the “Avoid Excessive DOM Size” if your web page have:

• More than 1,500 nodes in total
• A DOM Depth of greater than 32 nodes
• 60 child nodes or more under one parent node

Now that we know what DOM is, do you know every Kadence Block will add a different number to the DOM Size?

Let’s start with the DOM Size of a blank page, so that we have a based data for comparison.

How It Is Tested?

Based on the data provided by the blank page, we are going to add one block at a time to the blank page and run a Google Page Speed Insights Test.

The focus is on the audit called “Avoids an excessive DOM Size”, and we will record the changes of the DOM when each Gutenberg Block is added.

We will run a test on the default settings of each block, and then we will switch things up by adjusting every possible settings in the block to see if we can find the Maximum DOM elements each Gutenberg block can add to the blank page.

Take note that these tests are not meant to be definitive, but more of a guide for you to avoid or be aware of the pitfalls of adding or adjusting each Gutenberg Block from the Kadence Blocks.

Blocks that will NOT be tested (due to uncontrollable variables):

• Table of Contents Block
• Posts Block

So now, let’s start with the “Spacer/Divider” Block…

Spacer / Divider Block

The following shows the number of DOM elements added to a blank page:

Conclusion: The Spacer / Divider Block is a lightweight Gutenberg Block. It adds only 4 DOM elements by default, and when I’ve adjusted all the settings in the block, the maximum DOM elements added is only 9.

Advanced Button Block

Addition of Buttons

Conclusion: By default the Advanced Button Block is lightweight. But, as you make more adjustments, such as adding animations to the button, it will add more DOM elements and increases the Child Elements.

Also, every additional button you add, it will increase the DOM elements by 8.

Icon Block

Addition of Icons

Conclusion: The Icon Block is considered a lightweight Gutenberg Block. By default it adds 12 DOM elements, and no matter how I adjusted the settings of the block, the DOM elements did not change.

Further to that, every new icon added to the block will add 10 DOM elements.

Advanced Heading Block

Conclusion: In general, the default Advanced Heading Block is super lightweight, which is great! We don’t want our header to add lots of DOM elements to the page. However, as we adjusted the settings, the block becomes a little heavier. It adds 2 to the child elements.

Just beware that if you make adjustments to the block, make sure it doesn’t add to the child elements, because remember Google PSI flags this audit if a parent node has more than 60 child nodes?

What if you have 30 headings and sub-headings on your page that adds 2 child elements each, your page will immediately be flagged with the “Avoids an excessive DOM Size” audit.

Tabs Block

Testing Different Layouts

Conclusion: The minimum DOM Elements of the Tab block is 24 (based on one text block added to each of the 3 tabs – 1 text block equals 1 DOM Element).

The maximum DOM Elements for the Tab Block is 39, and every new tab added, it will increase the DOM Elements by 10.

Overall, the tab block is a medium weight Gutenberg Block, and Layout 4 turns out to be the heaviest out of the 4 layouts.

Info Box Block

Testing Different Layouts

Conclusion: The Info Box is a medium-weight Gutenberg Block by default, but the advantage of using this block is that no matter the adjustments, it will only add 2 elements.

Also, there is no difference in DOM Size regardless of the layout you choose.

Accordion Block

Conclusion: Another medium-weight Gutenberg Block that adds 23 DOM elements. But, between using the Tabs Block and the Accordion Block to display content, I would prefer the Accordion Block, because it injects lesser DOM elements to the page.

Icon List Block

Conclusion: The Icon List Block is considered a light weight Gutenberg Block. By default it adds 9 DOM Elements, but every item added to the list will add an increment of 6 DOM elements.

Testimonial Block

There are two types of Testimonial displays:

1. Grid
2. Carousel

The Testimonial Block, by default, is a medium-sized Gutenberg Block, and the more you adjust, the heavier it gets.

By adding just 2 more Testimonial items to the Grid, it adds a total of 111 DOM Elements to the page. And, switching the Testimonial display to Carousel, you will see the number of DOM elements increased drastically, with the addition of DOM Depth and Child Elements.

Conclusion: If you can, try to avoid using the Testimonial block. Use the Info Box Block instead. However, if you really want to use the Testimonial block, then choose the display your content with Grid, rather than carousel.

Advanced Gallery Block

For this test, I have added 2 identical same sized images (see image below) to the block:

And here’s the result:

Testing Block with Different Image Sizes

So, I have removed one of the images and replaced it an image with a different size. Here’s how it looks:

Conclusion: The Advanced Gallery Block is a lightweight Gutenberg Block by default, but it can easily bloat up the page when you have too many images added to the block.

Every image you add will increase the DOM Elements by 6. The Image size has no impact on the DOM Size.

Form Block

While adjusting the settings of the Form Block, I’ve turned on every possible settings, and to be honest, I think it is over the top.

We certainly do not need to use every feature or autoresponder from this block. Every feature that is turned on, a code will be injected into the block, and inherently, it increases the DOM Size of the page.

Conclusion: Better than using a page builder to create a lead capture page, because it will bloat up the page. The Form Block is a great alternative to a fast loading lead capture page.

The maximum DOM Size for the Form Block is only 26, and I am pretty sure when you remove all the unnecessary features, it will be somewhere around 22 DOM Elements.

Countdown Block

Conclusion: The Countdown Block is a medium-sized Gutenberg Block by default, and the maximum DOM Size for this block is 30. In general, I don’t think you will use more than 1 Countdown Timer on your page, so it is safe to use.

Row Layout Block

Nested Row Layout

Basically, a nested Row Layout will look like the image below. It is one Row Layout₂ stacked on top of another Row Layout₁:

Conclusion: When possible, try not to nest row layouts especially for pages or posts that do not require lots of design elements, such as a blog post or any articles that are competing for ranking on Google.

Because, the more you Row Layout you stack on top of each other, the more DOM Elements it add, and that affects the performance of your site.

Image Overlay Block (Pro)

Conclusion: The image overlay is generally a lightweight block, but if you want to use it on an “Image Heavy” page, which means a page that has lots of images, then you may want to avoid adding animations to it.

Split Content Block (Pro)

Conclusion: Split content is an awesome way for you to create sections like this:

With this block, you no longer need to play around with the padding and margin of the Row Layout to achieve this. It is easily created with Split Content.

Plus, this is a lightweight block by default, so Feel free to use it as you will.

Post Grid/Carousel Block (Pro)

Conclusion: By default, the “Post Grid/Carousel” Block is a heavy Gutenberg Block. As you can see, it adds a lot of Elements and it increases the DOM Depth and Child elements.

There are 4 layout options and 3 display formats. The most lightweight display format is the Grid, and the heaviest display format of all is the Carousel.

Carousels are known to slow down your webpage. So, if you can avoid using it, do so.

Generally, I would avoid using this block entirely (if possible).

Modal Block (Pro)

Conclusion: Personally, I love using this block because it can make my page look professional. For example, the default Modal Block comes with a button and when clicked on, it will trigger a popup where your content will show.

This is the simplest form of the Modal Block. You can even hide the button of this block and use it as a trigger. You can add the trigger to Gutenberg Blocks, like the Advanced Button or the Info Box, so when clicked on, the Modal Block will be displayed.

As I said, this is a very useful Block.

Innately, all the settings have already been set, so whatever changes you make will not add much to the DOM Elements.

However, the final DOM size of this Block depends on what you add to the content area. Even though the Modal Block is lightweight, if you add heavy elements in the content area, for example, a video embed, it will still cause your site to slow down.

So, use this Gutenberg Block with caution.

Video Popup Block (Pro)

Conclusion: The Video Popup block is a great alternative to the default YouTube Video Embed provided by the innate WordPress Editor. Using the default video embed, it could easily cause your site to slow down, and you may even get a 30+ rating on Google Pagespeed Insights.

With Video Popup, although you will not get a 90+ rating on Google Pagespeed Insights, you will get a high 80s rating.

By default, the Video Popup Block by Kadence Blocks will not slow down your website, but a video from external source, such as YouTube, will. The Video Popup helps to reduce that impact.

Advanced Slider Block (Pro)

Experiment A

In this experiment, I’ve only added a Text Block to the Slider. By default, 2 sliders are added to the Block, and it looks like this:

Experiment B

Continuing from Experiment A, I’ve added 2 Images, added an overlay on both images, and styled the text. Now, it looks like this:

Experiment C

From Experiment B, we have added another Slider Element and have styled it like we did in Experiment B.

Conclusion: More Slider items means more DOM Elements added to the page. For this case, it is 8 elements (change from Experiment B to C).

By default, the Slider Block is a Heavy Gutenberg Block because of the javascript codes added to make the carousel work. But, it is not as heavy as the “Post Grid/Carousel”.

The Post Grid/Carousel Block is heavy because it draws information from the internal database to be displayed on screen, but the Slider block does not.

Portfolio Grid/Carousel Block (Pro)

Conclusion: As I’ve said, whenever there is carousel, and it is drawing information from the database, it will add a lot to the DOM Size. I’ll try to avoid using this block when possible.

Will Kadence Blocks Slow Down Your Website?

To generalize why certain Kadence Blocks slow down the page, they are blocks that:

1. Draws information from the site’s database (i.e. Post Grid/Carousel Block);
2. Draws information from a third party source (i.e. YouTube Embeds);
3. Has the carousel display option;
4. Needs JavaScript to work (i.e. Tabs);
5. Uses animation

These are the main reasons why a supposedly fast Gutenberg Block will slow down a website.

Let me summarize for you which Gutenberg Blocks by Kadence Blocks are lightweight and which are not:

Thank you for checking out this article! I hope it has provided value to you.

Your friend,

Jack