skin performance

[cremersstijn]

We've created our own custom skin.

But we have some peformance problems: everytime we switch to another page, the browser flashes a white screen before loading the actual page.. the white screen is visible for 1/10 of a second, but it is very annoying...

when we put all the css in a separate css file and all the images in our web application and not in the skin, everythings works like it should be...

The flashing is more visible in IE6 then in firefox.

Anybody an idea how to fix this or how to increase the performance?

[ilya_shaikovsky]

It seems that you trying to switch skin or navigate via a4j controls. It should not be done via Ajax.

[cremersstijn]

I doesn't understand your comment...

I've declared the skin in the web.xml:

<context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>elcskin</param-value>
</context-param>

I'm not switch the skin at runtime...

I navigate between the different pages with the <rich:menuItem/>.

But i think i definitely has something to do with the skin, because when i set the skin to darkX the flashing is gone... and when is set the skin the classic and included the css (that is in the our custom skin) in a separete css file and include that in my web application, the flashing is also gone...

[cremersstijn]

Is it possible to load ways all the xcss files from the skin into 1 css file?

[nbelaevski]

Hi,

Yes, here is an example:

<?xml version="1.0" encoding="UTF-8"?>

<f:template xmlns:f='http:/jsf.exadel.com/template'
 xmlns:u='http:/jsf.exadel.com/template/util'
 xmlns="http://www.w3.org/1999/xhtml">

 <f:importResource src="org/richfaces/renderkit/html/css/basic.xcss" />
 <f:importResource src="org/richfaces/renderkit/html/css/basic_classes.xcss" />

 <f:importResource src="org/richfaces/skin.xcss" />
</f:template>

[cremersstijn]

This is my xcss file (elcskin.xcss):

<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f='http:/jsf.exadel.com/template'
 xmlns:u='http:/jsf.exadel.com/template/util'
 xmlns="http://www.w3.org/1999/xhtml" >

 <f:importResource src="com/nike/elcskin/css/all.xcss" />

</f:template>

but when the skin in rendered in the browser, there are many css files:

http://localhost:9090/odt/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAGT-hQjEbp8hjQADqoDMA__.faces
http://localhost:9090/odt/a4j/s/3_3_2.SR1css/toolBar.xcss/DATB/eAGT-hQjEbp8hjQADqoDMA__.faces
http://localhost:9090/odt/a4j/s/3_3_2.SR1css/panel.xcss/DATB/eAGT-hQjEbp8hjQADqoDMA__.faces

Isn't it possible to load all the css into 1 big css file instead of these many small files?

[cremersstijn]

I've found the bottleneck:

We use some background-images for our buttons, menus, body...

This is what we did:

define them in resource-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<resource-config>

 <resource>
 <name>com/nike/elcskin/images/button-bg.gif</name>
 <path>com/nike/elcskin/images/button-bg.gif</path>
 </resource>
 <resource>
 <name>com/nike/elcskin/images/button-disabled-bg.gif</name>
 <path>com/nike/elcskin/images/button-disabled-bg.gif</path>
 </resource>

</resource-config>

In the .xccs file we set them with f:resource:

<u:style name="background-image">
 <f:resource xmlns:f="http://jsf.exadel.com/template" f:key="com/nike/elcskin/images/horNav-bg.gif"/>
 </u:style>

Now, i've put all the images in the web project and refer to them with relative paths:

<u:style name="background-image" value="url(../../../../../../images/horNav-bg.gif)" />

And now the performance is good.

But... now the images aren't in the skin, but in the web projects themself...
is there a solution to put them in the skin with good performance?

[ilya_shaikovsky]

Isn't it possible to load all the css into 1 big css file instead of these many small files?

yes

 <context-param>
 <param-name>org.richfaces.LoadStyleStrategy</param-name>
 <param-value>ALL</param-value>
 </context-param>
 <context-param>
 <param-name>org.richfaces.LoadScriptStrategy</param-name>
 <param-value>ALL</param-value>
 </context-param>

[nbelaevski]

"cremersstijn" wrote:
I've found the bottleneck:

We use some background-images for our buttons, menus, body...

This is what we did:

define them in resource-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<resource-config>

 <resource>
 <name>com/nike/elcskin/images/button-bg.gif</name>
 <path>com/nike/elcskin/images/button-bg.gif</path>
 </resource>
 <resource>
 <name>com/nike/elcskin/images/button-disabled-bg.gif</name>
 <path>com/nike/elcskin/images/button-disabled-bg.gif</path>
 </resource>

</resource-config>

In the .xccs file we set them with f:resource:

<u:style name="background-image">
 <f:resource xmlns:f="http://jsf.exadel.com/template" f:key="com/nike/elcskin/images/horNav-bg.gif"/>
 </u:style>

Now, i've put all the images in the web project and refer to them with relative paths:

<u:style name="background-image" value="url(../../../../../../images/horNav-bg.gif)" />

And now the performance is good.

But... now the images aren't in the skin, but in the web projects themself...
is there a solution to put them in the skin with good performance?

Hi,

Have you tried to use CSS sprites?

[cremersstijn]

not yet...

but do you have an idea why to performance is better when we but the images in the web projects themself instead of in the skin?

[nbelaevski]

Classpath resources require additional handling, like scanning through all classpath .jar files, reading from .zip entries, etc. Have you tried profiling this issue?

[cremersstijn]

what do you mean by profiling?

[nbelaevski]

"cremersstijn" wrote:
what do you mean by profiling?

Collecting execution time data, here is an article describing profiling using Eclipse TPTP: http://www.eclipse.org/articles/Article-TPTP-Profiling-Tool/tptpProfilingArticle.html