Improving UX through Front-End Performance

Here you are at the grocery store. You’re waiting for your turn at the cashier. Suddenly, you have an idea. You take out your phone, and want to do one quick thing; check your e-mail, look at your to-do list, check your Facebook or twitter account – and you only have the few seconds to accomplish this one thing.

From a web designer’s point of view, this is how long you have to interact with a user.

You have to design your processes, so they can be completed in just a few seconds. So factors like page load time, search time, or click through time can significantly affect your user’s experience, and slowdowns of even a half a second can decrease your traffic and ultimately, your revenue. Users expect pages to load within a couple of seconds, and each additional second after that decreases your traffic.

Can You Meet these Quick Load Standards?

If your site has a lot of content, different fonts, lots of dynamic elements, large JavaScript files, large graphic files – as many current sites do…then you may not be getting the quick load times you need. As a UX designer, you take user experience seriously, so you need to make performance optimization a fundamental part of your overall design. You need to build and test every single page you create for every single device type.

The Importance of Performance

A website’s performance begins at the design stage, and a design choice needs to be analyzed against page speed needs, as well as conversion rate possibilities. Every design element should be analyzed for its functionality. You must ask yourself questions like: Do I really need all of these colors? Is that 1,000 pixel background really necessary?

You can’t expect every design decision to favor web performance, there are still instances when a visual element can increase conversions. In these cases, a small sacrifice in web performance may be worth it. Still, visual appeal and performance need to be weighed against each other. Determine the worth of your visual changes by testing them against a small market. If these cause a significant negative change in traffic, then find another solution.

Your Code

Ensure speedy load times by cleaning up your HTML. Rename the non-semantic elements in your HTML, a process that can be time-consuming and tough, but once you start organizing the code in and remove design or grid names, you’ll start seeing a performance improvement. Some designers often add unnecessary IDs and elements to HTML, instead of cleaning up the CSS, which causes future performance issues. To keep your HTML clean you should:

• Clean up your CSS
• Remove inefficiency selectors.
• Remove excessive div code from your HTML. It saves on page load time but also on future development time.

Efficient CSS selectors are also easier to redesign and customize in the future as they are easier to read and have semantic meaning. Remember editable code associates well with good performance. Besides repurposable code offers smaller CSS and HTML files, which are easier to maintain, and redesign later.

Images

Use sprites for icons, instead of other types of image files; this can save page load times by as much as 16%. You can also clean up images by creating a sprite for repeating backgrounds, or one for vertical repeats and another for horizontal. Create another transparent sprite for your no-repeat backgrounds like your local and icons.

Run your website images through an optimizer like RIOT, ImageOptim or Image Optimizer to compress their file size. If possible, replace some of those with CSS three gradients. This makes it easier to edit the page later and optimizes it for web use. Consider using Base64 encode embedding it is in CSS file instead of calling them from a set URL.

Measuring performance

Once you’ve tweaked your design elements, make sure your efforts are doing some good by measuring the website’s performance. Use tools like Google PageSpeed or Yahoo YSlow to see what you can do to improve your page load times. You may also want to use the 3PO extension from YSlow, an application that checks your sites performance for scripts like Facebook, Google+ and Twitter.

Bottom Line

Web Performance affects user experience – so it should be every design team member’s job to be aware of, measure and optimize performance. Optimal page load time improves the website owner’s ROI so it needs to be a design priority – a much greater one than the ‘bells and whistles’ of beauty.