Vaadin Layout is too slow

I’ve got a data entry screen (see attached) that uses a grid layout (3columns, 16 rows). Within the grid layout, each cell contains a Horizontal or Vertical Layout to position the elements. It takes about 4 seconds to load this page in the Firefox6 and similar times in Chrome. This is way too slow to be useful. I’ve been experimenting with different layouts and such to get this to run faster. So far I’ve tried the following:

  1. Created a custom GWT component to handle the details in column 1 and 2. This gets me about 1/3 of the way there. However I don’t really want to do that for each row in column 3 as it is way more work than should be necessary.
  2. I’ve experimented with the supposedly faster layout objects (CssLayout, FastGrid). They don’t seem to help that much.

The generated UIDL is about 26KB for this window. I have verified that the delay is within the browser by profiling with Firebug.

I need to find a way to get this to run fast. I’d like it to be nearly instantaneous, however I’ll settle for a 1 second page load.

Any help you can provide is very much appreciated.


Yeah, GridLayout + lots of HorizontalLayouts + lots of selects is not a good combo. The main culprit is probably the GridLayout, as it is one of the heaviest Layouts there are; you could try AbsoluteLayout, if your view allows for it. Other things things to try are NativeSelects instead of Select (or ComboBox).

I assume you have tried FastGrid in combination with CssLayouts? I’m quite surprised that it wasn’t any faster than the non-fast layouts…

That’s the part that really slows this down. GridLayout should have the same setComponentAlignment methods as Horizontal-/VerticalLayout. Could you possibly get rid of them? Also consider having CssLayout in the cells if you absolutely need an additional layout in there.

There is also a wiki article on optimizing Vaadin UIs that might be worth a read.