Creating a great user experience extends beyond the research, beyond the wireframes, and even beyond the visual design. All that hard work is ultimately for nothing if your website or web application isn’t fast. Why? Because if your site doesn’t load quickly, your users will go elsewhere very quickly indeed!
There are a multitude of ways we go about making sure your websites are the best they can be, but one of the fundamental aspects to all our work is that what we deliver must load as fast as it can. At its very core, making your website as fast as possible for the end user means minimizing the payload that is delivered to that user. And there are a number of techniques that we can use to help that minimization:
Minify text files
Whitespace is useful to a human, but an irrelevance to a browser. So get rid of it! Before launching a site, minify all the text assets (the CSS files and JavaScript files). If possible, use a program or a script to take care of this as part of a push routine. However you go about it, make sure you do, because you can reap some serious savings by minifying alone.
Gzip all the things!
If you’re not serving up gzipped HTML, CSS and JavaScript to your users, you are doing it wrong! There is absolutely no reason (except if you still have to support absolutely ancient browsers – like Internet Explorer 1 kind of ancient – which didn’t support gzipping) to not enable this setting in Apache, IIS or whatever flavor of web server you’re using. And if your comeback is, “but it puts more of a strain on the server”, then I don’t care and you need to buy a faster CPU, and refocus your attention on the humans using your website, not the machine serving it up!
Bonus: Gzipping does a pretty good job of minifying by itself. Not as great as minifying and then gzipping, but pretty solid.
Concatenate, concatenate, concatenate
The more HTTP requests, the slower the website. It’s really that simple. So, use fewer! Use CSS sprites where possible to avoid a lot of unnecessary (and slow) HTTP requests. In the build process concatenate as many separate JavaScript files as you can into one. And do the same for your CSS. And to help with caching, if your concatenated files contain a unique string (maybe date-based) you can use that to your advantage…
Browsers have a cache. Use it!
In your .htaccess file on an Apache platform (IIS guys, use your equivalent) add Expires headers on content that won’t change very frequently. You know, like images, or the JavaScript and CSS files you concatenated earlier. As these files now have a unique identifier attached to them, every time you make a tweak and rebuild the concatenated file, you’re actually uploading a brand new file, so your changes will be applied globally, without your users having to do anything. And in the meantime, once they’ve visited a page on your site once, they’re happily browsing away using their locally cached copy of all your assets, meaning their experience is as fast as it can possibly be.
Perceived performance is as important as real performance
If you move all your JavaScript calls to the bottom of the HTML page, the browser doesn’t have to halt to load all of them first. Instead, it loads the content of the HTML file, and its associated CSS and images, and then loads the JavaScript last. That gets the user to the important stuff first! It’s no faster, but it feels faster.
Similarly, make sure all CSS is at the top of the document. That way it loads as quickly as possible and there’s no chance of a Flash of Unstyled Content (FOUC) disrupting the user’s experience of the page. Again, no real performance gain, but a perception of a high-performance site is incredibly important.
Living on the edge
With Responsive Web Design and retina screens now making big waves in the online space, it’s important to consider performance as early as possible, for as many devices as you can. For example, only load assets that are required at particular screen sizes. If you don’t need that call to jQuery and its associated plugins at a mobile screen size, don’t load them! Use an intelligent loader like Modernizr (with its built-in support for yepnope.js) to load based on screen width. Just doing this can shave valuable seconds off the load time of your website.
Another area that is gaining traction is the concept of responsive images. That is, images that are sized correctly for the screen upon which they are being viewed, and the bandwidth that is available to view them. Unfortunately, it’s so new that right now there isn’t a one-size-fits-all solution. I’d recommend reading this article to learn more about the various options that are available to us (as of 2012).
In conclusion
Take performance seriously from the outset. Because ultimately, it doesn’t matter how well researched your site is, how intuitive the information architecture is, and how great the visual design is, if that experience fails the performance test. Slow sites equal frustrated users. And no-one wants a frustrated user.
