Best ways to reduce number of DOM elements

Question

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?

Answer 1

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.

Answer 2

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.

Answer 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.