UI Performance Tuning Tips

I believes that in today's Web 2.0 / Web 3.0 world, Web UI performance tuning deserves utmost attention alongside other Web development tasks. I have collated tips & techniques for UI performance Tuning. Most of them are result of my experience & experiments with UI optimization while working with multiple Web Apps development projects.

1. SERVER SIDE TWEAKS ( TOMCAT 7)

   1. COMPRESSING RESOURCES
      Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. This allows content to be sent over the network in more compact form and can result in a dramatic reduction in download time.In tomcat, The Connector (in server.xml) may use GZIP compression if following attributes are set with proper values :
      • compression: "off" (disable compression), "on" (allow compression, which causes text data to be compressed), "force" (forces compression in all cases), or a numerical integer value (which is equivalent to "on", but specifies the minimum amount of data before the output is compressed).
      • compressableMimeType: The value is a comma separated list of MIME types for which HTTP compression may be used. We will not compress images or similar binary types as these are already compressed; using gzip on them won't provide any additional benefit, and can actually make them larger.
      • compressionMinSize: size in bytes, resources above which will be compressed. Since gzipping is only beneficial for larger resources. Due to the overhead and latency of compression and decompression, you should only gzip files above a certain size threshold; recommended minimum range is between 150 and 1000 bytes. Gzipping files below 150 bytes can actually make them larger.
      • noCompressionUserAgents: The value is a regular expression (using java.util.regex) matching the user-agent header of HTTP clients for which compression should not be used.

      Following is example of optimal values for compression in server.xml file of tomcat.

2. LEVERAGE BROWSER CACHING

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. It is recommended to configure the web server to explicitly set caching headers and apply them to all cacheable static resources, Cacheable resources include JS and CSS files, image files, and other binary object files.

Tomcat has provided a Filter, ExpiresFilter, which we can set the expires header to the resources(css, javascript and images).

Following is the sample configuration that can be done in web.xml

    ExpiresFilter
    org.apache.catalina.filters.ExpiresFilter

       ExpiresByType image
       access plus 30 days

       ExpiresByType text/css
       access plus 30 days

       ExpiresByType text/javascript
       access plus 30 days

    ExpiresFilter
    /*
    REQUEST

Read http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html for more information.

• APPLICATION LEVEL TWEAKS

  1. MINIFY JAVASCRIPT

  Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. There are many compression tools available. I used YUI Compressor in our application to minify the javascript files during the build process.

  1. MINIFY CSS

  Minifying CSS has the same benefits as those for minifying JS: reducing network latency, enhancing compression, and faster browser loading and execution. YUI Compressor is used to minify.

  1. DEFER LOADING OF JAVASCRIPT

  Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time. If the scripts import and calls are added before the body in the webpage, the processing of all elements below the script is blocked until the browser loads the code from disk and executes it. In some browsers the browser blocks all other resources from being downloaded,while JavaScript is being processed. the solution for this is putting the scripts at the bottom of the page.(Not in all cases).

  1. OPTIMIZE IMAGES

  formatting and compressing images can save many bytes of data being downloaded.
  In our application we have optimized images which are larger in that 5kb.

  1. REMOVE REDUNDANT JAVASCRIPT CALLS

  redundant calls to same javascript fuction, may slower the page. Hence such redudant calls should be removed.

  1. OPTIMIZE AND MINIFY HTML

  minifying saves many bytes of data and speed up downloading, parsing, and execution time. Optimizing speeds up the rendering of the page.

  For example.

  Following is an example of a code in JSF, which is part of a table, and has same element written multiple times. Each one has a rendered attirbute which has different value only.

  For User Role A

  For User Role B

  For User Role C

  You will notice that the only difference it the render condition, so this can be optimized to

  The render conditions may vary, but we have to find a way to optimize the page.

• ICEFACES TWEAKS

  1. CONTEXT PARAMETERS FOR OPTIMIZING ICEFACES (AND JSF)

  Following are the context params added or updateed in web.xml

  1. org.icefaces.lazyPush: Default is true to activate the Ajax Push lazily. In our application it was set to false. So removed it
  2. com.sun.faces.responseBufferSize: set to optimum value as recommended by most developers on net

     		com.sun.faces.responseBufferSize
     		500000

  3. com.sun.faces.externalizeJavaScript: Allow browsers to cache javascript used in standard JSF components. This could be benefitial.

     		com.sun.faces.externalizeJavaScript
     		true