Link to home
Start Free TrialLog in
Avatar of Soroushi
Soroushi

asked on

IE wait for all image to load before showing page, FF and Chrome render instantly

Hello
This page: http://alahadtv.com contains all the  css embedded with no external css files to fetch. the size of page is about 35KB gzipped, it does not use tables and all the images have dimensions set by css code.
The page should render as soon as that 35KB file received; FF and Chrome behave so and show the page instantly, but IE, tested 6 and 8, waits for all the images to be loaded before rendering the page.
I removed all javascript codes and files to see if it is the problem but with no luck, so javascript is not the cause, although it perform very slow in IE comparing to FF and Chrome and hangs when retrieving and injecting ajax content but this story remains for later and another question.

Thanks
Avatar of HyperBPP
HyperBPP

Avatar of Soroushi

ASKER

HyperBPP
the links discuss controlling the order of image's load or preloading them which is not important and irrelevant for the question; the question is: why IE waits for all images get downloaded before rendering page? the expected behaviour is to start rendering other content of page instantly as FF and Chrome do.
Internet Explorer handles progressive rendering different than the other browsers in certain cases.  I am trying to find a precise reason why that applies to your page.  

Some things I am aware of
-IE waits to load tables before rendering the table
-IE waits to load all images found in external CSS until that CSS is loaded.

Maybe your inline css has an effect?
Browsers will download everything in the <HEAD> before moving on.  You have several external CSS files, any chance you could combine them?  It would reduce the number of requests that the browser has to make, thus speed the loading of your page.  You also have a <style> block in your <head> section.  You should move that to an external CSS file as well so that you are able to take advantage of the browser's automated cacheing.

HyperBPP
Thanks for your comments but the page has neither table nor external CSS. in case you notices some 'main.css' in firebug then it is just get preloaded by javascript to cache it when other pages of website require it later; I use inline CSS in home page only to reduce number of files requested and needed to start rendering the page to just 1 file and so speed rendering home page of website.
ASKER CERTIFIED SOLUTION
Avatar of HyperBPP
HyperBPP

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
HyperBPP
It seems that flash objects are blocking rendering of page in IE even if I give explicit dimensions for those objects!.
I will accept your last solution. but could you please give some links for discussions about:
-IE waits to load all images found in external CSS until that CSS is loaded.
-Flash objects block loading or rendering of pages in IE or other browsers.

Thanks
Soroushi,
Yahoo has some great information on speeding up websites, that includes a little informatoin about progressive rendering.
http://developer.yahoo.com/performance/rules.html

I can't quickly find "good" information about progressive rendering and flash objects.  My observations were made with FireBug's Net panel.
HyperBPP,
That article discuss just the role of CSS in progressive rendering. I read these and other recommendations and discussions about website performance before but never came across effect of flash in progressive rendering as I encountered in the above web page.
If it has effect then it should be well known and wide spread as the flash itself and someone should noticed it before; or maybe I miss something?