I feel the need … the need for speed.
– Top Gun
We’re often approached by businesses who are dissatisfied with their current website. A common complaint is that their website is too slow.
A slow website can have a negative impact on the user experience, particularly when people are accessing it from their phone without a good wifi connection. Don’t expect people to wait around for your website pages to load, because they won’t. They’ll simply look elsewhere.
For every second it takes your web page to load your conversion rate can reduce by 7%.
Source: neilpatel.com
And Google doesn’t like to be kept waiting either. A slow website counts against you in Google’s assessment of “Page Experience” (more on this later).
How to check your website’s speed
There are several online tools available to help you check your website’s speed. We recommend using:
When running these tests don’t expect particularly high scores, this is usually unrealistic. However, what these tests are particularly good for is identifying element of a website which are causing slow downs.
For a realistic user experience, nothing quite beats just trying it out for yourself.
Before you do this, you need to clear your browser cache*. When you visit websites your browser sometimes saves the pages you view in its cache, so when you revisit them you see them more quickly. So the view you’re getting of your own website might be skewed if you don’t clear the cache first.
Once you’ve done this, we suggest trying it both on your desktop/laptop computer when attached to wifi and also on your phone (don’t forget to clear that browser’s cache too) without wifi (i.e. just through the mobile signal).
* Instructions for clearing your browser cache:
- Chrome: https://support.google.com/googleplay/answer/32050?
- Edge: https://support.microsoft.com/en-us/microsoft-edge/view-and-delete-browser-history-in-microsoft-edge-00cf7943-a9e1-975a-a33d-ac10ce454ca4
- Firefox: https://support.mozilla.org/en-US/kb/how-clear-firefox-cache
How slow is too slow?
To meet Google’s new “Core Web Vitals” criteria, the largest part of each web page’s content should load within 2.5 seconds. In Google-speak this is known as the “Largest Contentful Paint”. Anything between 2.5 and 4 seconds will be considered to “need improvement” and anything longer than 4 seconds will be categorised as “poor”.
Beyond the speed at which each web page loads, your website also needs to be fast when a user interacts with it, such as clicking on a link or tapping on a button (called the “First Input Delay”). Your website’s reaction to user input should be faster than 100 milliseconds. A “needs improvement” speed would be 100ms to 300ms and anything slower than 300ms is “poor”.
Website speed optimisation checklist
The subject of website speed is a complex one as many different components have a bearing on how quickly it loads.
Images
Huge image file sizes are one of the most common issues contributing to website slowness and it’s always the first thing we check for.
Each image on your website should be optimised (which means compressed) so the file size is as small as possible, without significantly impacting the visual quality. Images can be optimised using desktop software such as Photoshop, or alternatively there are plug-ins available for WordPress websites (eg Smush https://wordpress.org/plugins/wp-smushit/).
Be wary of using unnecessarily large-dimensioned images when a small one would suffice. For example, if the width of the image placeholder is only 600px then the image should also be 600px wide. Some unoptimised WordPress websites will load unnecessarily large images in the background and rely on web browsers resizing images. They might look OK, but they would look just as good once optimised – and will load faster.
Hosting
Avoid crowded servers
Hosting means the server which your website sits on. If your hosting’s cheap then it’s likely that your website is on a server which holds many thousands of websites. The resulting high volume of users trying to access the same server can have a significant impact on speed.
This doesn’t necessarily mean that you need to be on a dedicated server (which would host only your website) although this might be the best solution for some. But it does mean that you should choose your host carefully and ensure that their servers are well managed and don’t become overloaded.
Server specification
Choose a host that has strong enough CPU (Central Processing Unit) and RAM (Random Access Memory) performance to run your website. If your hosting spec is too low, it will take longer to generate pages, which will make the site feel sluggish.
A host that uses Solid State Drives (SSDs) can be useful for websites hosting video or lots of large images. SSDs use a different technology than the older Hard Disk Drives (HDDs), allowing them to access data faster, thereby speeding up your website.
Caching
Your browser sometimes caches web pages you visit, which means that it saves them so if you visit them again they appear more quickly.
A similar thing can be done on the server which hosts your website.
For example, if you have a WordPress website, each time someone visits a page WordPress has to refer to a database on your server and find the page title, content, etc. It puts all of this together in an html file, which it then sends to your browser. All of this takes time.
By using a caching system, when WordPress has put the page together once, it saves the html file so it’s ready to be sent to the next person who visits that page. This speeds up the website because no visit back to the database is required.
There are several powerful caching plug-ins for WordPress such as W3 Total Cache, WP Rocket and LiteSpeed (the latter can only be used if supported by your web host).
GZIP compression
This is a method of compressing data when it’s sent via the internet, much like when you ‘zip’ files on your computer.
Using a host who offers GZIP will give you a further speed advantage.
CDN
A Content Delivery Network (CDN) refers to a network of servers distributed around the world.
When you use a CDN, your website is still stored on a single server, called the “origin” server. When someone visits your website, the information comes out from the origin server and, on its way to the user, a copy of the website page is temporarily saved in a different server, called a “cache” server. Specifically, it will be saved on the cache server which is physically nearest to you.
The next time you go to that web page, you don’t have to wait for the data to come from the origin server. Instead, the data is sent from the cache server which, being much nearer to you, takes less time.
Furthermore, other users in the same geographic area will be able to access the cache server, thereby speeding up their experience too.
Ecommerce websites
A special mention needs to be given to ecommerce websites, which are one of the most vulnerable to speed issues.
Ecommerce websites don’t only attract more visitors than ‘brochure’ style websites, they also have far more complicated functionality. This combination can put them at risk of becoming very, very slow.
We’ve seen websites become almost unusable because of unsuitable (i.e. cheap) hosting. If you have an ecommerce website then you must ensure that your host’s servers are equipped to deal with the higher demands.
Minify your code
All websites are written in code, such as HTML, CSS and javascript.
Here’s a very simplistic example of CSS:
/**
* The flexbox header element for all landing pages
**/
.header {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
background-color: #F2F2F2;
text-align: center;
font-size: 22px;
}
The process of minifying your code means removing all unnecessary characters, usually spaces, line breaks and comments. This makes the file size smaller, and smaller means quicker.
So, to minify the above CSS, we’d do the following:
.header{display:flex;justify-content:space-between;width:80%;margin:0 auto;background-color:#f2f2f2;text-align:center;font-size:22px}
The minified example takes up less bandwidth and is therefore faster to transmit.
CSS files can be hundreds or thousands of lines long, so you can imagine how much space can be saved through minifying.
Non-standard fonts
Font choice is really important to your visual brand identity, however when improperly implemented, multiple unoptimised calls to font files can seriously slow you down.
If you’re using custom fonts ensure they are being properly cached, implement effective asynchronous loading and only load the typefaces you actually need!
Embedded widgets
Any embedded widgets/feeds from third parties can slow down your web page. For example, social media feeds, booking systems or weather forecasts.
This doesn’t mean you shouldn’t use them, but be aware of the impact they could have. During your system testing, check that they aren’t unduly slowing down your website.
Video
We always encourage clients to incorporate video in their websites, as it’s such an engaging and compelling medium. But if it’s implemented incorrectly, it can also be disastrous for website speed.
Use third party hosting
Often, standard website hosting servers aren’t great at hosting video. This can cause buffering issues, particularly when you have more than one concurrent user.
The best solution is to host your videos using a third party service such as YouTube or Vimeo. Their servers are very fast and have bandwidth optimised for video. You can simply embed the video in your website and get all the benefits of this medium without slowing down your site.
Never auto play
Auto playing video or audio can aggravate visitors to your website and send page load times through the roof. Just don’t do it.
Website or page builders
Using a website builder, such as Wix or Squarespace, or WordPress page builder themes, can be a recipe for disaster.
In the case of website builders, you have little or no access to the coding and technology that underpins your website, so your options to improve speed are very limited.
WordPress page builder themes are a bit better, but they have a tendency to download redundant scripts, pointlessly increasing load speed. Plus, they often need multiple database calls to load each page, so if you do use one then it’s essential to also use caching technology.
A website where the code has been expertly written from scratch will always be faster and avoid these issues.
Web application firewall
We’re used to firewalls for our work or home computer networks; these are the devices that monitor data travelling into or out of your network to block anything which might be a security risk.
Websites also need a firewall – called a web application firewall – to protect them. As well as providing defence against security risks, a firewall will reduce the amount of spam attacks on your website. These spam attacks, where automated programmes send hundreds or thousands of spam visits to your website, can cause significant speed issues while the attack is underway.
Note that using a CDN can also help to reduce spam attacks.
How website speed impacts Google ranking
It isn’t just the user experience which is diminished by a slow website.
For several years now, Google has taken page speed into account when ranking websites, particularly their speed performance on mobile phones. Although, in real terms, ranking wasn’t negatively impacted unless the website was obviously slow.
However, Google is now upping the ante by implementing its “Core Web Vitals” report, which measures websites’ performance based on user experience.
This report, along with mobile-friendliness, security certificates and adherence to Google’s guidelines on the use of pop-ups, will combine to determine your overall “Page Experience”.
The Page Experience measure is currently being rolled out and, when completed, will become part of Google’s assessment when deciding how highly to rank your website:
While page experience is important, Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn’t override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search.
– Google Search Central
You can find out a bit more about how Google measures page experience in this video:
So, the takeaway from this is that having high quality, relevant content on your website is still the most important way to rank well in Google searches. However, if you are competing against another website with similarly excellent content, then the page experience could be the “tie breaker” that puts you on top.
Get expert help to speed up your website
Web design is a core part of what we do, whether as a standalone piece of work or as part of a larger brand strategy exercise.
We understand that creating a new website is an important investment for any business, and it’s imperative to get everything right – including an excellent user experience.
If you’re looking for a speedy website experience to please your users, and Google, put us in the driving seat. Email hello@tomango.co.uk to find out more.