I have Elementor Pro but I do not have the option "Positioning" I have to find out why I don't have the option, because i really need to decrease my DOM size badly. I will be back to follow these instructions!
Thanks for sharing, but this does not seem to work in Elementor if there is more text (e.g. a couple of sentences). What works instead is to choose "Custom" (Positioning -> Width -> Custom), then set the custom width to 50 % (for both elements).
Hi Adam, It was a great watch! I faced this issue with my website a few months back, and it was due to DOM size. I learned a lot from this video, and I love the tip you shared. I am sure this will help a lot of people including myself. I think the DOM size is often overlooked, and it has an impact on the website. I am sure this tip will definitely work, and I will be sharing this in my network to help others on my list as well. Thanks a lot for such a great share!
Great video! I was actually looking at how to improve site speed & DOM by reducing code. Wish to have a full dedcated speed performance video to improve site speed and ranking. As always, great informative video. Thanks again for a valuable video!
Thanks for this. I'm using Thrive Architect and I'm considering ditching it because of huge DOM size and slow loading. A video using thrive would be great
Been trying this approach... and saw a limitation, is if you want an image on 1 column and mixed content on the other... i.e. an icon below the heading. you'll end up 3 inline in 1 row. ( I hope elementor can offer a div wrap. )
So the way you deal with that is quite simple. Use an icon box, or info box, they all call them differently. That is how you would get your desired result and it will be more optimized that using 3 separate Elementor modules.
Nice tips and i get the point... This is bordering on over correction though. If you are building sites with WordPress you are already not optimized for "performance." Lets be honest if your main concern is performance you should be building with nodejs. IMO just build with 2 divs if its easier for you. Or take the time to learn to code..You should be caching everything to the max anyways. With a cdn and a reverse proxy caching a couple extra bytes aren't going to change the experience of your users... kind of tired of obsessing over Googles latest carrot on a stick. Id rather save the time grabbing an envato template kit and spend a little more on hosting and nitropack or rocket. Either way you get 98s and you can take the rest of the day off. 😉
Agreed. Save a container if you can, but adding a page builder or block plugin to do it undoubtedly brings more unused CSS, which Google Lighthouse is going to yell about much more than a couple of extra divs.
Question: If you design a website in Node with no builder, does this limit non-coders from making basic edits? I think this is why builders are so popular.
Adam, that is an awesome video. As an old timer in building sites I was definitely making to many containers, I blame it on being around since the beginnning and having to fiddle with tables to place stuff. Lol I try to update and stay current. I missed this change. Thanks so much!!
Why do builder companies make the 'wrong way' the frictionless default? It's non-intuitive compared to rows & columns, but this layout makes sense. We use Divi a freqently and it appears to be notorious for bloating the DOM.
Thank you very much. I have learned a lot from your video even though no one else has learned from your video. It would have been great for me to make a video with the Educavo theme. From today I am a fan of yours.
Hi, the guide is excellent, there is only one problem when you try to place an image next to an image and switch to mobile, it cannot be done. Even after determining the images within the row. They always go down one below the other
Thanks for this great tip Andy. Your videos are so good and to the point. I have a request for a video on the correct steps and the pitfalls to avoid, to gain Facebook and Amazon approval as it is, apparently, a minefield. Not directly about WordPress but it is definitely needed.
Thank you for this video. How do I removed excess html code from my wordpress theme using elementor? I am getting a warning from google and bing regarding this.
This is not working for me. When I get to the inner block - horizontal or vertical does nothing and the slider does nothing, Did you leave out the inline positioning for kadence? I get nothing-can't make the heading and the image side by side, and I am in the section part.
Over bloated DOM is definitely an issue with many WP themes and page builders. Yea, save a container when you can, but removing one or two divs is not going to massively improve your page speed. Especially if you need a block plugin that adds excessive styles to do it. Unused code seems to be the thing that Google Lighthouse yells at me the most for. Modern themes and page builders have been smart about rebuilding with CSS grid and flexbox, reducing the ridiculous DOM nesting that floats and positioning used to cause, but builder or block styles need to be smart about how many unused styles they load, and not use the common scheme that duplicates content to hide/show for mobile.
I don’t know why I didn’t see any of the problems with Elementor before I built my website with it and 48 posts! Now I am trying to add Ezoic and seeing how it slows things down. Can you tell me: if I very slowly work on one post at a time, converting to Gutenberg, but leave the pages as they are, will this improve my site speed with Ezoic ? Ezoic doesn’t tell you up front that this will be a problem and while I was researching pagebuilders trying to figure out how to do this on my own, I never heard one bad comment mentioned about Elementor. I also have Astra which is supposedly an additional “problem.”
Thank you for sharing this useful video. I'm having a problem with large layout shifts, and I've tried everything to fix it, but I'm not a developer. I tried to fix it after seeing your video, but I couldn't. Can you help me?
Hello, thank you for this :) I original was at a speed of 33- I changed one paragraph jumped to 37 -- now that the whole blog post is in one container on Gutenberg, it is at a speed of 28? Only one image? Over 2000- word count any suggestions, thanks FYI, I tried again- no changes, and now it is saying speed 20? I just noticed that was for mobile-- I can not compare for desktop but now its 73 -- is there a word count I have a lot of list in blog count that be the reason? thanks
very simple. but can you also style each box/text section with different background colors or gradients? I will try it out but somewhat amazed the basic stuff I still don't know about. thanks Adam...
You would most likely just set the background for the entire container in my examples as the image would take up and entire side. For the rest, if you just wanted color behind the headline and any text under it, for example with Kadence Blocks, I used an info box which has its own background color options.
Is there any way to be able to drag text and images around free form anywhere on tablet, phone and dekstop versions? I'm sitting manually tinkering borders, margins and things that are not mean for positioning of elements. Is this different from regular vs. Pro? (I don't have Pro)
How to add heading for infoboxs without container ? Heading inside container with ingoboxs is just like another infobox. Heading won't go on top of infoboxs.
I have drop down list of 197 country . The Page Speed show this error: Please Select Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Ar… How can I solve an Excessive DOM size?
but what if you want to add a button and an icon list under the heading and you want it to show to the left of the image and not all items horizontally? with Kadence Blocks Method
Very impressive. Does anyone have any performance comparison for the delta performance difference on a full page. I will have to try this. My first concern will be with mobile responsiveness.
don't really agree, yes EL adds more code we would if we hand-code it, but a user with no clue how a page is build will add way too many elements instead of using it right. So it makes sense to educate the users.
It will only work if row layout (section parent or grand parent of infoboxes) have right and left padding minimum 400px accordingly. Not working with zero padding on row layout (section parent or grand parent of infoboxes)
Hate to bring the bad news - i love your video's, but related to the Gutenberg part it's wrong. The Kadence way has more div's then doing it with a core column block and entering a header and a paragraph. It's the Kadence Info Box block that's ads more divs; but also the Kadence Row -even as a 1 column choice- adds more divs then it should be. But i do get your point; think about the way how you add content is important. Look at the source that i creates.
Everything will be a trade off. The Gutenberg column block has no mobile responsive options so it’s not even usable. None of the native blocks have what they need for mobile responsiveness, so there is a reason they may be leaner, they are not so usable.
Ok Adam I didn't watch to the end the first time. I guess I need to play with this and test since a couple of things still aren't clear to me. Because you designed this in desktop view I need to see how using a single container will look on mobile. I seem to remember an option to switch order when using two columns which I regularly do on hero sections so that the image is the first thing the viewer sees on mobile. The logic of using reducing DOM makes perfect sense, it just doesn't feel like a very natural way to design. If I hand over a website to a client that they later add to there is no way they are going to design this way, they will revert to using columns to lay things out. That's why I think we need library of commonly used sections that have been pre designed using this more efficient method that can be dropped in to a design and then simply swap out text, images, icons etc. At least I can see what sorts of things Kadence has been working on as I've had the impression that development has slowed since they were bought out.
@@amitjangra6454 I thought I was on the latest version until I updated to WP 5.8, then the latest Kadence became available. Once you've updated both, this feature is then available.
Hi Adam - this Inner Block Direction feature in Kadence blocks, is this a brand new feature? I cannot find it in my version 2.1.6 (there is no newer version availabel). Kind regards, Bernhard
Same here I am at 2.1.6 and can not see the inner block direction feature either; wondering if my Astra Theme or some conflict between plugins is inhibiting it.
@@berrec2650 I use Astra too and also couldn't see it until I've updated to WP 5.8. The latest Kadence update needs WP 5.8, couldn't see it until I've updated.
Thanks for your response, can you share the url of the pages that were built in this video so I can see it? Will the same trick works with flatsome theme pagebuilder?
![How to FIX Avoid an excessive DOM size [SOLVED]](http://i.ytimg.com/vi/_Sr-ItTwXTs/mqdefault.jpg)
Just purchased both Kadence Blocks and Themes based on your recommendation. Having fun rebuilding my website! Page load speed is very important to me.
This is super helpful. Thank you for making it straightforward and doing comparisons with different wp builders.
I have Elementor Pro but I do not have the option "Positioning" I have to find out why I don't have the option, because i really need to decrease my DOM size badly. I will be back to follow these instructions!
Thanks for sharing, but this does not seem to work in Elementor if there is more text (e.g. a couple of sentences). What works instead is to choose "Custom" (Positioning -> Width -> Custom), then set the custom width to 50 % (for both elements).
Hi Adam,
It was a great watch! I faced this issue with my website a few months back, and it was due to DOM size. I learned a lot from this video, and I love the tip you shared. I am sure this will help a lot of people including myself. I think the DOM size is often overlooked, and it has an impact on the website. I am sure this tip will definitely work, and I will be sharing this in my network to help others on my list as well. Thanks a lot for such a great share!
Has your site become much faster because of this?
Great video! I was actually looking at how to improve site speed & DOM by reducing code. Wish to have a full dedcated speed performance video to improve site speed and ranking. As always, great informative video. Thanks again for a valuable video!
Has your site become much faster because of this?
in elementor it's actually better to set it to custom and % (so 2 widgets 50%, 3 widgets 33.333% and 4 widgets 25%)
True!
You can do that if you have Elementor Pro which allows you to add custom CSS in.
can you elaborate further?
Thanks for this. I'm using Thrive Architect and I'm considering ditching it because of huge DOM size and slow loading. A video using thrive would be great
Been trying this approach... and saw a limitation, is if you want an image on 1 column and mixed content on the other... i.e. an icon below the heading. you'll end up 3 inline in 1 row. ( I hope elementor can offer a div wrap. )
So the way you deal with that is quite simple. Use an icon box, or info box, they all call them differently. That is how you would get your desired result and it will be more optimized that using 3 separate Elementor modules.
I love learning new web tips from Vin Diesel.
I'll take Vin, but usually am called Dr. Evil :-). Maybe I need to get a Vin bobble head for my desk now.
Thanks for the great video. I've been doing it wrong all these years. Will go back and fix them.
Nice tips and i get the point... This is bordering on over correction though. If you are building sites with WordPress you are already not optimized for "performance." Lets be honest if your main concern is performance you should be building with nodejs. IMO just build with 2 divs if its easier for you. Or take the time to learn to code..You should be caching everything to the max anyways. With a cdn and a reverse proxy caching a couple extra bytes aren't going to change the experience of your users... kind of tired of obsessing over Googles latest carrot on a stick. Id rather save the time grabbing an envato template kit and spend a little more on hosting and nitropack or rocket. Either way you get 98s and you can take the rest of the day off. 😉
Agreed. Save a container if you can, but adding a page builder or block plugin to do it undoubtedly brings more unused CSS, which Google Lighthouse is going to yell about much more than a couple of extra divs.
Question: If you design a website in Node with no builder, does this limit non-coders from making basic edits? I think this is why builders are so popular.
This is Gold, Thank you
Adam, that is an awesome video. As an old timer in building sites I was definitely making to many containers, I blame it on being around since the beginnning and having to fiddle with tables to place stuff. Lol I try to update and stay current. I missed this change. Thanks so much!!
Why do builder companies make the 'wrong way' the frictionless default? It's non-intuitive compared to rows & columns, but this layout makes sense. We use Divi a freqently and it appears to be notorious for bloating the DOM.
I did it with my navbar. Thanks.
Hi Adam, great explanation. How do you accomplish this with DIVI?
I'm working on a divi video now.
How about the same tut for Divi, please...what about using tables ?
Thank you very much. I have learned a lot from your video even though no one else has learned from your video. It would have been great for me to make a video with the Educavo theme. From today I am a fan of yours.
Thank you for this video! Do you have an option, too, how to make this in Divi? That would be very helpflul
Great share! I was getting a DOM too large warning and was trying to figure out how to overcome this.
Awesome Adam thank you. Was wondering how to reduce my DOM size in Gutenberg. Now for a bit of redesign. 👍
As an alternative, what about using image box widget in Elementor to reduce DOM?
Yup you can do that, but the principal still applies beyond the simple example of a headline and an image.
Thanks for sharing
how we can fix this with Litespeed Cache setting ? or just Manually Change all sections and Containers in Elementor ?
Love it when your videos -change everything!
Cool stuff, Adam...thank you.
Great video :) How can I apply this in Divi?
wooooooa Muchas Gracias por este consejo me a ayudado para futuros diseños web desde chile un venezolano
Awesome video sir
I am back again. I still don't have the positioning in the advanced tab. How do you do this not having the positioning? Please let me know!
Thank you so much for making a good tutorial.
Glad it was helpful!
great video, thank you
beautiful elementor ad
🤯 This information was helpful! Thank you 🙏
thanks for sharing bro i appreciate i always wondering why dom size is so high on my sites
Hi, the guide is excellent, there is only one problem when you try to place an image next to an image and switch to mobile, it cannot be done. Even after determining the images within the row. They always go down one below the other
Thanks for this great tip Andy. Your videos are so good and to the point. I have a request for a video on the correct steps and the pitfalls to avoid, to gain Facebook and Amazon approval as it is, apparently, a minefield. Not directly about WordPress but it is definitely needed.
Thanks Adam!
Grateful for this amazing tutorial
Thank you for this video. How do I removed excess html code from my wordpress theme using elementor? I am getting a warning from google and bing regarding this.
thanks, you help me to cut down 1 step in my website designing process
Excellent video!
This is not working for me. When I get to the inner block - horizontal or vertical does nothing and the slider does nothing, Did you leave out the inline positioning for kadence? I get nothing-can't make the heading and the image side by side, and I am in the section part.
wow, this was very helpful. Thank you
Dang! We were mostly doing it wrong. Great tips! Thank you.
Thanks for the video, I'd like to get the same for Divi builder
Great content! As an SEO, managing DOM is always a challenge. Can this be done with Beaver Builder too?
Over bloated DOM is definitely an issue with many WP themes and page builders. Yea, save a container when you can, but removing one or two divs is not going to massively improve your page speed. Especially if you need a block plugin that adds excessive styles to do it. Unused code seems to be the thing that Google Lighthouse yells at me the most for.
Modern themes and page builders have been smart about rebuilding with CSS grid and flexbox, reducing the ridiculous DOM nesting that floats and positioning used to cause, but builder or block styles need to be smart about how many unused styles they load, and not use the common scheme that duplicates content to hide/show for mobile.
I wonder if I can do that with GeneratePress blocks?
Love it, how does this respond in mobile? ( I know I could test it but, ya know! :)
This is my exact question. The multiple container blocks I can make mobile responsive. So I will try this and see what happens.
none of my widget have "Position" segment under advence tab, is this due to versions differences?
I don’t know why I didn’t see any of the problems with Elementor before I built my website with it and 48 posts! Now I am trying to add Ezoic and seeing how it slows things down. Can you tell me: if I very slowly work on one post at a time, converting to Gutenberg, but leave the pages as they are, will this improve my site speed with Ezoic ? Ezoic doesn’t tell you up front that this will be a problem and while I was researching pagebuilders trying to figure out how to do this on my own, I never heard one bad comment mentioned about Elementor. I also have Astra which is supposedly an additional “problem.”
Thank you for sharing this useful video. I'm having a problem with large layout shifts, and I've tried everything to fix it, but I'm not a developer. I tried to fix it after seeing your video, but I couldn't. Can you help me?
Yes but I have 1200 DOM elements on blank page. That mean that DOM size come from header and menu?
Thanks for a great video
Hello, thank you for this :) I original was at a speed of 33- I changed one paragraph jumped to 37 -- now that the whole blog post is in one container on Gutenberg, it is at a speed of 28? Only one image? Over 2000- word count any suggestions, thanks FYI, I tried again- no changes, and now it is saying speed 20? I just noticed that was for mobile-- I can not compare for desktop but now its 73 -- is there a word count I have a lot of list in blog count that be the reason? thanks
Great, thanks!
So containers and blocks are two separate things. More blocks will not slow down the website but more containers will.
FIRST COMMENT!!💖
Yes you are!
very simple. but can you also style each box/text section with different background colors or gradients? I will try it out but somewhat amazed the basic stuff I still don't know about. thanks Adam...
You would most likely just set the background for the entire container in my examples as the image would take up and entire side. For the rest, if you just wanted color behind the headline and any text under it, for example with Kadence Blocks, I used an info box which has its own background color options.
Vertical align doesn't seem to work when the 3rd block is a shortcode.
Is there any way to be able to drag text and images around free form anywhere on tablet, phone and dekstop versions?
I'm sitting manually tinkering borders, margins and things that are not mean for positioning of elements.
Is this different from regular vs. Pro? (I don't have Pro)
How to add heading for infoboxs without container ? Heading inside container with ingoboxs is just like another infobox. Heading won't go on top of infoboxs.
Then how can you add a paragraph under the header... If the inline is set to horizontal?
I have drop down list of 197 country . The Page Speed show this error:
Please Select Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Ar…
How can I solve an Excessive DOM size?
but what if you want to add a button and an icon list under the heading and you want it to show to the left of the image and not all items horizontally? with Kadence Blocks Method
Very impressive. Does anyone have any performance comparison for the delta performance difference on a full page. I will have to try this. My first concern will be with mobile responsiveness.
Agree and following
Following…
Please share your updates here...
Came here to ask this. Following!
Thank you Adam
What about Divi? Can you please explain how to accomplish this with Divi? Thanks!
does using Inner sections help this?
Is the page you created here with Kadence blocks mobile-friendly?
Do you have a video about how to remove completely unused css (and js?)? I have a minified file that is 211000 chars long o,O ?!
The transmitted volume of your HTML at 230 KB is extensive. It should be no more than 64 KB. Can you help me to solve this issue?
Can you check responsiveness is it working fine?
Hi, does anyone know how to copy an entire column from its contents in Gutenberg?
And how it’s going to look on mobile?
Boom💥 👏👏👏
What’s your favorite recommendation for renting ad space without sacrificing site speed?
If I do this on elementor is it responsive for mobile?
The real answer for elementor has nothing to do with how you build your pages... it has to do with how much superfluous code elementor inserts.
don't really agree, yes EL adds more code we would if we hand-code it, but a user with no clue how a page is build will add way too many elements instead of using it right. So it makes sense to educate the users.
Adam! All six infoboxs are in one line!!! Not in two lines! How to break three boxes in second line... Please help.
It will only work if row layout (section parent or grand parent of infoboxes) have right and left padding minimum 400px accordingly. Not working with zero padding on row layout (section parent or grand parent of infoboxes)
Thanks.
The align options aren’t working for me. Why would that be?
Did you find a solution ?
how look this page after resposive on phone
How does this work translate to tablet and cell
adam does this work for gallery images that change every few seconds?
Can Beaver Builder do this too?
Hate to bring the bad news - i love your video's, but related to the Gutenberg part it's wrong. The Kadence way has more div's then doing it with a core column block and entering a header and a paragraph. It's the Kadence Info Box block that's ads more divs; but also the Kadence Row -even as a 1 column choice- adds more divs then it should be. But i do get your point; think about the way how you add content is important. Look at the source that i creates.
Everything will be a trade off. The Gutenberg column block has no mobile responsive options so it’s not even usable. None of the native blocks have what they need for mobile responsiveness, so there is a reason they may be leaner, they are not so usable.
I'm also not seeing this option. I'm on the latest free version using Astra theme. Is this a pro feature? Can you only use it with Kadence theme?
Figured it out. It needs WP 5.8.
Makes sense but why is it the likes of Kadence don't do this when creating their templates? They all seem to use multiple containers.
Hey Gary, as stated in the video (but at the end) this was just added to Kadence Blocks as of a few hours ago.
Ok Adam I didn't watch to the end the first time. I guess I need to play with this and test since a couple of things still aren't clear to me. Because you designed this in desktop view I need to see how using a single container will look on mobile. I seem to remember an option to switch order when using two columns which I regularly do on hero sections so that the image is the first thing the viewer sees on mobile.
The logic of using reducing DOM makes perfect sense, it just doesn't feel like a very natural way to design. If I hand over a website to a client that they later add to there is no way they are going to design this way, they will revert to using columns to lay things out. That's why I think we need library of commonly used sections that have been pre designed using this more efficient method that can be dropped in to a design and then simply swap out text, images, icons etc.
At least I can see what sorts of things Kadence has been working on as I've had the impression that development has slowed since they were bought out.
Is it mobile friendly?
The beginner has no idea what "Elementor" is? How I wish there was a site dedicated to explaining in a language a beginner can understand.
Hi Adam, thankyou for this awesome tip. But do not know why I am not seeing this "inner Block Direction" option?
Make sure you are on the latest version.
@@WPCrafter Yes Adam I am on the latest version
@@amitjangra6454 I thought I was on the latest version until I updated to WP 5.8, then the latest Kadence became available. Once you've updated both, this feature is then available.
Can one use Gutenberg Blocks along with Kadence Blocks?
Oh yea. Many people use Kadence Blocks for their website for reasons like in the video and all the mobile control options.
Hi Adam - this Inner Block Direction feature in Kadence blocks, is this a brand new feature? I cannot find it in my version 2.1.6 (there is no newer version availabel). Kind regards, Bernhard
Same here I am at 2.1.6 and can not see the inner block direction feature either; wondering if my Astra Theme or some conflict between plugins is inhibiting it.
The latest Kadence isn't visible until you've updated to WP 5.8. I've just updated and it magically appeared!
@@berrec2650 I use Astra too and also couldn't see it until I've updated to WP 5.8. The latest Kadence update needs WP 5.8, couldn't see it until I've updated.
This is a copy of the Elementor optimization video they've release. Nothing new :(
there needs to be a much more in depth video on this. making a simple headline with an image is nothing.
How does this reflect on mobile. I assume the mobile design needs to be manually optimized?
Same question. Will it be responsive design on mobile/tablet view?
All the blocks or elements themselves have mobile spacing options. It all responds beautifully.
Thanks for your response, can you share the url of the pages that were built in this video so I can see it? Will the same trick works with flatsome theme pagebuilder?
What about mobile & tablet responsiveness? You didn't show how to manage that in your video.
It works exactly the same with mobile/tablet
CSS-wise, it's just CSS Flex that is added. The width is set to 300px; so if a tablet is 600px; it will put 2 columns.
Correct, it’s just flexbox and responds beautifully.
Is this Responsive?