Note: This article is out of date, please check the latest article below:

Performance Tuning - Checklist

Performance Tuning - Chapter 1: Architecture and Design

Performance Tuning - Chapter 2: Implementation

Performance Tuning - Chapter 3: Deployment

Performance Tuning - Chapter 4: Server-side optimization

Performance Tuning - Chapter 5: Testing

Performance Tuning - Chapter 6: Conclusion

The performance of Backbase applications can easily be improved with general web development best practices, such as pioneered by Yahoo!’s Exceptional Performance team. In this article I’m outlining the most important optimizations, including some Backbase-specific hints. After you’ve developed your Backbase application there are several things you can do to improve the client-side performance without changing the functionality of the application. Let’s look at the optimizations one by one.

I’ve applied the changes discussed in the article to the Backbase Explorer (http://demo2.backbase.com/explorer) and compared that to the original Explorer (http://demo2.backbase.com/Backbase_4_2_0/demos/explorer/). It shows a 50% performance improvement, which will be even more if the web server is in a different part of the world, because network latency increases the farther you are away from the web server. The 'demo2' server is in Chicago and measurements were done from North Carolina, about 700 miles (1100 km) apart.

Before optimization:

After optimization:

Reduce the number of files

With modern broadband connections we have plenty of bandwidth. Unfortunately network latency hasn’t been reduced, so reducing the number of files means faster page loads. The following files can be merged:

• CSS files: aim to have only 1 CSS file on initial load
• XML files: resolve all xi:includes so they’re merged into 1 file
• Images: using CSS Sprites you can combine multiple images into 1

During development it’s often handy to have separate files to keep you code well-organized. Many developers are therefore using a build script to merge the CSS files and resolve the xi:includes just before deployment. Just make sure the files are included in the right order so dependencies are correct. We will publish some sample build scripts shortly, so you have examples to work with.

CSS Sprites can be automatically created, but for best results we suggest to create them manually, see the examples at Websiteoptimization.com.

Use a Content Distribution Network

Another way to battle latency is to bring the files closer to the end-user. Content Distribution Networks have many servers all over the world that cache static files close to the end-user. European users will load images and CSS files from Europe, while US visitors get them from the US. So our recommendation is to put images and CSS on a Content Distribution Network. The most well-known CDN vendors are Akamai and Mirror Image, both of which support complex setups; a simple and affordable solution is offered by Cachefly.

The build script can change the link to the CSS file to an absolute URL that points to the CDN (e.g. http://images.backbase.com). If the CSS has relative links to images, those images will be automatically loaded from the CDN, so make sure you copy them to the CDN. The build script can parse your XML files to change relative image links into absolute ones. Some of the Backbase bindings also contain image links, both regular image anchors as well as CSS images: for best results you might want to put those on the CDN too.

With a simple CDN setup that uses a subdomain it’s not possible to put the Backbase files on the CDN, because of cross-domain issues. However, both Mirror Image and Akamai support a reverse proxy setup: your domain points to the CDN, and the CDN serves your entire website, with the exception of the dynamic files: the CDN pulls dynamic pages from your site and passes them through to the website visitor. The CDN uses the HTTP headers to distinguish between static and dynamic content. See the image below for an illustration:

Static files are served by the nearest point-of-presence (POP) of the CDN, while dynamic requests are passed through to the origin server.

Use the Optimized Backbase Client Framework

The Backbase Client Framework is available in a development version and an optimized version. The optimized version does not have the development tools, and the source code is minified: therefore it runs faster than the development version. Simply link Backbase.js in the ‘Backbase_4_x_x_optimized’ folder instead of the ‘Backbase_4_x_x’ folder and you’re done. This is also an optimization that can be included in a build script.

Enable GZip on the web server

A very simple performance improvement that everybody should do is to enable GZip on the web server: with GZip the web server compresses all text-based files on the fly, and the web browser will decompress them on the fly, and as a result the files get up to 4 times smaller, which reduces download time of course. This works with all modern web browsers.

Conclusion

In the article I’ve tried to summarize the most important deployment optimizations for Backbase applications (and web applications in general). For further reading, please visit the resources below. If you have any questions or suggestions, please add comments below.

Resources:

• Yahoo’s Performance Pages
• Yahoo’s YSlow performance analysis tool
• Websiteoptimization.com
• Watchmouse worldwide performance check