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!
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!
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.
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.
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.
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.
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.
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.
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
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?
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)
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?
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.
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.”
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.
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.
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?
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.
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
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.
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.
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.
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!!