Consolidating and Compressing JS and CSS
Posted: 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.
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.