Skip to content
How to Reduce DOM Elements by Redesigning on Shopify Site
When it comes to reducing DOM elements on the shopify site, analyze the overall page built from different design, implementation, and user experience perspectives.
Below are some points to look at and find ways to improve on:
- Optimize the structure of your HTML
- Third-party scripts should be limited
- Remove the submenu from the product page
- Lightweight mobile menu
- Deliver sections via Ajax
- Remove Unused Language Selector From Dropdown Options
- Other use cases
The following are some important aspects to know about DOM:
- The number of DOM elements should not exceed 1000 ( Due to the user experience we recommend keeping it to below 1500 as 1000 will be not feasible for design )
- Dom depth should not be higher than 32.
- Dom child in an element should not exceed:60
Optimize the structure of your HTML
Website design should be simplified from the start. Remove elements that don’t contribute to the core functionality or user experiences, such as –
- Excessive images
- Limited Graphics
- Remove Complex animations.
- Remove unnecessary divs and containers
- Choose HTML (Semantic Elements) tags like
<header>,<nav>,<main>,<section>,<article>
Example:
<div class="section"> <h2 class="section-heading">Main Content</h2> <p>This is the main content of the page.</p></div>- Use line breaks adn proper spacing to separate different sections of your HTML.
- Eliminate redundant or unused elements. (Remove any unused divs, spans, or tags that don’t contribute to the functionality or design of your site).
- Review your form structure to see if they are unnecessarily complex.
- To reduce the number of products displayed on a listing page or elements within each product display.
- Reduce the number of products displayed in a section.
It is common for clean and minimal designs to have fewer DOM elements.
Example:
<div class="unused-div"> This content is not needed</div>It is common for clean and minimal designs to have fewer DOM elements.
Third-party Scripts Should be Limited
Your website may need third-party scripts. Each script may add additional DOM elements, which will increase DOM-related challenges for speed.
In shopify Apps can embed HTML in themes which means some DOM elements getting added across all pages. To analyze and make sure that third-party scripts are not resulting in unwanted DOM elements.
Looking For Expert Shopify Speed Optimization And Other Services Get In Touch
Remove the Submenu from the Product Page
There are already so many lines of code on-site, which is one of the reasons for the excessive number of DOM elements. In technical terms, if the home page has around 3000 lines of code only for the menu (like megamenu), then we can apply a separate simple menu of 500 lines of code for the product page reducing the number of DOM elements without creating a submenu.
It will not only speed up your website, but it will also improve the user experience of the product page.
Example:
<nav class="product-page-menu"> <ul> <li><a href="#">Product Overview</a></li> <li><a href="#">Specifications</a></li> <li><a href="#">Reviews</a></li> </ul></nav>Lightweight Mobile Menu
This refers to an optimized navigation menu specifically designed for mobile devices on shopify sites. We do not need the megamenu (with submenus) for mobile devices so we can Create a separate lightweight menu for mobile devices, which is the reason for reducing DOM elements.
- Remove any unnecessary or secondary menu items to reduce the overall complexity of the mobile navigation.
- Make the mobile menu as lightweight as possible by minimizing animations and effects that might negatively affect performance.
Deliver Sections via Ajax
If any section uses a loop under the code like the blog section and if it is coming from code then it increases the DOM size according to items that are coming come in the loop and it slows down the page but if we fetch this section using Ajax request then the overall response comes in one line and DOM will not increase. Sections loaded through Ajax refer to sections of content that are dynamically loaded and inserted into the page using Ajax.
- Only the necessary content is fetched from the server and inserted into the page using JavaScript. Other sections are loaded using Ajax.
- Liquid tags and javascript functions to facilitate the management of Ajax sections. so the javascript function handles the Ajax requests and inserts the updated content into the page.
Example:
JavaScript
// Fetch content dynamically using Ajax
$.ajax({
url: "/sections/product-details.html",
success: function(data) {
$("#product-details-container").html(data);
}
});
Other Use cases
Unused Language Selector From Dropdown Options
When you remove unused language options from a shopify site, you are eliminating languages that are not required.
- There are dropdown menus with multiple language options in the header and footer, increasing the DOM element. So we find the code explaining what each element does and why it is applied, then we reduce the elements in the DOM.
Example:
<select name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
Login popup or login form on all pages.
Expanded repeat navigation on the footer to be reduced.
Benefits of Reduced DOM Elements
- Lower HTML Size
- Reduced css and JS
- Reduced TBT
- Reduced Parsing Time
- Better Core Web Vitals ( passed )
- It improves website performance by reducing page load times. studies have shown that even a one-second delay in page load time can lead to a significant increase in bounce rates.
- Additionally, reducing DOM elements can improve your Shopify store’s mobile performance. With the increasing number of users accessing websites on mobile devices, it’s crucial to have a responsive and mobile-friendly website.
Conclusion and next steps in improving your Shopify store’s performance.
Reducing DOM elements on your Shopify store is a crucial step in improving website performance and user experience. By implementing the techniques discussed in this article, you can achieve a more efficient website, resulting in faster loading times, reduced bounce rates, and increased conversions.
By implementing these strategies, you can significantly reduce the number of DOM elements on your Shopify site, improving its performance and user experience.
Looking For Expert Shopify Development And Other Services Get In Touch
