How fast does Vaadin 6 render a layout?

“Peter” on
claimed that a complicated form takes 10 seconds with Vaadin, but less than a second on some other web app framework. I took that as a challenge to verify his results.

Using his specification:

form with 3 column - each column contains 6*label+input, 2 tables, 12 buttons

I created a Vaadin 6.7.5 app that looks like this: (shrunken screenshot)

Hopefully you may find the app
up and running


• There does seem to be an overhead cost of 8-12 seconds initialization cost when launching a Vaadin app. I imagine this is mostly time taken to download the JavaScript libraries to the browser and initialize them. I cannot think of any easy ways to narrow that down.

• Creating a GridLayout takes about 1-2 milliseconds server-side. That is just for the GUI, no database access, etc. So populating a HorizontalLayout with 3 of those Gridlayouts takes about 7 milliseconds server-side.

• While creating a complicated layout takes only several milliseconds server-side, delivering that form to the user takes about 1-2 seconds over common Internets connections.

For details and source code, see
my blog post

–Basil Bourque

I’m really curious why it takes so long to initially load the app. This is waaaay to long imo. I dont experience it with other vaadin applications.

I really love Vaadin, however I avoid the default layouts (Except CssLayout, CustomLayout), because they can make your app very slow. Im really looking forward to version 7 and the new layout implementations.

Ideally you want every update withing 0.5 seconds

Give my source-code a whirl on your own equipment, in the spirit of scientific investigation. See my blog post link above – just copy and paste the single-class application. I tried to keep the app code simple yet somewhat realistic – please critique.

I use only a HorizontalLayout containing a button and 3 GridLayout instances.

My hunch is the bulk of time is initially downloading and initializing the Vaadin client-side engine over the Internets. Most of that time is spent displaying a built-in (not mine) spinning wheel over grey background. Seems like the web browsers cache well that initial download, as re-starting my Vaadin app much faster than the first time. Running server & client locally over a wifi (no Internets) is very fast, taking only a moment.

–Basil Bourque

You’re right, almost all of that 8–12 seconds goes to downloading the JavaScript, CSS and image resources. After that the actual layout rendering is fast. Not saying it couldn’t be faster, and I’m also very much waiting for the Vaadin 7 layout improvements.

Anyhow, it seems like you’re not using gzip to compress the resources. That should speed up the startup time significantly.

Props for the test, great to see people taking the effort to educate the rest of us!

As Jouni said - configuring the web server to use gzip compression should speed the initial load time a lot – I would expect have 50-70% reduction on initial startup time.

To further speed things up, you could leave out non-used components from the widget set if there are not really used. Effect of this would be less than use of gzip, but of course combining the both would be the best.

Thanks for benchmark!

your widget set is a bit more then 600KB when I look in Chrome. It looks like your hosting has a very slow upload. A website of my own has a widgetset of 700 KB and loads within 0,5 seconds.