Hey there fellow web enthusiasts! Join the channel here th-cam.com/channels/NAp3ihoUg5jlbr_vCEZ3MA.htmljoin If you're passionate about web development like I am, then you've come to the right place! Subscribe to my channel and join on this epic journey to master Websites. Together, we'll build amazing websites, crush bugs like the Dark Knight, and create web experiences that'll make the Joker green with envy. So what are you waiting for? Hit that subscribe button and let's make the web a better place, one line of code at a time! tinyurl.com/DontclickWINK
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?
A pattern appears that DOM size is affected by the amount of tags, as well as the embedded links to other pages or sites within the content. Is that accurate?
Yes true, try to crate the page keeping in the mind no to use lot if elements. it is possible to do that as I shown in the example. Another examples could be not using the mega menus as they are huge in elements. For ecommerce instead of a cart show in click, redirect users to the card page directly.
Thanks for the comment, it is a slider plugin I just shown for example. I would not suggest you to buy that one as there are many free plugins available to create sliders.
hello Sanjay, so that concepts I explained in the video can also be applied to spectra. of course it is a different page builder but principles are same.
so gzip compressions is not for the DOM size reduction. Gzip reduce the size of the data transferred from the server to your website. For dom size reduce the number element on the page, do not use mega menu or too many child menus. Less elements on page = less dom size. I commented on your another comment too with more info
hey brother, I arranged wordpress home screen in admin panel and today I found that their position is changed which was not done by me. Is it possible that they can change theirt position automatically
hey brother, sorry for late reply. no - it does not happen automatically. check if some else have the access to the site. change passwords and set up wordfence and antimalware plugin on the site. check my channel for wordfence and antimalware videos. let me know if you found something.
Seems like you haven't seen watched the videos carefully. I covered everything that what is DOM size and how you can reduce it. Along that I covered elementor as an example too. And I don't understand why you said that you should buy elementor, where specifically I recommended not to use elementor but use a lightweight free page builder like Gutenberg. Also elementor is free to use. I don't have your website url but watch the video again and try to reduce the page size my adding nodes carefully, do not nest the nodes inside each other. If you have some specific questions other then allegations then I will be superhappy to help you out. This channel is all about helping people as a by product If I make some money that is a plus. I would never adverstize anything I don't believe in. Good luck and let me know if you want a genuine help.
hello here if some things you can do in shopify to reduce DOM size 1. Optimize Shopify Theme Choose a Lightweight Theme: Select a Shopify theme known for its performance and minimalistic design. Minimize Theme Customizations: Avoid excessive customization that can add unnecessary elements to the DOM. 2. Clean Up Your Liquid Templates Remove Unused Sections: Delete any sections or snippets that are not in use. Simplify Liquid Logic: Simplify complex Liquid logic and loops to minimize the number of elements rendered. 3. Optimize HTML Structure Reduce Nested Elements: Avoid deeply nested HTML elements as they increase the DOM size. Use CSS Instead of Inline Styles: Use CSS classes and external stylesheets instead of inline styles to keep the HTML clean. 4. Manage Apps and Plugins Audit Installed Apps: Regularly review and remove any unused or unnecessary apps. Optimize App Usage: Ensure that the apps you use do not inject excessive HTML elements into your pages. 5. Optimize Images and Media Use Responsive Images: Implement responsive images to ensure only necessary image sizes are loaded. Lazy Load Images: Implement lazy loading for images to reduce the initial DOM size and improve loading times. 6. Minimize JavaScript and CSS Minify and Combine Files: Minify JavaScript and CSS files and combine them to reduce the number of requests. Load Scripts Asynchronously: Load non-critical scripts asynchronously to improve the rendering speed. 7. Use Efficient Liquid Code Limit For Loops: Avoid excessive loops that can add numerous elements to the DOM. Conditional Logic: Use conditional logic to render only necessary elements based on the context. 8. Optimize Collection and Product Pages Limit Products Per Page: Reduce the number of products displayed per page to decrease the DOM size. Paginate Content: Use pagination effectively to split content across multiple pages rather than loading everything at once. Example: Simplifying Liquid Code Here's an example of how you can simplify Liquid code to reduce DOM size: Before Optimization liquid {% for product in collections.all.products %} {{ product.title }} {{ product.description }}
{% endfor %} After Optimization Limit the number of products displayed and use a simpler HTML structure: liquid {% for product in collections.all.products limit: 10 %} {{ product.title }}
{% endfor %} Summary Reducing the DOM size in your Shopify store involves optimizing your theme, cleaning up your Liquid templates, managing apps and plugins, optimizing images, and minimizing JavaScript and CSS. Regularly review your site's structure and content to ensure it remains lean and efficient. By implementing these practices, you can significantly improve your site's performance and user experience.
what about the problem statement and understanding what is DOM size and what are nodes ? Do you think that is not important, just want your feedback so that I can improve my videos.
@@LetsCreateYourWEBSITE hey! how r u. i absolutely loved and liked your video. i even subscribed also. but u took too much time brother. repeated same things many times. anyway thanks for the video. 😇
![How To Fix Excessive DOM Size That Is Slowing Down Your WordPress Website [SPEED TIP]](http://i.ytimg.com/vi/xSpse1YIvNo/mqdefault.jpg)
Hey there fellow web enthusiasts! Join the channel here th-cam.com/channels/NAp3ihoUg5jlbr_vCEZ3MA.htmljoin
If you're passionate about web development like I am, then you've come to the right place!
Subscribe to my channel and join on this epic journey to master Websites.
Together, we'll build amazing websites, crush bugs like the Dark Knight, and create web experiences that'll make the Joker green with envy. So what are you waiting for? Hit that subscribe button and let's make the web a better place, one line of code at a time!
tinyurl.com/DontclickWINK
shorten this video, don't waste time.. thanks it worked.
You're welcome! thanks for the feedback, i will keep in the mind.
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?
I cant find dom size option in my elmentor
Did you try to change the site structure to reduce the containers on the page? What is your dom size in page speed report!
Can you guide me in my elementor settings DOM Size option not showing?
update the plugin to see the latest options also I created a video recently covering elementor's new speed boost features
A pattern appears that DOM size is affected by the amount of tags, as well as the embedded links to other pages or sites within the content. Is that accurate?
Yes true, try to crate the page keeping in the mind no to use lot if elements. it is possible to do that as I shown in the example. Another examples could be not using the mega menus as they are huge in elements. For ecommerce instead of a cart show in click, redirect users to the card page directly.
Good content, please what is the plugin that shows ....just purchased in 5:32
Thanks for the comment, it is a slider plugin I just shown for example. I would not suggest you to buy that one as there are many free plugins available to create sliders.
Hi any trick for spectra page builder for dom size?
hello Sanjay, so that concepts I explained in the video can also be applied to spectra. of course it is a different page builder but principles are same.
Can we reduce Dom size by using GZip compression in .htacess file? Does it works?
so gzip compressions is not for the DOM size reduction. Gzip reduce the size of the data transferred from the server to your website. For dom size reduce the number element on the page, do not use mega menu or too many child menus. Less elements on page = less dom size. I commented on your another comment too with more info
hey brother, I arranged wordpress home screen in admin panel and today I found that their position is changed which was not done by me. Is it possible that they can change theirt position automatically
hey brother, sorry for late reply. no - it does not happen automatically. check if some else have the access to the site. change passwords and set up wordfence and antimalware plugin on the site. check my channel for wordfence and antimalware videos. let me know if you found something.
Hi there, how can we reach out to you for personal assistance on our website ?
Hello Kelly, You can send me an email at programwarrior@gmail.com
gracias
de nada 😀
why i am not getting such result
Performance
79
Accessibility
100
Best Practices
84
SEO
Hello.. Every website is different so it can provide different results.. What is the errors showing now in Google page speed?
we don't have elementor, what should we do? should we buy elementor? Are you advertising to us?
Seems like you haven't seen watched the videos carefully. I covered everything that what is DOM size and how you can reduce it. Along that I covered elementor as an example too. And I don't understand why you said that you should buy elementor, where specifically I recommended not to use elementor but use a lightweight free page builder like Gutenberg. Also elementor is free to use. I don't have your website url but watch the video again and try to reduce the page size my adding nodes carefully, do not nest the nodes inside each other. If you have some specific questions other then allegations then I will be superhappy to help you out. This channel is all about helping people as a by product If I make some money that is a plus. I would never adverstize anything I don't believe in. Good luck and let me know if you want a genuine help.
@@LetsCreateYourWEBSITE Thank you bro for your nice comment. I was rude
VERY HELPFUL. THANK YOU!
You are most welcome. Thanks for the comment ❤️
How to do it for shopify?
hello here if some things you can do in shopify to reduce DOM size
1. Optimize Shopify Theme
Choose a Lightweight Theme: Select a Shopify theme known for its performance and minimalistic design.
Minimize Theme Customizations: Avoid excessive customization that can add unnecessary elements to the DOM.
2. Clean Up Your Liquid Templates
Remove Unused Sections: Delete any sections or snippets that are not in use.
Simplify Liquid Logic: Simplify complex Liquid logic and loops to minimize the number of elements rendered.
3. Optimize HTML Structure
Reduce Nested Elements: Avoid deeply nested HTML elements as they increase the DOM size.
Use CSS Instead of Inline Styles: Use CSS classes and external stylesheets instead of inline styles to keep the HTML clean.
4. Manage Apps and Plugins
Audit Installed Apps: Regularly review and remove any unused or unnecessary apps.
Optimize App Usage: Ensure that the apps you use do not inject excessive HTML elements into your pages.
5. Optimize Images and Media
Use Responsive Images: Implement responsive images to ensure only necessary image sizes are loaded.
Lazy Load Images: Implement lazy loading for images to reduce the initial DOM size and improve loading times.
6. Minimize JavaScript and CSS
Minify and Combine Files: Minify JavaScript and CSS files and combine them to reduce the number of requests.
Load Scripts Asynchronously: Load non-critical scripts asynchronously to improve the rendering speed.
7. Use Efficient Liquid Code
Limit For Loops: Avoid excessive loops that can add numerous elements to the DOM.
Conditional Logic: Use conditional logic to render only necessary elements based on the context.
8. Optimize Collection and Product Pages
Limit Products Per Page: Reduce the number of products displayed per page to decrease the DOM size.
Paginate Content: Use pagination effectively to split content across multiple pages rather than loading everything at once.
Example: Simplifying Liquid Code
Here's an example of how you can simplify Liquid code to reduce DOM size:
Before Optimization
liquid
{% for product in collections.all.products %}
{{ product.title }}
{{ product.description }}
{% endfor %}
After Optimization
Limit the number of products displayed and use a simpler HTML structure:
liquid
{% for product in collections.all.products limit: 10 %}
{{ product.title }}
{% endfor %}
Summary
Reducing the DOM size in your Shopify store involves optimizing your theme, cleaning up your Liquid templates, managing apps and plugins, optimizing images, and minimizing JavaScript and CSS. Regularly review your site's structure and content to ensure it remains lean and efficient. By implementing these practices, you can significantly improve your site's performance and user experience.
Great bro. Thanks
You're welcome bro and thanks for the comment :) ❤
Can you fix my Dom size?
i can't, but you can by implementing the tutorial i created for you
Subscribed bro..
Thanks for the sub ❤
This video is not helpful to Shopify users, only WordPress users. I wish that was clear in the title before taking the time to watch this.
Sorry for the confusion, but I talk about the concepts you can also use in shopify.
Go to his main channel page and enter the keyword shopify in the search. Then you can see all of his shopify tutorials.
video starting from 2:58. thanks me later
what about the problem statement and understanding what is DOM size and what are nodes ? Do you think that is not important, just want your feedback so that I can improve my videos.
@@LetsCreateYourWEBSITE hey! how r u. i absolutely loved and liked your video. i even subscribed also. but u took too much time brother. repeated same things many times.
anyway thanks for the video.
😇
god
Thanks you very much :)