i almost finished my first Vaadin big project. I’m quite happy about the framework, but atm my server-side application is very slow on first load and need some help.
I’m using a complete custom themes (deleted all reference to the original theme). When i load the first page i can see the image background, then i need about 10 second to see all html content in the page. In NET i can read a lot of data loaded (even 1.1mb) like:
5009B17BEB6990CC347A017AD2B8BF6D.cache.js (the name can change) 700kb
I have this POST call “in pending” for some seconds:
i’m working on widget but didn’t see this article. So i will try this too, tnx
One more little information, how u can see i have 10 requests. 1 - 7 are very fast (even the cache.js 1mb file). After this requests it’s like a freeze. Browser and server not working for something like 5/6 seconds, then i have the last 3 requests. How is this possible?? Someone can explain what the hell are happening beetwen request 7 and 8??
if your app is on a public server, I very much recommend pingdom.com. There is a section tools where you can let them test your site from various locations, and then they give you much informatiion about your website, and recommendations for tuning. its free to use.
in case you run on tomcat, switch compression on in server.xml:
this can reduce download size of page to about one third.
I also recommend using openjre over sun/oracle jre on server, it has much better performance and memory handling.
Based on the screenshot, the server responds fast as soon as the client requests those files, so this is really at the browser end. Is the browser using CPU time during those 5 seconds?
If the debug console starts up early enough (add “?debug” to your URL), try to see if it reports what is happening or has informative timestamps.
No, the browser aren’t using CPU during the 5 seconds freeze.
I’m doing some test with reindeer theme too (we dont import it on our theme) and all is fine (just 2.3second on my creepy localhost server!!!). If i switch on custom theme the problem come up again.
I have come across exactly this problem recently, and confused me for a day a so - if you are using a “normal” csstheme (i.e. themes/custom-theme/styles.css, as opposed to the new-style “Sass” theme - themes/custom-theme/styles.scss) you should import the legacy-styles.css from the base theme, not styles.css. This is mentioned in
Section 8.4.2 of The Book Of Vaadin This took a long time to work out!
e.g.
@import "../reindeer/legacy-styles.css";
Cheers,
Tnx Charles, this plus the debug window really helped me. I imported the legacy-styles and now the application is very fast (1.5sec and i have a lot of layouts in).
Now i need to tell to the graphic guy he must re-work on scss/css, probably he will to kill me
Sass style sheets can be compiled to CSS, with the styles.css of a custom theme as the compilation target, Instead of having them compiled on the fly which takes some extra seconds runtime.
Luckily it shows that there’s a fix for it, but I haven’t tested it yet. The fix has been scheduled for 7.0.6, and it’s probably also in 7.1.beta1 (didn’t check that either).
The ticket shouldn’t be the issue for the post with the screenshot because there is no request pending during the delay - assuming the network page contents are complete. For the others in this thread it might be.
Otherwise on the ticket Jouni mentioned: one performance issue in the SASS compiler has been fixed, but its effects should be roughly halving the theme compilation time - typically from under 2s to about 1s or so. If there are still delays much longer than 5s, they are most likely due to something completely different in the import phase of theme compilation (possibly related to file locking?). I haven’t been able to reproduce these very long theme compilation times myself.
you are right. Anycase i compiled my .scss in .css and import legacy-styles.css by reindeer, how suggested by Charles. Now the app is ok (1.5 seconds on an online server, and the UI have a lot of layouts). Anycase i still have problem with .scss.