Slow Application

I all,

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:

http://localhost:8080/groupamaprivate/?v-browserDetails=1&theme=groupama&v-sh=768&v-sw=1366&v-cw=1366&v-ch=653&v-curdate=1368108294671&v-tzo=-60&v-dstd=0&v-rtzo=-60&v-dston=false&v-vw=1366&v-vh=0&v-loc=http%3A%2F%2Flocalhost%3A8080%2Fgroupamaprivate%2F&v-wn=groupamaPublic-1550853343-0.7216596519574523&v-1368108294683

i followed this link with not success:

I’m not using custom widget and similar. The navigation inside the app is ok. If u need, i build my app under Vaadin 7.0.5 with Eclipse Plugin.

Can someone help me?

Fast update. I’m building a complete new project with a simple ui


public class UI extends com.vaadin.ui.UI{

	private static final long serialVersionUID = -3663309382565382535L;

	
	
	@Override
	protected void init(VaadinRequest request) {
		this.getPage().setTitle("Test");
		this.setContent(buildHeader());
	}
	
	private VerticalLayout buildHeader(){
		VerticalLayout header = new VerticalLayout();
		//Componenti dell'header
		Link logo = new Link("Logo", new ExternalResource("http:8080/vaadintest"));
		logo.setIcon(new FileResource(new File(VaadinService.getCurrent().getBaseDirectory().getAbsolutePath() + "/WEB-INF/images/logo.gif")));
		
		//Setting sull'header
		header.setHeight(300, Unit.PIXELS);
		header.setWidth(400, Unit.PIXELS);
		header.setImmediate(true);
		header.setCaption("Header");
		//Aggiunta componenti all'header
		header.addComponent(logo);
		
		return header;
	}


}

1.2 Mb Tranfered, 2second for load and 1.0mb by the following file:

B1A4EC7D1ABDE39CA12A6A6D3BB60D8F.cache.js
/vaadintest/VAADIN/widgetsets/com.vaadin.DefaultWidgetSet

Can i shrink this javascript??

Hi Manuel,

Take a look to
Optimizing the Widget Set
entry in the wiki.

HTH,

Javi

Hi Javier,

i’m working on widget but didn’t see this article. So i will try this too, tnx :slight_smile:

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.

lThe app is on a private server under tomcat 7 and jvm 6 (all of this on Linux) but i will try with this configuration in server.xml

We are doing a lot test with Tshark too without results.

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.

Tnx Henri.

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,

Charles.

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 :smiley:

see also: https://vaadin.com/de/book/vaadin7/-/page/themes.sass.html

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.

Hi,

There’s definitely something wrong with the Sass compiler, and I’m quite sure the issue you’re all encountering is this:
HTTP request for styles.css takes over 30 seconds
.

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.

Hi Jouni,

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.

Tnx all for the help.