One of the tools I have been appreciated over the past week or so is something called YSlow, a validator for Steve Sounders Rules for High Performance Websites, built as a plug-in for Firebug. It has got me thinking, thats all very well and good when we talk about mostly static web experiences, but how do they apply to rich internet applications, built using the likes of Flash or Flex.
Many of the performance rules such as consolidating CSS and JavaScript, moving CSS to the top of your document etc. are not really applicable in this case. Whereas some rules such as reducing the number of HTTP requests will always be relevant.
Lets have a look and see if we can produce our own set of performance tips specifically for RIA developers. All comments appreciated!
Performance Tips for Flash/Flex Rich Internet Applications
- Make fewer HTTP requests in your containing HTML page.
As the average browser can only make up to 6 concurrent HTTP requests out-of-the-box, it is important that your HTML page is optimized for this. As you will likely be using a JavaScript library such as SWFObject in order to embed your RIA, this functionality will not be executed until the page is loaded, meaning that the SWF file will likely be towards the end of the download queue. Thats fine, unless the browser is tied up with downloading other items… For the end user this means they will spend longer looking at an empty page, which is not a good experience.
In order to solve for this, one should refer to the wisdom of YSlow.
- Manage User Expectations.
The likelihood is that your SWF file is going to be fairly heavy, and take a not-insignificant amount of time to download. This is especially true if you are using the Flex framework within your application. If this is the case, it is absolutely essential that you consider giving the user feedback that something is loading, and how long it is going to take. It prevents abandonment and makes the whole experience seem more responsive.
Similarly, if at any point an application is required to go off and load more data, similar user feedback should be employed if the response is going to take more than a second.Some would argue that the use of preloaders is indicative of a slow application, that may be true, but a longer perceived load time and unresponsive UI are probably more indicative of a slow application!
- Prioritize Dynamic Content.
Its easy to get carried away when building applications, externally loading XML files, CSS files and background images so that pretty much every aspect of your application is configurable by external files, rather than a recompilation. Fantastic, except when we consider that all of these files need to be loaded before the application can even thing about rendering.
Its worthwhile to make a list of all the data files and graphical assets which your application needs to load pre-render. Prioritize these based on how often each particular item is likely to be updated. Consider relocating some of these assets inside your SWF.Its nice to specify text styles using CSS or XML, but if no-one is likely to change it, then do you need it, especially since this could be relocated to an ActionScript class and potential shave a second or two off load time.
- Consolidate External Data.
Calls to external services are expensive, often with a round-trip response time of a second or so, and usually coupled with a second call to a crossdomain.xml file. These are a bottleneck, and there is nothing that can be done here. However, if you are making multiple calls, consider consolidating them by developing a server side component which can make both calls, merge the data and return the result. This reduces the client-side overhead, and lets you manipulate the results on the server side if necessary, making your application feel more responsive.
- Load Cross Domain files up front.
If a service call is inevitable, consider loading the crossdomain.xml file up front to avoid delaying your initial service requests.
- Don’t be afraid to cache data.
If data is unlikely to go out of date, or if you want your UI to appear responsive, pre-populated with data, then why not cache data on the client? Data can be stored in a local shared object, and retrieved on the next load of the application. This creates the impression of a responsive UI and can save on HTTP requests.
In the background, its important to set an expires property so that you can manage data refreshes, based on the lifetime of the data in question. Weather information may have a lifetime of an hour or so, whereas a user’s profile information often has a lifetime of at least a few days.If data is secure then this method should not be used, unless in conjunction with encryption, as the shared object is accessible on the user’s filesystem.
(more…)
