Kadence Blocks DOM Size - How to Avoid Excessive DOM Size on your page

Подписаться 28 тыс.

Просмотров 10 тыс.

50% 1

Are you using Kadence Blocks? If yes, you've got to watch this! Kadence Blocks are generally lightweight, but not all Blocks are made the same. Each Kadence Block contributes a different number towards the DOM Size of the web page.
Knowing the DOM Size and depth each Kadence Blocks bring, you can skirt around the Google Page Speed Insights audit called "Avoid Excessive DOM Size". If you don't know what it is, don't worry, I'll explain it to you in this video as well. The key is, there is no speed optimization plugin that will help avoid being flagged by the audit.
So, it is definitely imperative for you to know the DOM Size of each Kadence Block before you use it.
🔨 Recommended WordPress Tools:
✅ Cheap & Fastest Web Host: jackcao.com/cloudways
✅ Kadence Pro Theme: jackcao.com/kadence
✅ Kadence Blocks Pro: jackcao.com/kadence-blocks
✅ Best Speed Optimization Tool: jackcao.com/wprocket
Kadence Blocks Pro DOM Size (Blog): jackcao.com/kadence-blocks-do...
⌚ Chapters (Time Stamps):
0:00 Introduction
2:05 What is DOM?
3:24 DOM Size of the Blank Page (For Comparison)
4:14 Spacer / Divider
5:46 Advanced Button
7:18 Icon
8:48 Advanced Header
10:00 Tabs
13:19 Info Box
14:58 Accordion
16:13 Icon List
16:45 Testimonial
18:47 Advanced Gallery
20:37 Form
22:03 Countdown Timer
23:21 Row Layout
25:21 Nested Row Layout
26:39 Outro
📺 More Helpful Videos:
💕 Page Speed Optimization Resources (Mentioned in the Video):
✅ Case Study - Styles & Bags: • Speed up Your WordPres...
✅ Case Study - Dee Why Skin: • Advanced Google PageSp...
✅ Case Study - • Case Study: Speed Up W...
✅ Speed Optimization Tips: • How to Speed Up Your W...
✅ Playlist: • Site Speed Improvement...
🎓 WordPress Gutenberg Videos:
✅ Create a Magazine Site from Scratch: • Kadence Theme Tutorial...
✅ Create a Next-Level Home Page from Scratch: • Kadence Blocks Pro Tut...
✅ Create a Lead Capture Page from Scratch: • How to Create a Lead C...
✅ Create an Ecom Store from Scratch: • Create an Ecommerce We...
✅ Build Any Page You See from Scratch: • WordPress Tutorial for...
✅ Playlist: • WordPress Tutorial for...
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#kadenceblocks #googlepagespeedinsights #domsize #jackcao #kadenceblocksdom #googlepsi

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@JackCao 3 года назад

Kadence Blocks Pro (DOM Size): jackcao.com/kadence-blocks-dom-size/

@DanishAttari2663 7 месяцев назад

hi Mr jackcao .how i can solve DOM size in elementor.

@DanishAttari2663 7 месяцев назад

My website DOM size score is 886 elements

@abdallahoubaki4417 Год назад

Great video. I have about 1800 DOM size, and because of you, I understood that I can diagnose easily what causes it. Thank you 🙂👍

@JeanvanWyngaardt 3 года назад

Really enjoying your Kadence content. I actually chose to switch from Elementor after spending a few hours watching your videos, and it’s awesome. Keep up the amazing work!

@HaifengZhu-pn3uq 10 месяцев назад

The DOM size of Elementor is extremely big

@mannuu76 2 года назад

This video was an eye opener for me. Thank you for making it and for the time you spent into putting the written article.

@vadimkolosov Год назад

Jack, thank you so much for such a comprehensive and thorough review! It kills me how bulky the design is... Aahhhh...

@jgz2 3 года назад

Great work. You are so patient Jack.

@JackCao 3 года назад

Thank you!

@ekredel 3 года назад

Hi! “So” police here! :) Another great and useful video, thank you for this. Really glad you took on board my advice about the “so”, this video is IMHO so much more professional. Keep uploading them, I am looking forward to the new ones.

@JackCao 3 года назад

Thanks for pointing that out! I didn't notice it till you pointed it out and I rewatch the vid. Will continue to provide good value 😁

@faithnomore101 3 года назад

Thanks Jack. Helps me to reduce my loading time even further.

@JackCao 3 года назад

You are most welcome! Glad it helped! 👊

@TiagoDezan 3 года назад

Another great video!!

@JackCao 3 года назад

Thank you! 😊

@azzurramaggia8237 2 года назад

Hi Jack, thank you for this amazing content! Could you please test Toolset blocks DOM size as well?

@chrismaddox3d 3 года назад

My shop page on Kadence has 1,190 Total DOM, how can I bring that down? it is just the default shopping page that comes with the Kadence theme, I use the Pro version, not all my pages had a total DOM I noticed, great video keep them coming

@earthgraduate726 2 года назад

Thanks Jack , BTW Is it possible to add a button so that by clicking it direct you to a page then in that page the same very button direct you to another page meaning that the same button has its different links for different pages ?

@Paartherapeut 8 месяцев назад

so valuable! I have astra but still

@MichaelsPaintingChannel Год назад

I have no clue what to do now. What if a worpress page with gutenberg now has a large dom. What is to do? Shorten it? I don't see space in my page, everything is important. Are there maybe wrong elements in there? GST is telling mesomething about this

@jimnech5066 3 года назад

As always, a very informative video! One question, who is responsible for garbage collection in the DOM of deleted blocks? Is this something that WP does automatically or is it the responsibility of the blocks themselves? For example after adding a bunch of blocks, if you delete a random block will all of the elements that were added for that block also be deleted?

@JackCao 3 года назад

Yes, every element that is added or removed will be added or subtracted from the DOM Size according to number of elements each block brings to the table. Hope this clarifies. 😉

@view_products 3 года назад

Nice work, I have approx 1566 dom size error on my every blogpost, there is any plugin to solve this issue.. I already install WP-Optimize but there is no change in dom size

@JackCao 3 года назад

There is no plugins to solve the DOM issue. It is all about the elements you put on your page.

@1989lavi 5 месяцев назад

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?

@soonpaukun 3 года назад

Hi Jack, appreciate it if you share Stackable as well...

@JackCao 3 года назад

Noted. Lots of interest in that. Will look into it.

@zoltankemenes1981 3 года назад

Please take a look at Stackable and Qubely blocks as well.

@JackCao 3 года назад

Great suggestions! Thank you!

@zoltankemenes1981 3 года назад

@@JackCao Thanks for your amazing videos.

@realwalemichaelofficial 3 года назад

Stackable +1

@abdulmaajied 3 года назад

Stackable pls

@isfx 3 года назад

+1 Stackable. How about Templately? Thanks as always bud!

@Patriots20 Год назад

So is it that good ?

@hellosensible76 3 года назад

Do you have a link to that post you mentioned in the video?

@JackCao 3 года назад

My apologies for the late reply. I've finally found the time to write it. Here it is: jackcao.com/kadence-blocks-dom-size/

@DBCVC 3 года назад

So why all the twitter smitter about google DON' T USE GOOGLE?

@droidlogic Год назад

I find it funny how google tries to mess with us. First fix the speed and now the dom size is to big.

@GaryBox 7 месяцев назад

Yes it's crazy to follow Google guidelines without question. I design websites for small local businesses and I still see some sites ranking well that have poor site speed or sites without SSL. As a perfect example of Google hypocrisy they tell us to use next generation image formats like webp and avif. However when it comes to uploading images to Google business website they only accept jpeg!

@courtney727ray 2 года назад

Hey, would you be interested in reducing the DOM on the homepage of my site? I created the site with Kandence. I bought it last year after watching one of your videos.

@courtney727ray 2 года назад

I went ahead and tried this for myself. I really appreciate the work that you do.

@freekrider803 3 года назад

Hi jack can you create a good and beautiful, fast loading, website in (Restaurant's) based website for us....which includes hotel booking,contact, testimonials, Google reviews in free kadence block... Thank you jack waiting for your reply..

@JackCao 3 года назад

That's like a 5 hour tutorial. Lol! Will keep that in mind, but I don't think it will be that soon.

@freekrider803 3 года назад

@@JackCao can i expect that tutorial from you in future...

@JackCao 3 года назад

@@freekrider803 Can you do me a favour and show me an example restuarant site that I can reference? Will definitely do a tutorial.

@amineunshakable1295 3 года назад

Brizy & Bricks are missing on your channel 🤫🤭🤔

@JackCao 3 года назад

Brizy, not a fan. It slows down the site. Bricks, maybe later when they are more established, and now I want to concentrate on Gutenberg first. 😊

@kajahaler3716 2 года назад

Can you open a Buy me a coffee account, so that I can buy you a coffee for this amazing tips you are sharing with us? 🙂

@pahtashow 3 года назад

Services page and service page tutorial design request !

@JackCao 3 года назад

Any designs in particular?

@pahtashow 3 года назад

@@JackCao Kadace blocks pro with your favorites kadence or non-kadence plugins

@JackCao 3 года назад

@@pahtashow I mean do you have a link to a page for me to reference the web design?

@pahtashow 3 года назад

@@JackCao I do not know the principal elements, SEO recommendations, best practices... this why I am requesting

@JackCao 3 года назад

@@pahtashow I see. Noted on your request 😊 Will look into it

@MB-sl8pw 2 года назад

I can see why you hide the speed score cause that wasn't impressive at all.

@JackCao 2 года назад

Nope. If I were to hide, I would have hide the link as well. Speed is good, just that I was lazy to toggle off theme features that are slowing down the site, like "related posts".

@MB-sl8pw 2 года назад

@@JackCao ok i see. Looking into Gutenberg as i used to use divi and with their speed update its not diffrent from the numbers you got there so im wondering if should chance to Gutenberg

@JackCao 2 года назад

@@MB-sl8pw Absolutely. There is a learning curve but it is well worth the time learning to use it. I have a couple of step by step tutorials here: ru-vid.com/group/PLaWK8UfrNqw3605EvDefj4b697LbP_UiG I'm pretty sure if you follow one of them, you will get a hang of it. You will see near perfect scores for those pages in the tutorials.

@MB-sl8pw 2 года назад

@@JackCao are the speed numbers before cache plugin ?

@JackCao 2 года назад

@@MB-sl8pw Before. Not all Gutenberg blocks are made equal. You gotta know which ones will slow down your site. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VU5VS0Po4h4.html But generally you don't need a caching plugin to get a good score.