What more to do on performance?

I have done all performance-optimizations I have found online, and all those I can think of. But it is not enough.
In the browser, my site loads in about 3 secons. That is ok. But on mobile it takes 10+ secs (on my quite new budget mobile). And this is when most stuff is cached and only 18Kb of data transfered on a refresh. There must be something fundamental I have missed.

I have done:

  1. Removed all valo-components from the scss that are not used by my app.
  2. Put only those components that are used on the front-page as EAGER in the widgetset, all else as deferred or lazy.
  3. Made the initial page at least not heavy on layouts etc.

My guess is that since I am using quite a lot of components and addons on the site in total, there is so much js and css that the CPU on the mobile has to do a lot of work to init everything before it is able to show the front page.

Is there anything that I have missed that could help me reduce the initial load time? 10+ secs is not acceptable.

the site, if you want to see it for yourself, is

Hi Jonas,

I took a look at your site. For me the loading time was under one second. But as you yourself mentioned, you are using quite a lot of components and many of them are unnecessary. For instance you seem to wrap all your elements inside card-apfrontpublic into CssLayouts and then you place them into the VerticalLayout. While CssLayout is a quick component, it is still something that is not needed and could be removed.

I also took a look at the Competitions tab and I saw basically the same thing, you are displaying a Label with some data but that Label is wrapped into 3 different CssLayouts before it is placed into the card-sr-competition HorizontalLayout. This could be handled by one VerticalLayout that contains a Label for each entry.

Thanks for your input Sebastian,

I have removed as many layouts as I could without breaking my overall structure, and it made a bigger change than I expected. Great!

Yeah, the site loads really fast on a lappy. A second or less as you saw. It is on a mobile phone the problem occurs. I am now down to 7-8 seconds for the front page on my phone. Which is far better than the 12 sec before the latest changes. But still not good enough.

My non-expert idea is in the area of modularize/lazyload the css. There are >2700 unused css-rules loaded for the front page which is a lot. But they are used for the rest of the application even though a lot of it is never used by a casual visitor. Is this possible? I haven’t seen any information about this anywhere. Or should I look in another direction?

A really good step forward, a few more to go though :slight_smile:

Glad to hear it helped. LazyLoading and removing unused css is certainly one option to do but the
reason why Vaadin applications might be slow is the number of components placed into the DOM tree. So I would try to focus on reducing the number of components used. Second thing would be to try and replace Horizontal- / VerticalLayouts with CssLayouts wherever it makes sense and isn’t too much work, also make sure you don’t use Panels anywhere except if you need scrollbars inside your application (so not talking about the browser scrollbars).

After this you should probably try and take a look at what is actually causing the delay, is it the rendering time or is it the amount of data that has to be sent to the mobile phone or what ?

That’s at least where I would start :slight_smile: Good luck !