Slow page load

[stevebouffe]

I've been experimenting with a new page here

http://www.djsuperstore.co.uk/cgi-bin/catalogue.cgi

My question is...

I have quite a few menus and although the script produces the HTML witin 1/2 second, IE takes about 4 seconds to display the page.

In Netscape it's quite a bit faster. Can the drawmenu() command be used in such a way as to display the menu after the main page has finished diplaying?[/list]

[zhalbrecht]

I'm having the same problem.

The page loads quickly, but when the menus in javascript are loaded on the client side it is VERY slow (4-5 seconds)

Any solutions?

[Maz]

That's not fair
It takes me 1 min 43 seconds to load my page.
Plus 50 seconds to open the menu.

Good ol mac os 8.6 ie 5.1.7

Regards
maz
-www-

[John]

Maz, even with my system the thing that takes the longest to load is your flags.

Favor, hon. Please tell me what you see listed under "News".

Thanks.

[Andy]

How big are these menus?

Can we have some URL's?

http://www.djsuperstore.co.uk/cgi-bin/catalogue.cgi returns me an error so can't see it.

Can't help unless I can see a problem.

Cheers
Andy

[Neil82591]

I have alot of 30x30px images in the menu and it kills the load time you can check it out at

http://www.4-fans.com

Thanks

[John]

When you said, "I have alot of 30x30px images in the menu...", you weren't exactly kidding. I'm not sure if anything is going to help that. Graphics take time, especially on slow connections (my obvious-on-a-Tuesday statement).

[Neil82591]

I just downsize dthe icons to below 30bytes each now and it seem a bit better.

Wish there was a faster way to get it to load though

[Neil82591]

I meant 300 bytes each

[kevin3442]

The menu is caching all of the images it uses. This makes sense, if you look at it from a standpoint of responsiveness once the site visitor starts using the menu. But the image caching is clearly what takes the time in your case. Perhaps you could have a separate script cache all of the necessary images before the menu script runs... That way, the images would already be cached when the menu renders. Of course, even with the images cached, the response time will still be slowed down some with all of those images. Can you trim the image size more? 300k per .gif file is still pretty big. You might try cutting the dimensions in half... most of the logos would still be recognizable by sports fans, even if text could not be read.

Oh... and can you get rid of the Longhorns logo under NCAA altogether? Just a thought...

Kevin

(Go Huskers!)

[Neil82591]

The icon images are not 300k they are between 200-300 bytes not kilobytes......

Thanks

[kevin3442]

Yeah... sorry... I just typed incorrectly out of habit (don't often have occasion to type "bytes" anymore). I meant to say that 300 bytes per image, for so many images, is still a bit of load when caching that many images at once. Although it's probably more to do with the number of images in this case. Precaching might still be a good thing to try.

Kevin

[Neil82591]

Thanks... Do you know how I could precache tehse images and still work with the Menu? Version is 5.0

[kevin3442]

Thanks... Do you know how I could precache tehse images and still work with the Menu? Version is 5.0

Yep... you could use a javascript function to do it. The function would be called before the menus render. It seems to me that, for efficiency, you'd cache only the images that the user initially sees: i.e., those used in the main menu, plus any others on the page that you want to appear. Then, as the site visitor views the first page, the menu will continue to load the rest of its images. You could even put in a fancy check to wait until the last pre-cached image is loaded before drawing the menus.

But I've been thinking about this some more. No matter how you go, all of the images still have to get cached before the menu has its full look, whether the menu does it or you have a separate function do it. In other words, if you keep all of those images, you're still going to have to wait for all of them to be loaded before the menu has all of its icons. It seems to me that the first perceptual issue is that the images in the main menu don't show up until just about everything else is loaded, including many of the images in the page. That got me thinking... most people define the main menu first, so I wondered why your main menu images show up so late? I checked your html and found the answer: it's because all of your submenus are defined in menu_data1.js, which loads early, but your main menu appears in a table cell in the body, so those main menu images are added to the cue later in the process, as the body is loading.

If the main menu came first, its images would load first. My first suggestion to you, therefore, is don't use a table to place the menu; there's really no need given the type of placement you have. Instead, put your "Main Menu" in menu_data1.js, as the first menu definition, and use the menu system's internal positioning to put it where you want. You should be able to achieve the same sort of placement you have now, like so:

Code: Select all

with(milonic=new menuname("Main Menu")){
style=menuStyle;
screenposition="center";
top=156;
menuwidth="100%";
menualign="center";
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=index.asp;status=Back To Home Page;");
aI(etc....);
}

You may have to adjst the top= propery to suit. Note that setting menuwidth="100%" will cause the menu to extend the full width of the page, while menualign="center" will place the main menu in the center of the full-width menu bar. You might even like that look better. If you'd rather have the menu appear on the page as it does now, then delete the menuwidth and menualign lines above. In any case, since the Main Menu is at the top of the menu definition code, it's images should load before the other menu images, and they shoul appear fairly quickly.

A couple of other suggestions:

(1) In menu_data1.js, in your menu style named "menuStyle", you have your subimage property set to a .bmp file. I'd convert it to a .gif. Not only will it be smaller, but it won't cause problems for older browsers.

(2) You set your onsubimage in each aI() menu item definition, but they're all the same. Take it out of each item definition and put it in the menuStyle definition... your menu code will be saller as a result, and load slightly faster.

(3) I suppose you could cache the page's images (those in the body) before drawing the menus. That way they'd appear much sooner (I think). Why not try what's outlined above, then see if the caching is something you want to do next?

Hope that helps,

Kevin

[Neil82591]

Thanks........

[kevin3442]

Continued discussion from this thread.

For now I have taken all the images from teh sub menu and I am looking for a way to have tehm load only after the entire page is loaded thus making sure it does not effect the home page from loading the other nessecary things.

Another solution would be to load the script for your submenu definitions at the bottom of the <body>. Since you're still embedding your main menu in a table cell, it'll be a little more complicated than simply moving the code that loads menu_data1.js to the bottom of the body (if you did that, then menuStyle would not exist when the Main Menu rendered, causing an error and no menus). Still... it's not too difficult.

Break your current menu_data1.js file into two files, like so:

menu_data_styles.js

Code: Select all

_menuCloseDelay=400           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=100            // The time delay before menus open on mouse over
_followSpeed=5                // Follow scrolling speed
_followRate=40                // Follow scrolling Rate
_subOffsetTop=10              // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x

with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
separatorwidth="";
padding=4;
fontsize="75%";
fontstyle="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="images/custom/menu/13x13_greyboxed.bmp";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

menu_data_submenus.js

Code: Select all

with(milonic=new menuname("NCAA")){
style=menuStyle;
overflow="scroll";
orientation="vertical";
aI("text=Aggies (Texas A&M);url=index.asp?PageAction=VIEWCATS&Category=59;");
aI("text=Air Force;url=index.asp?PageAction=VIEWCATS&Category=18;");
.
.
.
etc.
.
.
.
aI("text=Nascar<br>Championship<br>Shirts & Hats;url=index.asp?PageAction=VIEWCATS&Category=192;");
}

drawMenus();

So, menu_data_styles.js (or whatever you want to call it) holds the globals and the menuStyle definition. menu_data_submenus.js holds the code that defines all of your submenus. In the html file, replace your current reference to menu_data1.js with menu_data_styles.js, so it'll load toward the top. Then source menu_data_submenus.js into the html file in the last line of the body, right before the closing </body> tag, like so:

Code: Select all

<script language=JavaScript src="javascript/menu_data_submenus.js" type=text/javascript></script>
</body>

The premise is that the Main Menu, loaded at the top of the <body> will load early, along with its images, followed by the rest of the body, complete with images, followed by the submenus with all of their images. By the time the browser gets to the submenu code, the Main Menu, all of its images, and the rest of the page's content, including images, should already be showing. That way, the site visitor will have something to look at while the browser continues to cache the submenu images (you might want to set the text in the status bar to something like "loading menu images..." so that the constantly changing image names aren't distracting). Plus, since the main structure of the menus is drawn quickly, the submenus should be available for use, but possibly without all of the images (while using the menu, the user might even catch up to the images loading and see them as they appear, but that's not a big deal). You might get a little oddity with the scroll overflow in the submenus until the images are all loaded; i.e., the submenus may extend beyond the bottom of the browser window until everything is loaded, but the scrollbars should still appear.

I borrowed the code from your test page and reproduced it locally. I modified the paths in the html so that all .css files, all .js files except what I modified, and all image files would be loaded over the net from your site when I opened the page. I broke up the menu_data.js file as I described and tested it in IE6 and NS7 under Win2k, with an empty browser cache each test. (Cable modem though, so still high speed). It works as far as I can tell; this approach seems to do what you want. Let me know if it works for you or if you have questions.

Hope that helps,

Kevin