15

Everyone agrees that less DOM elements means better page performance. It means better javascript performance, especially in older browsers.

But where are the best places to look to reduce DOM elements? What are the common culprits that you guys have come across that are easy fixes to get that number down?

4 Answers 4

16

use:

<ul id="navigation-main">
    etc..
</ul>

in stead of:

<div id="navigation-main">
    <ul>
        etc..
    </ul>
</div>

... when possible, that is. Sometimes you need the additional div for layout purposes. But when not necessary, don't use it.

4
  • Thanks for the suggestion. I was hoping this would turn into a similar discussion like "Common jQuery pitfalls" but I guess there just aren't common suggestions for this issue.
    – macca1
    Feb 10, 2010 at 23:53
  • Why use <ul> and <li> at all? Use a regular <a> tag alone. That would more than halve the nodes in your menu.
    – Y.K.
    Sep 21, 2018 at 7:33
  • There will be more suggestions forthcoming as developers begin to realize the importance google is placing on page rendering speed.
    – Y.K.
    Sep 21, 2018 at 7:52
  • can we have any online smart enough tool that can do this? Apr 20, 2021 at 6:47
3

Rather than using <ul> tags, use regular <a> tags and apply styling to a custom class.

Remove all <br> tags also, they count as a node, again, use styling for spacing instead.

Especially in nav menus placed in footers:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>

Could be replaced with:

<a href="/" class="well-spaced">Home</a>
<a href="/blog.html" class="well-spaced">Health Blog</a>

Which would reduce number of nodes from 5 to 2.

And finally, we use heavy code in our header, for account login, UPI, basket etc. Some of these could be replaced with a single <div> or <a> tag, which when clicked pulls in the required 150 nodes via XMLHTTPRequest.

1
  • It would great to see a blog post explaining further these useful changes.
    – NDi
    Feb 3, 2021 at 19:37
2

If you are using ASP.NET server controls then that might be a good place to start. Some of the server side controls, while great for fast development, will render themselves with excessive markup. I'm not advocating you don't use server side controls, but you might find some modules of your site that are good candidates for DOM reduction by

1) rewriting the markup yourself or 2) building the markup with the System.Web.UI.HtmlControls namespace.

Good candidates for this approach are components appearing on your site frequently (header, footer, navigation menus). Candidates are also not frequently changed or modified unless you are comfortable maintaining this style.

Another ASP.NET specific technique is to use a System.Web.UI.WebControls.PlaceHolder to work with dynamically instead of a div or panel with the runat="server" attribute. The placeholder control won't render any additional elements, only what you've added to it.

1

Anywhere where you are using an element to affect layout is usually something you can think about. Often times you can actually use less elements combined with CSS to achieve the same result. Hard rules are difficult as it depends a lot on the specific case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.