Hello there I would like to ask you a question related to loading times. I have noticed that the loading time for the images of this site (www.metatradersoftware.com) varies depending on the browser I use. The main difference comes when you use firefox which is quick and opera which is slow. When I click on the different buttons of the upper horizontal pane, I can notice in opera that the images last a few seconds to download each time. Nevertheless in firefox, I cannot appreciate this time, may be because it's really quick. Does anybody has any theory which explains why this difference in loading times might happen? Actually I would like to do something to fix this thing because I do not like that the images take so long to load in opera. Thanks in advance
Oddly, I'm seeing the reverse on the speed of the page load here - Opera is faster while Firefux sits there chugging away trying to load the small images. Ok, the mouseovers - yeah, bloody typical. The are using separate images for the mouse-over effects, and firefux isn't pre-caching them (though opera seems to be doing so here) In terms of filesizes and image counts, the page uses 18k of images in 17 files - not excessive, though I'm suprised it takes that much. The menu uses a whopping 8 images in 4k for something that should be a single file at half the size. Code-wise, we're talking train-wreck. Invalid markup, two "HTML HEAD /HEAD BODY" and two "/BODY /HTML" is a sure sign something screwed up, and being it's a XHTML doctype one should probably make sure all properties are in quotes. The use of the ID property on the menu is completely inappropriate, as is using the same ID more than once... It's wierd because there are large sections that look like they were coded by someone who understands semantic markup, and then sections that are just a total disaster that looks like someone else cut/paste in stuff they didn't actually understand. (pretty much the entire menu and the language link) Of course, that it's been run through HTMLTidy when the markup is invalid sure as shine can't be helping. (again, if one cannot format their own code properly in the first place, they probably have no business writing code) Basically, the page has bigger problems than the image load times.
Thanks for your good response because I can learn from it. Moreover, I already fixed the syntax errors. What I still do not know how to tackle is the loading time of the images. As for the images from the menu, I have been forced to use them to implement the sliding doors technique in the menu of the horizontal upper pane. Do you know any other better way to do this technique? As far as the images pre-caching is concerned, I would like to know if there is some way to force the pre-caching of the images. Question: how can I use htmltidy offline? After downloading tidy.zip I can run tidy.exe through the dos shell but it only accepts html files so I am forced to edit the source code from the php page displayed in my browser and save it as an html file to be able to check the errors with the htmltidy offline. This process is a bit of a pain in the ass since I have to edit the source code with click right on the page displayed in browser and then save the file as html and them run the htmltidy offline program. If you know any other better approach for this task of checking syntax offline before uploading the website I would appreciate that you told me. How could you extract all that useful information related to the number of images used and the size of them? Did you use any particular tool? Thanks in advance
Have a look at this - I wrote it a while back for someone else. http://battletech.hopto.org/html_tutorials/tristate That does dynamic width tabs using a sliding doors technique - with three separate image states (normal, hover, current) from this single image. Because it's all the same image, there are no concerns about pre-caching... It also means sending less separate 'pallettes' resulting in the one file being smaller than all the separate files - and the icing on the cake, less files means less handshaking with the server, and therin faster pageloads. I wouldn't bother myself - I do all my indenting myself because automated tools usually just screw up existing code - and frankly if you can't bother to indent properly in the first place, don't bother writing code. The only time that type of tool is ever useful for me is when working with other people's code - and then I usualy just end up rewriting from scratch since if they didn't write it with proper indenting, it's probably fubar anyhow. But then, I have an inherent distrust of automated tools. Firefox Web Developer Toolbar https://addons.mozilla.org/en-US/firefox/addon/60 Under 'information' is 'View Document Size' which told me about the 'static' content. I ballparked the 'non-static' images (the hover states) based on the static ones.