Fast Load Makes For Better Experience
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 the 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.
3. Minify – There are tools provided by Yahoo and others that you can use to process your Javascript, CSS, and even your HTML to remove spaces, carriage returns, and comments. You’d do this for the assets you’re going to deploy and traditionally use a suffix of *.min.js to differentiate from your working files. This can reduce the size of those files as much as 50-60% and thus reduce download incrementally.
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:
# Begin Gzip (compress text, html, javascript, css, xml)
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
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# End Gzip
5. Enable Browser Caching – Include the proper pragma tags to instruct the browser to cache the common files. This doesn’t help on the initial page load but can help significantly on subsequent page loads, if your template uses heavy CSS, Javascript, and images, since it won’t need to re-request those files.
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.
6. Fewer Files – Keep in mind that most browsers only allow 8 concurrent server connections by default, so the more files you have to download, the longer it will take. Think of the line of people on the Interstate that precedes a lane closure on a busy freeway. You can improve this by concatenating all of your Javascript into just one file; same with CSS. Reduce the number of images and use CSS instead where possible.
7. Application Design – Sometimes the user can still experience slow rendering time, even if the loading time is okay. Think about the days of nested tables (a few years ago) and how much that use to slow down the rendering of the HTML document if it was too deep. Even if you’re coding in a cleaner table-less HTML format, rendering can still be slow for similar reasons due to other factors such as Javascript. The browser must load the HTML and Javascript and build complex data models that reflect those instructions and if the logic is too intense, it can add a couple of seconds to the load time.
8. Lazy Loading – Just as Javascript can be a problem for rendering times, it can also be a terrific benefit. Consider lazy loading. The JQuery and YUI libraries offer resources to delay the loading of images that naturally fall “below the fold” of the browser. They will not load until scrolling behavior is detected and the images need the fold of the browser window. The next result is that all those extra images on a long product list page did not need to be included in the initial page load.
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 the managing browser cache, GZip, and data object cache.