Roy Tang

Programmer, engineer, scientist, critic, gamer, dreamer, and kid-at-heart.

Blog Notes Photos Links Archives About

I’m not sure if this a settings problem or an HTML problem, but on a page layout I’m working on, Firefox does not render the stylesheet immediately. Meaning for maybe half a second I can see the unstyled page, then the stylesheet kicks in and it renders as I expect.

All my stylesheets are in external css files loaded in the head tag. I’m not encountering this on Flock (which is a Firefox variant) nor on Google Chrome/IE.

Any idea how to avoid it?

Comments

Try disabling firebug.

Firebug definitely slows down the page render time. Brutally so.

Additionally, Install yslow: http://developer.yahoo.com/yslow/ in firefox to make sure that your page is optimized to its fullest.

Show us the page! Is it valid?

You might want to search for “flash of unstyled content” or “FOUC” and see what comes up, that’s the commonly-used phrase for this phenomenon.

You didn’t mention the platform, but this can also happen with the Visual Studio built-in web server if IPv6 is enabled in Firefox. See http://blog.codeville.net/2008/11/07/speeding-up-communication-between-firefox-and-visual-studios-built-in-web-server/
In my case turning off Firebug didn’t help. From the other hand I happend to use @import in my css and when i removed it - the FOUC (Flash Of Unstyled Content) was gone. That is very strange because this behaviour is mostly referred to IE (http://www.bluerobot.com/web/css/fouc.asp/)