Improve performance of your web application by min...

Former Member · ‎03-26-2010

h2. Background

We released a web shop (http://www.hamperking.com.au (http://www.hamperking.com.au)) using SAP CRM 2007 late last year and recently implemented a number of improvements to the site. One area of focus was performance - how can we improve this without adding more hardware?

Investigate

The first step was to analyse responses from the server (I used httpwatch (http://www.httpwatch.com/)) and identify the time consuming requests. From this, I noticed a large number of CSS and JS files requested.

We had a number of custom developed and standard SAP CSS and JS files. For each to be retrieved, a time costly request is sent and the file is downloaded. It is possible to improve this process by:

1. Minification - this removes unnecessary characters (such as line breaks and spaces) from a file to reduce its file size.

2. Combination - merging multiple files into 1 reduces the number of HTTP requests made

3. Compression - This further reduces the size of the file and the data required to be download

The above can be achieved manually, by utilising tools such as http://compressor.ebiene.de/ (http://compressor.ebiene.de/) for minification,

Notepad

for combination and Winzip (http://www.winzip.com/index.htm) for compression. However this is a maintenance nightmare as it needs to be repeated whenever changes are made.

Solution

A preferred option is to leave the files as they are and dynamically minimise via java code. It is possible to write your own, but why do that when someone else has done all the hard work already?

*Pack:tag*

is a serverside static-resource compressing JSP-Taglib. It creates ad hoc compressed JavaScript or CSS in memory or in a file. Import this into your project and include into your code and you have dynamic CSS and JS minimisation.

To implement I followed the

documentation

:

1. Download the pack:tag archive from http://sourceforge.net/projects/packtag/ (http://sourceforge.net/projects/packtag/) and unpack the packtag-x.y.zip file to e.g. packtag

2. Copy packtag/files/packtag-x.y.jar into your web-applications WEB-INF/lib directory from the packtag/files/web.xml into your /WEB-INF/web.xml

4. Restart Web AS

To use the Pack:Tag taglib in a JSP:

1. Declare it first:

<%@ taglib uri="http://packtag.sf.net" prefix="pack" %>

2. Now you can pack JavaScript by using the following tag:

<pack:script src="/js/myJavaScriptFile.js"/>

3. Accordingly for Cascading Style Sheets:

<pack:style src="/css/myCascadingStyleSheet.css"/>

4. You can combine resources simply by listing them up:

<pack:script><br /> <src>/js/myJavaScriptFile.js</src><br /> <src>/js/mySecondJavaScriptFile.js</src><br /></pack:script>

If the files do not behave appropriately after minimisation, try different methods of compression. It is possible to change

configuration

in web.xml.

So... the results

0.1. After minimisation