1 item remaining in IE causing website to take extremely long to load

John_Mc

Hi,

My website is taking very long to load for a client in IE6 and 7. It loads instantly in Firefox and I cannot reproduce this problem locally.

Anyone experienced this before and found a work-a-around? I've found plenty of people posting this problem but none that have actually gotten around it.

Thanks
John

deisebabe

you could try using Firefox's Yslow. https://addons.mozilla.org/en-US/firefox/addon/5369

Axwell

Whats the url?

John_Mc

Hi guys, thanks for your replies.

deisebabe wrote: »

you could try using Firefox's Yslow. https://addons.mozilla.org/en-US/firefox/addon/5369

I'm using Fiddler to examine the Gets and Posts but nothing really seems out of the ordinary. The server is sending the images within a few seconds but it's taking nearly 3 minutes for them to load on the client computer.

Axwell wrote: »

Whats the url?

Unfortunately it's a deployed product with login so I can't give the link out

kwyjibot

If you post the url where we can see it we may be able to give you a better answer, but my first suspicion would be something javascript-related.

Are you using a framework like jQuery on your page? Are there many javascript-driven elements added to the page after initial loading?

John_Mc

kwyjibot wrote: »

If you post the url where we can see it we may be able to give you a better answer, but my first suspicion would be something javascript-related.

Are you using a framework like jQuery on your page? Are there many javascript-driven elements added to the page after initial loading?

Yes, I initially thought that to be the case as well. We do use the JQuery library, but it's not loaded on the page when the problem occurs. It's taking about 3 minutes for an image to load even though the server has sent it almost immediately.

This is proving difficult to resolve because we can't reproduce it. It loads straight away in Firefox, but some of our clients are experiencing it in IE6. Not a lot of them, but enough to confirm that something is up...

TheWaterboy

Firefox could be loading a cached version of the page and hence you cant replicate it....

YSlow is your best bet...just make sure ure not using a chached page

Kila

Have you checked all the image attributes?

I know it seems like a silly thing to say, but I once had a similar problem and it was because I missed out a height/width set of attributes on an image, causing it to load the wrong size and also really slowly.

John_Mc

Kila wrote: »

Have you checked all the image attributes?

I know it seems like a silly thing to say, but I once had a similar problem and it was because I missed out a height/width set of attributes on an image, causing it to load the wrong size and also really slowly.

I thought height and width are optional attributes though?

Kila

I can't remember if they are optional or mandatory in any of the HTML specs off the top of my head. I do know that HTML plus the wrong doctype (or no doctype) in IE6 can produce some interestingly bonkers results, and the bizarre image loading is one that I've experienced before.

For some reason, on a page I built a good while ago (again, can't remember if this was casued for me previously by having no doctype or the wrong doctype) everything looked and loaded fine in Firefox and IE7. But in IE6 the images came in all the wrong sizes (mostly they were totally tiny) and the page seemed to be taking minutes rather than seconds to load. The problem was solved by adding the width and height attributes to the images, which caused them to load correctly.

It may not be at the root of your problem, but it's a quick fix to try - should only take a few minutes to add them in, and if it is causing your problem, you'll be glad you tried it out!

Bluefrog

Don't think the height and widths of images are going to cause this - no matter what the rendered size of the images the file size will be the same. The default behaviour for any browser is to display them at their original size.

XHTML requires those attributes to be set so for best practice its worthwhile doing but can't see it causing this kind of delay.

It is likely that your page is being cached in Firefox and that would account for the speed difference in rendering so do a hard refresh (CtrL + F5) to see if the delay is evident then. Yahoo's tool for looking at the performance of your page is definitely worth looking at. I would also look for malformed HTML and Javascript hiccups.

John_Mc

Thanks for your replies guys, we're using the Transitional DTD in our pages.

Firefox loads the page on my local development machine in just under 8 seconds according to YSlow. That's using Ctrl + F5 to not use the cache...


So short of going through the HTML and JS, which is a huge task, I've no way of identifying what's causing this error?

Serious pressure from above to resolve this so I've a bit task ahead of me

Eoin

What happens if you load the image directly in your browser? I'm not a graphicky type person, but could the image be saved funny or something? What is the filesize of the image?

Incidentally, are people sure that height and width are mandatory in XHTML? If anything, I'd have thought that CSS was the best place for this.

Kila

I don't believe that width and height attributes are mandatory, but I've noticed in the past that using images without width and height tags can break IE sometimes when certain PNG fix scripts are being employed. It's been noted by other people online too. Also if you have one but not the other (e.g. width but not height) set IE will treat the other attribute as 0 which can cause screwy image loading and the like. Better to have them in if you're using any sort of scripts that tinker with images to provide IE6 support, many require you to have them in and break the page if you don't.

OP, are you using a PNG fix script or other premade script or are they all your own?

The other option that occurred to me was about the creation of the images - OP did you create them in an Adobe Product? If you didn't use the Web Friendly Save functions, it's possible that the images were saved in the CMYK colourspace, which Adobe operates in by default. IE will not display CMYK images. If you did use Photoshop or something similar, try opening one of the images and using the "export for web" or whatever that setting is called (don't have Adobe stuff on this computer) and then replacing that image. If it loads correctly, then that's probably your problem. The "export for web" stuff in Adobe auto exports files saved in the RGB colourspace, which is supported by IE and FF (CMYK only supported by FF).

John_Mc

Kila wrote: »

I don't believe that width and height attributes are mandatory, but I've noticed in the past that using images without width and height tags can break IE sometimes when certain PNG fix scripts are being employed. It's been noted by other people online too. Also if you have one but not the other (e.g. width but not height) set IE will treat the other attribute as 0 which can cause screwy image loading and the like. Better to have them in if you're using any sort of scripts that tinker with images to provide IE6 support, many require you to have them in and break the page if you don't.

OP, are you using a PNG fix script or other premade script or are they all your own?

The other option that occurred to me was about the creation of the images - OP did you create them in an Adobe Product? If you didn't use the Web Friendly Save functions, it's possible that the images were saved in the CMYK colourspace, which Adobe operates in by default. IE will not display CMYK images. If you did use Photoshop or something similar, try opening one of the images and using the "export for web" or whatever that setting is called (don't have Adobe stuff on this computer) and then replacing that image. If it loads correctly, then that's probably your problem. The "export for web" stuff in Adobe auto exports files saved in the RGB colourspace, which is supported by IE and FF (CMYK only supported by FF).

No I've searched and there's no fix for the PNG transparency issue that exists in IE6 being used by the system.

One of the images is created by Nevron Chart 3rd party component. I'm in the middle of googling for any report problems with that, but their website mentions nothing of the sort.

I used Photoshop to create some images, however I'm confident that I used the "save for web" option with them as that's what I'm used to doing. That said, I'm open to exploring all possible reasons for this annoying and serious problem... is there anyway to check the colourspace of an image without photoshop? My trial has expired and my workplace doesnt need it enough to pay the huge license fee.

Thanks for the advice guys, keep it coming!

Kila

On vista, if you right click on an image and view its properties, you can see the color space (colour representation) in the details.

Uploading it to flickr, and viewing the properties will also tell you.

Kila

Have you tried preventing IE loading images to see if it is the image causing the problem?