Question

I have a JSF application which have several JSF pages. When I click on page to load a new one I wait 1-2 seconds to load a new page and I see white screen. How I can solve this slow loading? For example can I display “Loading…” on the center of the screen while the new page is loaded and refresh the screen without showing white display?
What are the best practices?

Answer 1

Sounds like a performance debugging question.

Start with seeing where the slow bits are. In Chrome, Safari, or Firefox (and possibly IE), you have access to the debugger console.

In Chrome, pull this up and click on the Network tab. Refresh the page. What you will see is a waterfall graph of all the resources on the page that required a network connection to load. It will also provide times for each one.

Suppose you see something like this:

index.html ########
script1.js         ####
script2.js             ##########
img1.png                         #####
img2.png                         #########
img3.png                         ######

If you look at index.html through to the end of script2.js, you can see how these occur linearly one after another. This is called blocking.

In the case of index.html, that’s your initial page load. Depending on the size of the document, this can be very small or very large. Pretty much everything afterwords (script1 & 2 and the imgs) only start loading after index.html loads. This is because index.html has to be parsed by the browser before it can start loading everything else.

If index.html shows about 2 seconds to load, then this means your problem is most likely on the server-side. It could be that the page generation is taking a long time, or your web server is under heavy load, or that you have a very slow connection speed. At this point, you need to do some server-side testing to see where the problem is.

Now lets go back to the sample graph.

In regards to how script1.js and script2.js are blocking, it means that all of their javascript is being loaded, parsed, and run. Javascript is single-threaded, and code from script tags must completely be parsed and loaded by the javascript interpreter before the browser will start working on the next script or loading the next resource.

There are many techniques for optimizing javascript to load quickly. This is a different topic, but googling for ‘optimize javascript loading’ is a good place to start learning more.

Lastly, some types of resources like images inherently load in parallel. What the graph shows is that img1-3 all load at the same time. This is indicated by the beginning of each resource load all lining up at the same point. They may or may not end at the same point, like in img2. Img2 is a bigger image, so took longer to load.

There’s another useful thing to know about how browsers load resources, and its that browsers have limits on the number of simultaneous connections they can make. In the old days, IE6 had a limit of 2 simultaneous connections per domain. That graph might look like:

img1.png                         #####
img2.png                         #########
img3.png                         ######
img4.png                              ######

Notice where img4 starts loading. Imgs 1-3 are loading, but img4 was delayed until img1 finished loading. That’s because there were only 2 open connections and img4 had to wait until img1 was finished. Again, the size of img2 didn’t matter, this was only based on available connections.

Luckily, these days all browsers allow many more simultaneous connections so this is less of a problem. Still, its something to be aware of.

A way to get around this problem is to load resources from different domains or subdomains. For example, if you had a very image-heavy site, it might be a good idea to setup multiple sub domains from which your images can be loaded. Might be something like:

sub1.domain.com/img1.png
sub1.domain.com/img2.png
sub3.domain.com/img3.png
sub4.domain.com/img4.png
sub1.domain.com/img5.png
sub2.domain.com/img6.png
sub2.domain.com/img7.png

This lets the browser “round-robin” the requests and load more resources without having to wait as long.

Anyway, hope this helps.