Improving the load time of your user interface can have a direct impact upon the user experience of your application as well as an indirect impact in competitive search engine rankings. We’ve all experienced websites that took multiple seconds to load and required numerous page loads to complete a sequence. The wait time in aggregate becomes laborious and unless we really need that application or resource, we may be inclined to abort the sequence and move on. So with that in mind, let’s take a look at a few quick and easy wins for optimization the user interface speed.
First and foremost, one should start by looking at the underlying server application. If there are problems with slow-loading SQL queries or a lack or RAM which cause the application to respond slowly, then trying to optimize the application’s interface will be like worrying about a rain drop in a monsoon. So make sure the basic server application is in good health and has sufficient hardware resources to support it.
As you begin to look at the performance of your interface, there are a few good profiling tools that can be used to “instrument” your application and expose any issues. In particular I like Yahoo’s YSlow.
Below are a few items worth taking a look at:
1. Images Use – this is a conversation for your content department. They need to understand when to use Gif, JPG, and PNG compression schemes for images. Proper use of the correct compression in the right context can help to reduce the image size considerably. Also, make sure they are not uploading 2MB images and striking them down to display in a 200x200px area. This little bugaboo seems simple but is surprisingly common. A little image education for your content team will go a long way!
2. Content Delivery – If you are a popular site with national or international exposure, consider using a content delivery network such as Amazon AWS or Akamai. They maintain server clusters spread out geographically and will syndicate out your content to all these servers, allowing end-consumers to employ least cost routing and download those images from the nearest servers. Simply having those requested assets traveling a shorter distance alone can make quite a difference. If you’re a smaller geographically specific site, use a regional ISP to host your application.
4. GZip – Add a few instructions to your .htaccess file (assuming a Linux server) and allow your server to GZip all of your assets. This again can significantly reduce the size of each asset and provide incremental speed improvement. Most modern browsers are already able to accept GZip files so its just a matter of enabling your server. You can just include this snippet at the top of your htaccess file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
# End Gzip
5. Keep Alive – Make sure your server is setup to allow HTTP connections to stay alive for the duration of the page download. It can then use the same connections for the sequential resource requests and not need to re-negotiate connections.
Not all of these items has a profound impact on user experience alone, but if you look at this effort in aggregate, it can lead to substantial gains in load time, and allow you to improve your user experience with minimal additional cost. And alot of the caching considering and image sizes etc can be helped with simple-to-use plugins for open source frameworks such as Drupal and WordPress. W3 Cache in particular is useful for managing browser cache, GZip, and data object cache.