Site very slow, heavy style recalculation


I’ve created a site using the Vaadin framework. The problem is that the site is very slow, especially in firefox, it takes about 30 seconds to load a page.In Chrome runs a bit faster( 2-5 seconds) but this is still slow. The problem seams to appear while rendering the content in the browser.
I’ve used Speed Tracer, and it report a LOT of style recalculation.

The layout of the site is forum like and looks like this:

-i have some user stats in the header
-then i have a tabsheet that contains the topic ( title and content and some other info )
-under this a have some nested tabsheets ( about 2-3 levels ) that act like a menu , and on the last level usually I have a list ( about 10 items per page ) , each item containing some statistics…

Can the style recalculation be forced by the order in which I add the components in the page or something like this?
I’ve tried to switch the order but still, no improvement…

Hope somebody can help me…



I’ve had the same problem. Eventually i redesigned the site to not use tabsheets, but menu’s (based on the Navigator7 add-on in the Directory).

Bottom line: Tabsheets, and especially nested tabsheets make it slow…very slow!


Damn… I was afraid of that… :slight_smile:

Thanks anyway

You can use combination of empty tabsheet component (tabs with empty content in every tab) and a Navogator or ViewController style component. When a tab is switched - you can navigate to an appropriate view in your ViewController. This will let you use TabSheet and avoid it’s slowness on large content.


I’ve tried the trick with empty tab content, I’ve even tried using plain buttons with a container for the content, but it
doesn’t move any faster in a noticeable way.
So I’m left with the conclusion that the problem comes from the way I generate the list inside the last tab, which is actually the main content…