Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Optimizing rendering times on tablet with lots of components
I'm trying to optimize our vaadin application. I'm already using the OptimizedCibbectorBundleLoaderFactory, am in production mode and use lazy loading where it makes sense. On my desktop the site is quite fast & I'm happy with it, but on the tablet I'm testing the app it is still rather slow.
It doesn't seem to be the network speed, as I tested this in chrome with the throttling feature and the tablet loads comparable to chrome with GPRS throttling.
I have two import sites that currently are the focus of my optimizations. A site with a grid (10 columns, lots of rows, lazy loading via LazyEntityContainer) and a site with a form to enter a new record (50+ text fields & buttons).
On the desktop the form (~202ms) is faster than the list (~568ms). On the tablet the form (~3,5s) is significantly slower than the list (~3s).
To me it looks like the rendering time is the problem. I think I should reduce the amount of components that are in the form, but I can't just take input fields away, they are needed. But some of our input fields are "composite components", consiting of a textfield and a button. The button opens a list to select from, the textfield displays the selected value. Now here it gets interesting for me. How could I merge these two components / two connectors into one.
Do I gain anything if I wrap those in a CustomComponent?Or is it better to create a completly new widget that achieves the same?
Another thing is there are quite some layouts interleaved. A VL containing panels, containing HLs, containing multiples VLs, containing VLs for the "composite components" descriped above.
I'm currently working on minimizing these, but I don't have rendering timestamps for this (yet).
If you have a suggestion what could cause additional problems as well / solutions to speed up the site, feel free to tell me!
Thanks in advance!
Edit: One additional thing that came to my mind. Does anyone know if there are performance differences between using one GridLayout compared to using a VerticalLayout with multiple nested HorizontalLayouts?