Consolidating and Compressing JS and CSS

Components, Ajax Framework, Utilities and More.
Post Reply
smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

22 Jul 2010, 23:12

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

User avatar
optimus.prime
Prime
Posts: 17422
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 Jul 2010, 00:02

Hi,

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

smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

23 Jul 2010, 00:14

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

User avatar
optimus.prime
Prime
Posts: 17422
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 Jul 2010, 00:50

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.

smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

23 Jul 2010, 01:33

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

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

23 Jul 2010, 07:17

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
optimus.prime
Prime
Posts: 17422
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

23 Jul 2010, 10:07

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.

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

23 Jul 2010, 12:33

Hello Cagatay,

No problem. YUI compressor plugin with a light adjustment can do it for your :-)
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

smallya
Posts: 264
Joined: 19 Mar 2010, 19:22
Contact:

02 Aug 2010, 23:12

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

User avatar
grburgos
Posts: 171
Joined: 30 Sep 2010, 00:45
Contact:

05 Apr 2013, 00:19

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.54, JDK 1.8, PrimeFaces 5.3

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests