Page 1 of 1

Consolidating and Compressing JS and CSS

Posted: 22 Jul 2010, 23:12
by smallya
Hi

Currently in my pages I have the following files downloaded as part of the request

<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/jquery/jquery.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/jquery/plugins/tooltip/jquery.qtip-1.0.min.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/primefaces/core/core.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/primefaces/tooltip/tooltip.js"></script>
<link rel="stylesheet" type="text/css" href="/application/primefaces_resource/2.1.RC1/jquery/plugins/ui/jquery.ui.dialog.css" />
<link rel="stylesheet" type="text/css" href="/application/primefaces_resource/2.1.RC1/jquery/plugins/ui/jquery.ui.resizable.css" />
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/jquery/plugins/ui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/primefaces/dialog/dialog.js"></script>
<link rel="stylesheet" type="text/css" href="/application/primefaces_resource/2.1.RC1/jquery/plugins/ui/jquery.ui.button.css" />
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/primefaces/button/button.js"></script>
<script type="text/javascript" src="/application/primefaces_resource/2.1.RC1/primefaces/ajaxstatus/ajaxstatus.js"></script>

And sometimes it is fewer or sometimes more.

I am looking at minifying and possibility of consolidating the CSS and JS files before they are delivered to Client browser so that I can get the performance benefits as outlined in http://code.google.com/speed/page-speed ... yload.html.
Wondering if anyone else as already given it a shot and if so any challenges you ran into?

P.S. I have already done it on my blog http://www.prudentcloud.com and they have really helped.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 00:02
by cagatay.civici
Hi,

PrimeFaces included resources are already minified and compressed. With appropriate cache headers they are also loaded once per client.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 00:14
by smallya
Thanks Cagatay. Just noticed that the files were minified already.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 00:50
by cagatay.civici
Yes, at build time resources are compressed before going into output jar. We use a maven plugin for this that is based on YUI compressor.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 01:33
by smallya
Good to know. Also good to see that with Themeroller/New Theming you guys started using sprites. That helps too. I am building a consumer web app and any/all performance boosts I can get would be great.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 07:17
by Oleg
Hi,

minified and compressed files are good but not enough. In my web apps I merge all JS to one big file and CSS files to one during maven project bulding. I can create so many files as I want, don't matter, they will merged to one with the same name as project / artefact name (e.g. myproject.js and myproject.css) and the download time is drastic reduced.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 10:07
by cagatay.civici
I agree, merging all js to one js and all css to one css would be the next step, we've discussed that in short but can't find a way that time.

Re: Consolidating and Compressing JS and CSS

Posted: 23 Jul 2010, 12:33
by Oleg
Hello Cagatay,

No problem. YUI compressor plugin with a light adjustment can do it for your :-)

Re: Consolidating and Compressing JS and CSS

Posted: 02 Aug 2010, 23:12
by smallya
Oleg
Thanks for sharing the information. Would you mind sharing more details on the Maven integration.
I am considering adding this to Ant build script itself - based on this post I found

http://javaflight.blogspot.com/2008/01/ ... -task.html

Maybe we can persuade Cagatay to post the collective findings somewhere in the Primefaces site under best practices until such time as his team finds a slot in their schedule to incorporate it natively.

Re: Consolidating and Compressing JS and CSS

Posted: 05 Apr 2013, 00:19
by grburgos
when building from trunk version of primefaces in netbeans. The primefaces.jar that gets generated does not have the js and css compressed. Is there an additional step that needs to be taken?