Kendo UI - The Art of Web Development > FOUJUI: Flash of Uninitialized JavaScript UI. Guru Tip: Avoid the HTML5 FOUJUI Experience. Guru Tip: Avoid the HTML5 FOUJUI Experience As I continue to incorporate more JavaScript into my applications and, especially, as I try to leverage the new JavaScript/HTML 5 technologies, I'm discovering a new problem: It's now possible for users to see raw, uninitialized HTML in their browser before my JavaScript properly arranges things.
I asked Todd Anglin, VP for HTML5 Web & Mobile Tools at Telerik, if there was a solution to this problem. Here's what he said: This is a new problem that can ruin the fancy, new experience of your HTML5 app. I think of it as FOUJI, or Flash of Uninitialized JavaScript UI: Users see the ugly HTML briefly and then, suddenly, the page looks right. For instance, this HTML displays some gif (probably animated) that lets users know that their page is being prepared: <div id="preLoad"><div><img src="styles/BlueOpal/loading-image.gif" alt="Loading Image" style="width:48px;" /><br />Loading...
I use it with this CSS: $(document).trigger("APP_READY"); Cache them if you can. “The fastest HTTP request is the one not made.”
I always smile when I hear a web performance speaker say this. I forget who said it first, but I’ve heard it numerous times at conferences and meetups over the past few years. It’s true! Caching is critical for making web pages faster. I’ve written extensively about caching: Things are getting better – but not quickly enough. Perhaps it’s hard to make progress on caching because the problem doesn’t belong to a single group – responsibility spans website owners, third party content providers, and browser developers. I’ve gathered some compelling statistics over the past few weeks that illuminate problems with caching and point to some next steps.
Read on to understand the full story. My kingdom for a max-age header Many of the caching articles I’ve written address issues such as size & space limitations, bugs with less common HTTP headers, and outdated purging logic. Cache-Control: max-age=31536000 Missing max-age ! 3rd party content Next steps. Best Practices for Speeding Up Your Web Site. The Exceptional Performance team has identified a number of best practices for making web pages fast.
The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. One way to reduce the number of components in the page is to simplify the page's design. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
CSS Sprites are the preferred method for reducing the number of image requests. Image maps combine multiple images into a single image. Inline images use the data: URL scheme to embed the image data in the actual page. Reducing the number of HTTP requests in your page is the place to start. Top | discuss this rule Use a Content Delivery Network tag: server tag: css.