Website Performance & User Experience

Cheetah abstract

The User Experience (UX)

In this article we’re going to focus on website performance & how it effects user experience.

When we think of User Experience (UX) we often refer to how the user perceives a website. Questions one might ask could be “Does the website provide them with any genuine value? Is it easy to understand or a pleasure to use?”.

Now of course, these are legitimate questions and if the answer is “yes” then the there’s a high chance the website in question provides a good user experience.

Due to the ever increasing number of devices the web is now available on, user experience design has become something of a hot topic in the past few years, and rightly so. Web designers continue to strive to improve usability and accessibility for web users and it’s an important discipline.

There is a responsibility for us, as designers to continue to take the initiative and constantly find new and improved ways of delivering the web to its users.

But one huge factor of user experience which is often overlooked is the performance of the website itself.

So where as on one side of the fence we have our web/user experience designers working away on solutions on how to make a users journey through a site pleasurable, it’s essential that the web developers on the other side of the fence take just as much care with how they build the site.

Lets explore this in a little more depth.

Developing For Optimisation

When budgets and deadlines are tight it’s highly possible shortcuts may be taken by some developers and nine times out of ten these shortcuts will have zero impact visually on the final product and even more likely to be completely unnoticeable to the human eye.

But shortcuts can have long term affects.

If you can imagine, your homepage consists of lets say twelve hundred lines of code. That’s twelve hundred lines of code that a users web browser will need to render in order to display the site. It may only take five seconds to do so, but what if your users are on a poor network connection? That five seconds could then turn into seven seconds.

When you consider that the average mobile user will only wait between six to ten seconds for a page to load it’s not a risk worth taking. Here are some statistics which may surprise you:

  • 25% of web users will abandon a page if it does not load within four seconds.
  • 21% of mobile internet users expect about the same load times as they would get on their desktop.
  • 79% of online shoppers reported that it would be unlikely they would buy from the same online store again if the website performance was unsatisfactory.
  • A one second delay in page response can result in a 7% reduction in conversions.

Sources: gomez.com, akamai.com

So as the above statistics show, if a website is under performing then it will massively devalue the user experience and quite significantly too.

How To Improve Website Performance For A Better User Experience

The first item on your checklist should be to put your site through some speed checks.

As always the web comes to the rescue and there are many fantastic free tools available online which will quickly and effectively test your website.

It’s worth mentioning that even though you may consider your site pretty fast in regards to loading times, there is a good chance that if you’re testing it yourself on your own desktop, mobile or tablet that your site has been cached several times. Therefore this will mislead you as many of the elements would have been downloaded by your browser previously. Therefore loading quicker the next time you visit your domain.

Page Speed Test

Here are some of there free tools available to test the speed of your site:

What the above sites offer are easy to use tools where by simply entering your domain name you can test within less than a minute the speed of your website. What’s even more beneficial is that after the test results have been made clear to you, the reports will indicate where you could improve your load times. Pretty handy right?

Leverage & Minimise (Javascript) JS

One major factor in slow load times are the scripts that control the interactive elements on most websites.

In an ideal world, all Javascript would be called in via one single JS file. However this isn’t always possible and from a developers point of view when it comes to debugging, it’s a lot easier to debug a single file at a time.

But when possible it is recommended to try an minimise the number of scripts being called in.

The reason for this is because when a site is being loaded by a browser, under normal circumstances it’s the Javascript which is first in line and must load first in order for the other elements to follow. So if you have just one JS file which is slow to join the party so to speak then it will just delay the whole process of the page loading.

But if it’s just one or two files in the queue then naturally there isn’t much waiting around. Unless of course the file in question is littered with errors.

Another way to combat the waiting times on JS files to load is to leverage them.

What this means is that a developer or site administrator can specify how long browsers should keep images, CSS and JS stored locally. This means the browser having to not repeat the process of downloading them all over again upon the next visit.

Another way to speed up the process is to move ‘less important’ Javascript to the bottom of the page.

This allows for the more important elements to load first. This at least gives the user some hope that the page is almost ready to view or in most cases they can begin viewing the content straight away. All this whilst the other elements are loading. It certainly beats staring at a white screen or a spinning icon.

Compress Your Web Files

One of the main culprits for a slow website are the images being used. Sounds obvious right? But you’d be surprised by how many website owners do not optimise their images before loading them onto their sites.

The difference in load times is very noticeable between images that have been optimised compared to those that have not.

Now if you consider a scenario where you have a page that uses large images or many images (a portfolio for example) the combined time it takes for each image to download could result in users having to wait way beyond that four second threshold by which point you may have lost 25% of your audience.

So in this instance it’s recommended that images are compressed and optimised before they’re uploaded. It’s also worth pointing out that it’s highly recommended that images are resized according to the space they are to fill on the page. Simply uploading a full size image and expecting a CMS to resize it is beyond lazy.

Now you may be thinking this could prove very difficult to do if it hasn’t been done already, especially on an existing site with hundreds of pages. However there are tools available which will compress not only your web images but will also compress web files such as CSS, HTML and JS.

One such tool is GZip.

A faster loading site equals a better user experience

GZip will compress files on the server whilst serving the request to the browser. In plain English, Gzip takes large groups of data and will compress them. The process is quite simple.

Standard HTTP Request & Response

Image explaining a standard HTTP request and response

The above graphic displays a standard HTTP request and response which doesn’t make use of GZip. Notice the size of the file which is sent back to the browser and user.

HTTP Request & Response Using GZip

Image explaining HTTP request and response using GZip

In the graphic above, the browser requests the web page from the server and then the server locates the page. The files that make up the page are then compressed before being sent to the browser. So what was 100KB before is now shrunk down to just 10KB thanks to the compression in place.

So is it worth it? Absolutely. Using Gzip can reduce the size of pages and style sheets by up to 70-80%. A faster loading site equals a better user experience and a better user experience equals user satisfaction.

Using a CDN

A CDN (Content Delivery Network) is a large group of web servers located in multiple locations which deliver content more efficiently to users.

How this works is relatively straight forward and simple. When a user types in the web address of the site they wish to visit a request is usually made to the server in which the website is hosted to then send that website and it’s files back to be loaded into the users browser. But as there is no way of telling where your visitors are located, it’s impossible to predict just how far that request has to travel in order to retrieve the website.

With CDN, the way it works is that a server is selected based on a measure of network proximity and the users region. So the server with the quickest response is chosen which therefore means the website will load sooner rather than later for the user.

In Conclusion

There is a good reason why user experience is being taken so seriously by web design agencies like ourselves and it’s because it has a proven track record. A track record that indicates that websites which deliver to users a pleasurable experience are far more likely to have better conversions and return visits.

There was a book which was published many years ago in 2001 by Steve Krug. The book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” could be argued was the first real step within our industry in making user experience design into an actual practice. Or at least one which now merits dedicated designers who are assigned the task of delivering UX solutions. Which in turn continues to be explored and ultimately the true benefactor of this dedication is the web and its users.

If you wish to to explore ways your existing website could be improved for your users we would love to meet with you. Give us a call on Milton Keynes – 01908 967359 or click here to contact us.