JavaScript Menu Experiment

Hey Guys,

I think we all know CSS menus are better for page speed, but how bad does a JavaScript menu hurt a webpage? Here are my results:

Exhibit A:
Exhibit B:

Exhibit A had the JavaScript menu enabled. For first view, Exhibit A had a document fully loaded time of 4.414s while the non-JavaScript menu had a 2.808s load time. For repeat view, Exhibit A had a load time of 3.275s while Exhibit B had 2.213s. That is huge!

The start render time on first view was the same. However, on repeat view, Exhibit B was 1.124s compared to Exhibit A’s 1.473s.

I am going to setup an outsourcing project on rentacoder to take the JavaScript menu and turn it into a CSS based menu. I will post a link here once I have the project posted. All coders are welcome to bid on the project.

Travis Walters

Hi Travis!

I looked at the Waterfalls

From these two it looks like the JS is not the issue for the longer load times, but the enormous Time-to-first Byte and DNS lookups for the assets 23-34? None of these two should be impacted by the JS asset.

If you compare the Waterfalls reducing assets to 1-21 (without JS) and 1-22 (with JS), you see that the result is roughly the same.

Kind regards,

Hey Markus,

I am going to assume you mean assets 33-34 as opposed to 23-24.

Notice on the non-JavaScript menu that the CPU usage is a lot less intense. Perhaps that effects either A) how fast the DNS lookup gets initiated or B) how fast the DNS results are interpreted?

The CPU usage was pretty close to 100% for awhile so I think something in the third-party JavaScript menu code was very inefficient.

If you compare Exhibit A down to asset 32, it takes about 3.4 seconds to load and Exhibit B takes about 2.4 seconds to load to asset 31.

I am not saying that all JavaScript menus are really bad for page speed. However, the Zapatec menu that I am currently using makes pages load a lot slower.

After the menu is transformed into pure CSS, I plan to take all my JavaScript and place it at the bottom of each page instead of the header.

Travis Walters

Hey Guys,

I recently had my JavaScript menu converted to a pure css menu:

However, I do not have access to test it in older browsers such as IE6.

Does anybody here have IE6 installed that they can glance at it really quick and let me know?

I have tried reinstalling IE6 on this computer but its not working out so well.

Thanks in advance. It is much appreciated!

Travis Walters