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.
SERVER SIDE TWEAKS ( TOMCAT 7)
- 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.
- COMPRESSING RESOURCES
- 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.
Following is the sample configuration that can be done in web.xml
Read http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html for more information.
APPLICATION LEVEL TWEAKS
- 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.
- 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.
- 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.
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.
- CONTEXT PARAMETERS FOR OPTIMIZING ICEFACES (AND JSF)
Following are the context params added or updateed in web.xml
org.icefaces.lazyPush: Default is true to activate the Ajax Push lazily. In our application it was set to false. So removed it
com.sun.faces.responseBufferSize: set to optimum value as recommended by most developers on net