Improving the rendering speed

Hi
I have made a Vaadin web page and i’m now trying to improve the rendering speed.
The page design is a Navigation panel with four buttons and each button set a Panel to setVisible(true) and the other panels to setVisible(false) when clicked.
Each panel have a table and a Horizontal layout with 20 CssLayout that have a setStyleName to a css-sprit img and 10 Label.

Some debug console output:
On Load
Processing time was 1602ms for 9080 characters of JSON
Referenced paintables: 161

Load a new panel:

Processing time was 19638ms for 263 characters of JSON
Referenced paintables: 217

Question:

  • Should i use smartsprites with a CssLayout or should i use some other componets that that is only one

    .

  • Is it possible to improve rendering time two less than 1000 ms for a panel with about 50 componets?

  • The reindeer CSS is realy big 133 Kb is google have a document about how large css could effect render speed.
    Could the render speed be improved by remove unused css.
    http://code.google.com/speed/page-speed/docs/rendering.html

Some tips that made the application render faster.

  • Enable gzip on your tomcat this will make the reindeer CSS file size reduce to 20 kb. This will only improve the speed by some ms but every ms counts.
  • The new vaadin 6.4 works much better than 6.3 about 10 % faster

I wrote a small tutorial how i have it set up smartsprites in my eclipse workspace smartsprites is a greate tool so hope this helps.

  1. Download smartsprites but in your eclipse workspace folder:

  2. Move VAADIN dir form Vaadin.jar to {Eclipse project}/WebContent.

  3. edit smartsprites.properies
    root.dir.path=…/…/WebContent/VAADIN/themes/mytheme
    output.dir.path=…/…/WebContent/VAADIN/themes/mytheme

  4. make your own Css and run the smartsprites ant script

Example my css file
{Eclipse project}/WebContent/Vaadin/themes/mytheme/styles.css
@import “./css/my-sprite.css”;
@import “…/reindeer/styles.css”;

{Eclipse project}/WebContent//themes/mytheme/css/my.css

/** sprite: my; sprite-image: url(‘…/img/myspirit.gif’); sprite-layout: vertical /
.img1 {
width: 100px;
height: 120px;
background-repeat: no-repeat;
background-image: url(…/img/img1.gif); /
* sprite-ref: my; */
}

.img2 {
width: 100px;
height: 120px;
background-repeat: no-repeat;
background-image: url(…/img/img2.gif); /** sprite-ref: my; */
}