Prevent displaying unstyled page when doing a page-refresh

Question

How could I prevent my page displaying an unstyled view while the page is loading ? I think its probably because of the order of loading different JavaScript-files. Is there a best-practice, for example loading plugins before my own code ? Should every jQuery/.js-function called after document.ready or windows.load ?

link to page

Thanks

Answer 1

YSlow will give you some good ideas for starting points on this page. Quoting from running it on your www.cewas.org :

1. Grade D on Reduce the number of DOM elements. There are 1489 DOM elements on the page. A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.

2. Grade E on Make fewer HTTP requests This page has 11 external Javascript scripts. Try combining them into one. This page has 5 external stylesheets. Try combining them into one. Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

3. Grade F on Compress components with gzip. There are 15 plain text components that should be sent compressed ... Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.

4. Grade F on Add Expires headers. There are 61 static components without a far-future expiration date.... Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.

---

To add my own 2 cents: you might want to hide all elements until the entire page loads. This seems to be what you intend with the progress bar, but the sheer number of elements and scripts/styles on your page seems to be preventing it. You could load the bare minimum subset of CSS/JS/HTML to set up the progress bar and then load the rest of the elements in some asynchronous Javascript, only showing the full page once they have all loaded (a la Gmail).

Answer 2

The main problem with your site is the fact that you are attempting to load everything in one go at initial page load. Web developer toolbar's document size report shows a total of 1.1mb of content - that would be nearly 750kb of images and 385kb of scripts. Loading this amount of content in one go is really not recommended, especially for slower connection speeds.

The obvious solution would be to hide everything and only display it when the scripts are ready, but this is a really bad solution - your visitors will be looking at upwards of 10 seconds or more of a blank page. What you should be doing is to restructure the site - rethink your architecture for this. Websites aren't meant to be downloaded in one go - there's too much data, and one of the reasons why users dislike Flash sites, because Flash has to download all of the assets in one go, and therefore users are forced to sit through long waiting times.

You should either breaking up the pages into normal HTML documents, which will load traditionally, or use ajax to load the contents sequentially. Have your script intelligently reorder the loading of contents - front page contents first, then as the user chooses where he's going, the site behind his back loads the assets for those pages. Images are the big problem here - you have .7mb of them, and loading all of them blocks the loading of the site, including scripts, by a very long amount of time.

These aren't easy task by any means, but this is the best method for rectifying the problem.

Some more immediate solutions to your problems include most of what @matt b said - enable gzip compression, combine all your scripts and stylesheets into a single file, etc. You should also consider using CSS sprites for your images to reduce the number of HTTP requests. There's a large number of jQuery plugins that are prime candidates for consolidation, and you're also loading jQuery twice - adding nearly 100kb to the amount of things you need to load.

Answer 3

I assume you are using an external stylesheet? If you simply embed all your styles in the page, it will not show up unstyled. Also, place the style sheet definition before any javascript code in the header.

Answer 4

It is commonly know as FOUC - Flash of unstyled content. The options in the answer above make eminent sense but it may still be impossible to eliminate in all circumstances. Initially it was and IE problem but has recently happened a lot more in Safari and is probably to with the underlying method used in the browser application itself and therefore may not be remediable.

Sometime addins such as jQuery and typekit can exacerbate the problem hence paying close attention to and testing different scenarios for loading them.