How to drecrease the DOM size of the theme?

[Saba_ecom]

Hello Cute Members!

I m facing the  issues to fix the speed of the site. The main issue of the site is DOM size that i also attach in this question. Kindly help me to achieve the high speed score. 

Thank you and look forward to it. 

[flareAI]

Hello @Saba_ecom,

Gina here from flareAI - your Fully Automated Free Sales Machine. Hope you are doing good! I am happy to share some suggestions for your query.

Please consider liking and accepting the solution if it helps.

I truly hope it will be useful for you.

I would suggest to reduce the number of elements being used throughout your website. This can be elements added by apps you have installed or your theme injecting excessive HTML elements into your site.

Try uninstalling all the apps that you are not using. Also, some apps won't remove the code they have added even after you uninstall the app. So make sure you remove any leftover unused app code which is a best practice that avoids running code for unused features, and makes your theme code easier to read.

Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.

Are you using any slideshow in your website? Using slideshow, which are high-quality images combined with transitions, take time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.

You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.

Hope this was helpful! Cheers!

Gina
flareAI

[ExpertRookie]

Hi @Saba_ecom

ExpertRookie here, excessive DOME size is a popular issue. In my opinion, you can try to lazy load each section content. It means a section content only should be loaded and appended to your site when it is in the browser's view port.

Hope my knowledge is helpful for your case

[Cedcommerce]

Hello @Saba_ecom, 

Could you share your website URL so we can check the speed diagnostic report on our end and let you know the issue along with the solution?

Regards, 

CedCommerce

[speedboostr]

You simply need to delete sections from your layout via the theme customizer.

This will reduce the DOM size and general page complexity by having less elements, then you can start using read more links to content rich pages, this is the best practice.

For a more technically advanced approach, using intersectional observers to load content on user interaction is the way forward. If you're interested in this, let me know and I'll be able to provide you with more details.

[OneCommerce]

Hi there,
After checking, we see that your speed score is 29/100 on mobile, which is pretty slow compared to others
Score: https://prnt.sc/C_-KjK_78hHj
Solutions:
- Reduce unused JavaScript
- Apply lazy loading technique for images