As our society becomes increasingly digital, especially following the impacts of global lockdowns, more people are aware of the importance of user-friendly, beautifully designed websites.
It can be easy to create a brilliant website, fill it with rich content and leave it at that, without realising the importance of a fast and responsive website.
Our Digital Design Director, Simon Latham, talks about how important website speed is and how it can impact user experience and even your website ranking. He also has some quick and easy steps on how to increase your website loading speed for websites such as WordPress, Shopify and WooCommerce.
The speed of page loading is now the number 1 user consideration when engaging with websites, according to the Google Dev Summit. While this doesn’t mean nice design isn’t important, it does change the way websites are being designed and how they’re ranked.
As of May 2021, Google has been considering the following factors when ranking search results:
• Speed (load time)
• Responsiveness (interactivity)
• Visual stability
These factors feed into Google’s algorithm to provide a “holistic picture of the quality of a user’s experience on a web page.”
This means that as well as traditional ranking metrics such as content, keywords, and relevance, Google is now factoring in user experience. The faster, more responsive, and more visually stable a page is, the higher it will rank in search engines.
So, why is website performance so important when it comes to customer experience? And what can you do to improve your website?
We’ve all been there, waiting to be served in a physical store – it’s frustrating and leaves you with a negative impression about service.
But when it comes to digital services, users have even less patience. To understand why we need to look back at ‘Jakob Nielsen’s basic rules of human perception of time’, which state:
Is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
Is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of instantaneous responsiveness.
Is about the limit for keeping the user’s attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable since users won’t know what waiting time to expect.
Although website connection speeds have dramatically increased over the past 20 years, the speed of websites has not necessarily improved that much. This is even more important to consider with the shift towards mobile use, as the connection speeds are usually even slower.
Impact on conversion rate
The research is even more startling when we look at how a delay in the speed of a webpage effects conversion rates:
A matter of seconds can make the difference between someone progressing on your website and, ultimately, with your business, or leaving to go elsewhere. Minimising wait times and unresponsive features is key to making sure your website provides a great customer experience.
However, the opposite is also true for increasing your website speed, as shown in ‘Milliseconds Make Millions’ by Deloitte Digital:
• 0.1 second speed increase = 10% increase in spend (retail)
• 0.1 second speed increase = 7% increase in engagement (lead generation)
This effect is seen most when reducing from smaller delays, such as 2 seconds to ½ a second. For larger delays, going from 10 seconds to 9 seconds is unlikely to improve your retention rates, and some bigger changes might be needed. If improving your website speed would mean rewriting your entire website, there may be another option for helping to manage users’ expectations.
Sometimes, the problem of speed can be reframed. Rather than redesigning an entire website or removing important features, loading can be made to feel faster with loading design.
Skeleton Loading: these are simple, basic content blocks that represent where and how the content on the page will load. These can be static, but animation will help users feel like the website is ‘doing something’. However, they work best when the blocked-out designs are close to representing the actual layout and appearance of content.
Lazy Loading: this uses programming that means a page loads only what is needed, such as the products visible on the page at that point, loading more as the user scrolls or progresses. For businesses with e-commerce sites that have large catalogues this can be an effective method of ensuring fast product loading.
Progress Bars: the perception of progress bars is not always a good one, much like the spinning loading wheel; the inaccuracy and stop-start progress can be a point of frustration for many users. But having a design that is visually engaging and gives users an understanding of what is happening means users are more likely to stay.
While these are useful for managing user expectations, improving your site speed will ultimately be the best way to provide a better user experience and ensure your pages are ranked higher. This doesn’t have to be complicated though, as there are some quick and easy ways to improve your website speed.
Knowing how crucial speed is to our business goals and bottom line, what can you do about it? Some fixes are straightforward and can be actioned quickly.
• Run a webpage speed test such as Google Lighthouse to give you a detailed technical report on how long the page takes to display. This will show you how long visitors may be waiting, and how much you need to reduce it.
• Optimise your content to minimise load times. Images and videos can be big culprits, so remember to reduce to the correct dimensions, and use compressed file formats such as JPEG. remember to keep in mind users on slower mobile connections, or older computers.
• Use a CDN (Content Delivery Network) such as CloudFlare to speed the delivery of your site from different locations. These use a network of proxy servers across the globe, loading your website content closer to the user’s location.
If you site needs to load assets that might take a few seconds to load, can you design around the problem and display messaging or animation while the content loads?
If you don’t have the technical expertise or time to address speed issues on your site, we’re offering a tailored Speed Audit package to our clients.
• Testing and analysis of key pages
• Detailed practical recommendations to fix any issues discovered
• PLUS – our expert design and development team can implement the recommendations if needed.
Don’t let speed kill your customer experience! Get in touch to speak to one of our experts
Designing for speed and hacking user perception (Chrome Dev Summit 2019)