If your website performance sucks it doesn’t matter how pretty the design is. It is essential that you understand how performance effects the conversion rates of your customers. It is imperative that you are able to identify if your website is slow and what to do about it.
If you take away only one thing from this article please make sure it is this: Website performance should be your highest priority.
UX (user experience), design, content, product are all important, but if your website doesn’t load fast enough they aren’t going to matter. Your potential customer will already be going elsewhere. That’s a customer lost. Perhaps for good. You’re only exception might be if you have a monopoly on the product or service the customer desires.
As a WordPress developer I naturally spend a lot of time exploring the web. Often I’m searching for solutions to development problems, looking for design inspiration, or shopping for mountain bike parts. I have the luxury of a powerful computer, a fibre broadband connection; yet slow websites are an everyday occurrence.
If I encounter this issue from a position of tech privilege with decent equipment, imagine what the browsing experience will be like for users on mobile. Most people have 4G, but mobile reception can cause latency issues. Then there are still a few that still on 3G.
You may think your site couldn’t possibly be slow, there’s no way it’s going to be an issue. But I assure you any website can be slow, its not limited to any one sector or type – ecommerce, marketing, blogs, portfolios, etc. And may I remind you that whilst it might have been blisteringly fast on it’s launch day, there are a number of reasons why it could be significantly slower today.
Be assured that slow performance will frustrate your customers and reduce satisfaction.
Why a slow loading website is a problem?
Time. Time is finite for everyone, it is valuable commodity with which we want to do as much as we can in as little as possible. We want rich experiences doing the things we enjoy with our family and friends. I assure you that staring at a computer screen waiting for a website to load is not anyone’s idea of time well spent.
So apart from the obvious, why does website performance matter to you?
You’re likely after some form of user engagement on your website. That might be lead generation, ecommerce conversion, or it could be as simple as the number views. The achievement of any of these goals relies on your users, your customers getting to their virtual destination quickly and efficiently.
Recent website performance data
Let’s take a look at some numbers to illustrate this. WebsiteBuilderExpert reports that “1 in 4 visitors would abandon a website that takes more than 4 seconds to load”, and that “64% of shoppers who are dissatisfied with their site experience will shop somewhere else next time”.
They go on to suggest that “Even just a one second delay will…
- Reduce page views by 11%
- Decrease customer satisfaction by 16%
- Reduce conversions by 7%”
It’s a similar story elsewhere you look. Smashing Magazines Front-End Performance Checklist 2021, which I highly recommend you read if you’re a developer, starts with reference to The Impact of Web Performance by CP Clermont who handles web performance at Shopify.
Clermont highlights that there is a direct correlation between Revenue per Session vs Time To App Load Performance, and Bounce Rate vs Time To App Load Performance. The result being 17% more revenue than average from users experiencing the fastest load times, and a significantly reduced bounce rate.
If you want further cause to take notice of the importance of website performance consider this extract from Web Almanac 2020: Performance by Karolina Szczur.
There is an unquestionable, detrimental effect that slow speed has on overall user experience, and consequently, conversions. But poor performance doesn’t just cause frustration or negatively affects business goals—it creates real-life barriers to entry.
Finally, remember that as of July 2018 Google declared that “Speed is now a landing page factor for Google Search and Ads”, stating that “When real users have a slow experience on mobile, they’re much less likely to find what they are looking for or purchase from you in the future”.
With 55% of users accessing the web via their mobile it’s time to pay attention to website speed.
How to test your websites speed
Thankfully it’s incredibly easy to test your websites speed. You don’t need expert knowledge to identify potential issues. I’m going to cover two simple methods for identifying a page speed score, and one slightly more complex one. Hopefully there will be a method that works for you.
PageSpeed Insights
As Google deems website speed a factor in search rankings and user experience it provides several tools to help identify issues. The one I want to focus on is PageSpeed Insights. As a beginner this is a great starting option. It’s as simple as entering your websites URL (e.g. “jamesevers.co.uk”) and clicking Analyze.
Let’s start with the obvious, your page speed score out of 100. A higher value is better, and Google provides a simple key reinforced with a colour code. This should help you determine whether your sites performance is poor, average, or good. Your target should be at least 90.
Remember that a PageSpeed score is returned for both Mobile and Desktop. Be sure to look at both.
Now don’t despair if your score is low, it absolutely can be improved upon. More often than not it will require some common optimisations, and an improvement of your own best practices going forward.
GTmetrix
GTmetrix is the second tool I want to discuss. It essentially leverages the Google Lighthouse API, and adds it’s own audits and interpretations. For me GTmetrix provides too useful benefits over PageSpeed Insights:
- You can control the environment variables, like location, browser, connection speed. Which are important for understanding different scenarios.
- It keeps a historical record of your tests that are useful for determining progress after potential improvements have been made.
To make the most of GTmetrix I strongly recommend creating an account. This will allow you to change the location of the test server which is important if you want relevant results. Testing a UK hosted website aimed at UK residents on a server in America or elsewhere is a bit pointless. You will get results but they aren’t going to be an accurate account of your audiences experience. In this scenario you’d likely get poorer results due to increased latency.
GTmetrix returns your page performance score, just like PageSpeed Insights. The same rules apply for determining a good and bad result. The noticeable difference with GTmertix is that it also gives you a Structure score. They describe this as “our proprietary assessment of Lighthouse and Custom GTmetrix audits. It represents how well your page is built for optimal performance.”
Lighthouse in Chrome Bowser Developer Tools
If you want to make your performance tests a bit more in-depth, you can leverage Lighthouse in the Chrome browser developer tools. This will let you return scored results for Accessibility, Best Practices and SEO. This can be very insightful if you’re searching for information on your websites overall performance.
Running this test requires you have the Google Chrome web browser installed. Once installed…
- Select More Tools, then Developer Tools from the menu. This will open the developer tools panel in your browser.
- Next click on the Lighthouse tab.
- From the categories list select Performance, Best Practices, Accessibility, and SEO.
- From the device list select Mobile or Desktop. Keep Mobile as the default if you are unsure.
- Click Generate Report.
After a minute or so Lighthouse will return your report. It will be similar to your PageSpeed Insight report. However it will contain the extra information we’ve requested for Accessibility, Best Practices and SEO. This extra information is particularly useful in achieving a better understanding of the current state of the tested URL. Regardless of your technical knowledge, the report will provide you with a list of potential problems that need addressing.
Things to know when running page speed tests
I want to include a few important points you should be aware of when using page speed testing tools.
Firstly, unless stated otherwise the test is almost always going to be testing a single URL you enter. Not your whole website. So make sure to test several key pages on your website. This will help you gain a better appreciation for your websites performance as a whole.
Some tools may have throttling options to simulate how the website would perform on a limited connection. This could be slower broadband or 3G. If these options are available I would recommended running tests with these options selected as well. Knowing how well your website performs in ideal conditions makes for a great speed score. But consider the “real world conditions” you users are living in, and things might not be so straight forward.
Simulated connection throttling with Chrome Dev Tools
Actually, I think we should have a quick look at simulated connection throttling. Please don’t skip this section. It might be an eye opener.
Right there are a couple of steps, but follow along and you should have no trouble running the tests.
- To start with open an Incognito window in the Chrome Browser
- Next open the Developer tools
- In the developer tools panel click the Network tab. (See screenshot below).
- Check the Disable Cache option
- From the Online drop-down, select the required connection speed preset
- Finally with the dev tools panel open refresh your browser page. Either by click the refresh button or by pressing F5.
When the page refreshes the connection will limited by the chosen settings, and will ignore any previously stored cache. This will simulate a new user visiting the website for the first time at the stated connection speed preset.
If you selected the default option “online” and you’re on a fast or fibre internet connection you’ll like perceive your website loading in with good relative speed. Assuming there are no major flaws or bottle necks. All seems good doesn’t it.
Now try it with the “Fast 3G” preset. What happens next is the interesting part. In all likelihood your website is going to load in significantly slower than you expect. Unless your optimisation is excellent.
If you find the experience of waiting for your sight to load under these conditions frustrating – so will your users. Take a moment to consider how difficult that’s going to make it for users to complete their goal on your website.
A note about connection presets
Now you might very fairly ask why are we using a 3G preset when most people are on 4G. Well it’s the quickest and easiest way to simulate a slow mobile or broadband connection without building custom presets. Average 4G connect speeds may be around 35MB with reasonable latency. But that’s average, sat here in my office in the middle of Shropshire my 4G caps out at a lowly 3.5MB. Pretty appalling. If I move around the house and get a better signal then that changes.
The point is that connections are hugely variable, and speed and latency varies massively by location. Everyone accessing your website is not sat at home, or in their office on high speed cable and fibre connections. Think about the people your website is targetting and what their daily lives are like. Make sure to optimise for real world conditions, not ideal conditions.
What to do when your website speed is slow
In all likelihood the options for tackling a slow loading website are going to fall into two distinct categories. Those which you can perform yourself, and those which your web developer or agency can perform.
What you can and cannot do yourself may be predetermined by the way your website was built. Most websites have a CMS or admin allowing you to make content changes. However, you may have a static site without an admin or CMS. In which case it could prove challenging to resolve speed issues yourself unless you have some technical knowledge.
If you want to start with the likely changes you can make I would look at the following first:
Check your image uploads are a sensible size and replace any images that are too large. Check your page speed test results for suggestions on which images may be a problem.
If you use WordPress, or similar, consider how many plugins you have installed and ask yourself whether they are all needed. The 150k Small Business Website Teardown saw a direct correlation between the number of plugins installed and a reduction in WordPress website speed.
If a page speed test has flagged a network or server issue, talk with your web hosting provider. Know that if you’re on a shared hosting package your server resources could be limited. Consider upgrading your hosting to a more powerful solution.
Some CMS solutions will have options for caching pages and database requests. This will allow your website to store commonly used assets so users can load pages quicker when visiting subsequent pages on your website. Research what options are available for your CMS and give them a try. If your using WordPress you could try WP-Optimize which has some good benefits.
My final thoughts on website performance and speed
So lets summarise what the important takeaways from this article should be.
- Website performance and speed are crucially important. They directly effect conversion rates and bounce rates.
- You can easily test your websites performance with Google PageSpeed Insights, GTmetrix, and Google Lighthouse.
- Be considerate of your users likely internet connection speeds and make sure to optimise for all speeds.
- Take time to understand your websites CMS, and know how to make use of features to help with performance.
- Talk with your web developer to understand what other optimisations can be made.
I hope this article has been a helpful insight into the importance of website performance and the speed in which you website loads.
If you want help optimising your websites speed and need a WordPress developer please contact me and I’ll be very happy to help.