How important is HTML size for my Js (more important for my page load time)

Question

I'm developing a website and i used to use unordered lists for my navigation but some time ago i came across some article from from yahoo developer blog. In this article they explain how to improve your loading time and there are plenty of performance improvement tipps and tricks. Now i've tried to google about semantic of html and wheter to use ul lists of links or just a bunch of 'a' tags within a 'div' or any other semantically apropriate for the purpose element. Actually everybody encourages to use them and for me it already feels natural, but i've counted my links and approximately i already have about 120 (maybe more) links(each inside list element). What whould you suggest? or could someone suggest good article about it?

<ul>
     <li>
         <a href="#">Link</a>
     </li>
</ul>

or

<div>
     <a href="#">Link</a>
</div>

P.S. Oh, and don't be surprised about my links they are there for a reason:)

It's not clear just what exactly your question is. Do you want to know if links in lists is better for navigation menus than links in divs? — Alex Wayne, Sep 18 '12 at 18:06

score 3 · Accepted Answer · answered Sep 18 '12 at 18:11

From the CSS Rendering point of view, I'd go with the unordered lists because I think it leads to cleaner CSS; also, there's probably way more div's in your site so when the browser is searching for a match it doesn't have to attempt to match to every div style. However, this really is a micro-optimization and you shouldn't worry much about it unless you profile the page and see its a problem.

As for improving page performance, there are many other avenues to go down (cache, minifying, reducing round trips). I suggest you reading this. It's Google's thoughts on best practices for web performance. Also, check out some of the profiling tools in your favorite web browser (which should be Chrome).

score 3 · Answer 2 · edited May 23 '17 at 11:55

3

the best practice of li ul in this case , for more explanation i think this post So is usefull for you Why should I use 'li' instead of 'div'?

edited May 23 '17 at 11:55

Community

1
1

answered Sep 18 '12 at 18:15

Gyan Chandra Srivastava

1,370
9
29

score 1 · Answer 3 · answered Sep 18 '12 at 18:08

1

I dont think your 120 links either in div or within list will slow down your page, you can control div or list using css, you dont need js for formating them. Things to consider are.... How much content you have per page, who is hosting your site, how many images per page and their size, total size of html file, and most importantly database calls.

answered Sep 18 '12 at 18:08

highwingers

1,649
4
21
39

js wasn't for formating. i thought about future about DOM traversing and stuff like that – orustammanapov Sep 18 '12 at 18:40
Navigation menu is mostly static so mostly li worls, if you willing to use js for all 120 links then div will be easier to handle them compared to li. – highwingers Sep 18 '12 at 19:47

score 1 · Answer 4 · answered Sep 18 '12 at 18:19

Normally the navigation will not add too much to your page load time.

You should stick to the unordered lists for another reason. Some screen reader software and search engines have learned that unordered lists are used as navigation.

And people without CSS activated will recognise the lists as navigation,too.

If you use HTML5 additionally wrap the navigation in a <nav> tag

How important is HTML size for my Js (more important for my page load time)

4 Answers4