Compress components with gzip - Java EE

Question

I am looking to improve front-end performance of my application, so I used YSlow tool in Firefox. When I ran this tool for my app, in the YSlow grade tab it showed up a issue 'Grade F on Compress components with gzip'. Seems to be that we need to compress the files(js, css) while sending from the server to client to increase the server response time.

My app is a Struts Java application. Can anyone let me know how to compress and send the front end UI files(JS,CSS) from server so that the response time increases and my pages lot fastly? What are the things that I need to do to compress these files in Java at server?

Answer 1

I recommend to use a Servlet Filter (since servlet 2.3 spec)

A gzip filter is well documented, so there is no need to reinvent the wheel:

• http://raibledesigns.com/rd/entry/the_battle_of_the_gzip
• http://onjava.com/pub/a/onjava/2003/11/19/filters.html

Also, some servlet containers can do gzip on the fly. Take a look at this related question.

Answer 2

To improve client side performance of Java EE web application, WebUtilities java library can be helpful.

Here is the link :: https://github.com/rpatil26/webutilities.

It is also available through maven central.

Since version 0.0.4 it helps with following performance practices.

1. Minimize HTTP requests - can serve multiple JS/CSS files in one request
2. Client Side Caching - adds proper Cache-Control, Expires header
3. On the fly JS/CSS minification - using YUICompressor
4. Compression - supports 2way compression for gzip/deflate/compress encodings
5. Response Caching at Server - to avoid reprocessing of unchanged resources
6. Add Character Encoding - to let browser know in advance

Answer 3

I recommend to use Granule Tag lib the http://code.google.com/p/granule/

It gzip and combine javascripts wrapped by g:compress tag

code sample is:

<g:compress>
  <script type="text/javascript" src="common.js"/>
  <script type="text/javascript" src="closure/goog/base.js"/>
  <script>
       goog.require('goog.dom');
       goog.require('goog.date');
       goog.require('goog.ui.DatePicker');
  </script>
  <script type="text/javascript">
      var dp = new goog.ui.DatePicker();
      dp.render(document.getElementById('datepicker'));
  </script>
</g:compress>
...

Answer 4

You normally configure it at appserver/servletcontainer level. I don't know which one you're using, so here's just a Tomcat targeted example. In the /conf/server.xml configure the <Connector> component as follows:

<Connector compression="on">

That's all. Just add compression="on". The other servers provides a comparable setting. consult its documentation for details. Often it's exactly the same because they're built on top of Tomcat.

For more YSlow hints in Java EE webapplication perspective you may find this blog article more useful.

Answer 5

Are you sure you are trying to compress JS and CSS rather than trying to minify it? Generally JS and CSS are cached by the browser after the first visit provided your caching headers are set correctly by your web server. In practice I have found that minifying JS and CSS is usually good enough for the initial download by the browser.

There are many JS minifiers. For example one is located here.