Board index JavaServer Faces General Consolidating and Compressing JS and CSS

Consolidating and Compressing JS and CSS

Components, Ajax Framework, Utilities and More.


Posts: 264

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.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit


Posts: 15040
Location: Cybertron

Hi,

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


Posts: 264

Thanks Cagatay. Just noticed that the files were minified already.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit


Posts: 15040
Location: Cybertron

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.
PrimeFaces Lead


Posts: 264

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.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit

Oleg User avatar
Expert Member

Posts: 3696
Location: Russia, Siberia => Germany, Black Forest
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.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 15040
Location: Cybertron

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.
PrimeFaces Lead

Oleg User avatar
Expert Member

Posts: 3696
Location: Russia, Siberia => Germany, Black Forest
Hello Cagatay,

No problem. YUI compressor plugin with a light adjustment can do it for your :-)
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 264

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.
Netbeans 7.2| GlassFish 3.2 | PostgreSQL 9.1| MongoDB | Primefaces 3.4.2
_______________________________________________________________
Subraya Mallya
http://tinyhabit.com |http://twitter.com/tinyhabit


Posts: 165

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?
Netbeans 8, Apache Tomcat 7.0.45, JDK 1.7, PrimeFaces 5


Return to General