I have been using Vaadin for a quite a time to develop portlets. I am trying to optimize the site in all possible ways.
I noticed that whenever vaadin portlets are rendered, there are few other contents which are getting transferred to the browser.
e.g.
nocache.js
This is happening for every request except in the case of Child Window. . Can’t we cache them in the browser and how to do that ?
I have tried gzip compression also . But its not helping me.
I would appreciate any kind of information to optimize Vaadin UI .
The nocache JavaScript file is a very small loader that only serves to load the bigger (cacheable) correct permutation of the compiled widgetset. There are good reasons why the small loader file should not be cached, including making updating the software in a sensible way possible.
To optimize your application, the first and most important rule is to know what you need to optimize. For that, you should profile what are the actual bottlenecks in your case. Are the main issues in loading the application with an empty browser cache, in loading the application that you have already accessed, in layout performance, in server side performance, …? Three key words in optimization: profile, profile, profile - and do not spend effort on optimizing parts that are not a bottleneck.
Use “?debug” in your URL and check how much time requests to the server are taking.
There are also some other resources out there like
Optimizing Sluggish UI blog post . You should pretty much always enable gzip compression - it will help a little at least when a user comes in with nothing in browser cache. For the initial loading, also minimizing the set of initially loaded widgets in the widgetset can help, although going too far with it can hurt later run-time performance a little so you should not go to extremes with it without testing everything.
I tried with simple Vaadin Portlet which has got nothing but a single Label component . I am using Liferay Portal and enable all performance (caching) tuning options in portal-ext.properties.
For Liferay portlets, after a couple of clicks on portal menu, its not rendering much data to the n/w.
Whereas in case of Vaadin portlet, its always rendering more (almost 50% more ) of the same data which was on the Liferay Portlet.
Wandering whenever Vaadin portlet is rendered, is it always refreshing the
entire page content from the server every time ??
No - only changes are fetched, and not as HTML but in an internal format. Refreshing the whole page every time would eliminate many of the benefits of Vaadin and accentuate its limitations.
You should not see files like nocache.js being loaded on every Ajax request (such as button clicks in the portlet), only on page refreshes. Page refreshes may happen when adding or removing portlets on the page or when e.g. using certain forms of inter-portlet communication.
For a trivial (e.g. short label only) portlet, fetching the content as HTML might be more efficient while for most applications of normal complexity the Vaadin approach fetches considerably less data on average when interacting with the application, only updating the components that have changed. The initial load (widgetset and themes) is larger with Vaadin, but almost all of these data (except for the startup HTML and the tiny nocache.js loader JavaScript) are then cached on the browser.
