15
Jan
2010

flash of unstyled content

have you ever seen a html page that loads unstyled and a second (sometimes more) after it “loads” its gets reorgenized ?
well this problem refered as “flash of unstyled content”.

it happens when the page content starts to load before the css files are completely loaded. you won’t see much of this problem using ie or any other browser other then firefox, thats because the way firefox renders the page is different then the other browsers. it rerender the page every time a new css rule is loaded, ie for example waits for all the page content(includes images) to be loaded and then it plots the rendered result (skipping the FOUC)

ok – so what can be done to avoid this annoing problem ?

i did some research on this issue – trying to find the best solution , and there is no 1 ultimate solution, you will have to optimize your page – reducing the loading size of the page, but more important is moving the css files to the top of your html, acutally to the top of your head section, css files must be loaded first, then the js files and other content.
normally we wont use javascript functions untill the domready event is thrown – so that won’t be a problem.

now, after doing so, we should try to compress the files,
search the web for a css compressor in your preferred language,
examples :
PHP : http://davidwalsh.name/css-compression-php
ASP.NET : http://madskristensen.net/post/Combine-multiple-stylesheets-at-runtime.aspx

the last one is a great example for combining and compressing the css files,
resulting in 1 css file that holds few files in it.

the same can be done with js files (compressing and mergin)
online js compressing can be done using Yahoo’s YUI Compressor (http://developer.yahoo.com/yui/compressor/)

or you can search for a php / .net server side js compressor.

Now, after doing these steps your page would weight alot less then it did before – maybe this step already solved your problem.

i would go on and load the images in photoshop and use the save for web method without the max resultion checked.

Hope this article helped you,

Ady.

Posted in ASP.NET, CSS, HTML, php, , , , ,

Leave a Comment