Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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 ?
Thanks
YSlow will give you some good ideas for starting points on this page. Quoting from running it on your http://www.cewas.org:
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.
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.
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.
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).