A complete guide to the
In this guide, we’ll explore everything you need to know about website performance. You’ll discover why website performance is so important, the factors affecting it, and what you can do to make sure your website always performs at its best.
Website performance affects everything from user experience and brand perception to SEO and conversions. It’s arguably the most important factor in running an online business. So why are so many companies unaware of how to improve it?
For the best performance, you need to understand what’s slowing you down and what you can do to speed things up.
Website performance is a measure of how effectively a site can deliver and convey critical information. It’s how quickly the pages of a website load and display in your web browser. Clarity is also a key indicator of performance. For example, Google uses how a page loads as part of its measure of performance. If the page judders, shifts about, or is erratic when loading, then it will be ranked lower than a page that loads smoothly.
A high-performing site needs to be technically lightweight and put together in a way that doesn’t conceal or hinder the user from accessing the information they need. When it comes to your website, first impressions count. And its initial performance can be the difference between a converting customer and a swift exit.
The main purpose of boosting website performance is to improve the user experience (UX) for your visitors. Any design choices should aim to provide a positive UX, and speed is one of the most important factors dictating this.
UX affects almost every aspect of your website. It influences how visitors perceive your brand, how high you appear in search results, and how many conversions you get.
If your website is clunky and slow, your visitors will have a negative experience, and this can impact your business. On the other hand, a high-performing site can leave a strong lasting impression and make visitors more likely to return.
Your website is one of the first touchpoints your buyers come into contact with, and that experience can make or break their perception of your brand.
A slow, poorly-performing website will give a negative impression that can damage your company’s reputation. For some visitors, it might conjure up the preconception that you’re unprofessional. Others may question your ability or even think your site is broken and unsafe.
Brand perception matters and solid website performance ensures that you have a positive start to every buyer interaction.
The main purpose of website design is to attract visitors and capture their attention as soon as possible. However, slow load times breed frustration and can make retaining site visitors difficult. Google’s research showed that bounce rate increased by 32% when a page load time increased from one to three seconds, and by 90% when the page load time went from one to five seconds.
A flashy, attractive website is great. But if it’s slow, and boasts a high bounce rate, it’s unlikely to drive the results that you want.
Your website performance can have a sizeable impact on your visibility in search results. In 2010, Google incorporated page speed into its ranking algorithm. In 2018, it did the same for mobile pages. Speed is one of the factors the search engine uses to determine user experience. And it rewards websites with better UX with boosted visibility on results pages.
Although page speed isn’t as crucial as relevance, it can still heavily impact your website’s position in search results. This can negatively affect traffic, conversions, and ultimately, sales. To give your website the best chance of ranking high, you need to ensure your website loads fast and performs well.
There’s an undeniable link between website performance, conversions, and sales. Nearly 70% of buyers admit that page speed impacts their willingness to buy from an online retailer. However you look at it, performance has an impact on visitor satisfaction.
If someone has a positive experience on your site, they’re much more likely to convert. It’s important to understand that your website’s performance is directly tied to lead generation and your bottom line. Minor speed increases can make all the difference.
Many components make up a successful website and most of them have an effect on overall performance. Here are the main factors that can affect site speed and our recommendations for optimising them.
Superfluous code is code that’s poorly optimised. It’s extra code that doesn’t add meaningful value, functionality, or substance to your site. If you were to remove it, you’ll need take extra consideration of what might break.
Examples of this code include an excess of:
If too many of these things are coded into your website and work simultaneously, it can hamper performance and create a slow experience for your visitors.
Bad code equals bad performance. Poorly structured code increases page load times and leads to an inferior user experience. Weak code like invalid HTML markup, JavaScript errors, or resource-hungry processes can cause significant dips in performance if left unmanaged.
“Remember: everything you add to your website has a performance cost.”
Mike Thomas,
Technical Director, Blend
Everything you add to a website has a performance cost. To ensure you don’t add too many extra elements to yours, it’s important to embrace performance budgets.
A performance budget is a clearly-defined limit for pages that your development team can’t exceed. This can be a max JavaScript bundle size, total image weight, or a strict limit on loads speeds.
Having a pre-set budget in place helps you to plan ahead and make better decisions about what can and can’t be included on your site. It also creates a culture of accountability that enables you to weigh the impact to user-centric metrics of each change to a site.
If you add extra code like tracking pixels or analytic tools, you need to regularly review their usage. We recommend setting periodic reminders to check if they’re still providing useful insights and removing them if they’re no longer required.
If you continually review your code additions, you’ll have a better idea of what’s working and what isn’t, so you can optimise performance.
To ensure that your code is well-structured with no superfluous additions, we recommend working with an agency with broad technical expertise. They’ll be able to create your website in the most efficient way possible and make performance a priority.
Traditional website development is built upon a code-based framework like WordPress or Concrete5. This approach requires hosting arrangements to provide the core CMS functionality, which in today’s world is a specialised area.
Hosting your own website is often expensive, time-consuming, and technically demanding. If your hosting is inadequate, your performance can take a hit. Single instance servers often struggle to meet demand. And if you lack load balancing or content delivery networks, your users might struggle to access your site.
Platform as a Service providers like HubSpot mitigate this hassle by managing it all for you in modern, distributed platforms. As they do this at scale, they have access to the experts required to make sure things are globally performant, secure, and accredited.
The HubSpot CMS is especially useful, as its commercially developed and maintained. This means that all feature development is controlled by HubSpot, which makes the CMS more reliable and secure than other alternatives. Plus, they have a suite of inbuilt performance tools on their platform, like automated image optimisation, code minification, free SSL certificates, and more.
“Where possible, don’t host your own website.”
Mike Thomas,
Technical Director, Blend
When planning the design of your website, remember that large graphics and photos can have a sizeable impact on page load times. If you employ lots of high-resolution images, you can also negatively impact Core Web Vitals, which can affect your Google ranking.
It’s important to find a balance between pages that need more impact, and those that require optimum performance. For example, your landing pages that host important CTAs will need to load fast and be as smooth as possible.
First, make sure that you’re not overusing images across your site. Think of each as another resource that needs loading and choose them intentionally. Next, you’ll need to resize your images to the desired dimensions. If you rely on your browser or server to do this, it’ll eat up extra time and hamper performance. So it’s better to do this yourself before uploading. Lastly, keep your files as small as possible. We recommend using a compression tool to reduce files so they’re small enough to improve performance but large enough to retain quality.
Recommended file types:
Every website uses the Hypertext Transfer Protocol (HTTP). For a website to load in a web browser, the browser must first send an HTTP request to the website’s hosting server. The server then sends back the requested resource. Each resource request decreases load speed, so the fewer requests you have, the better your site will perform.
For the best performance, ensure your hosting provider can deliver content over HTTP2. HTTP2 is the modern equivalent of HTTP1 and is much faster and more reliable. It also has built-in multiplexing, so it can load more requests in parallel with each other. This helps to overcome lag issues that can crop up.
You should also ask your developers to combine, minify and deliver CSS/JS with effective caching policies. This helps reduce the number of HTTP requests and ensures that a users’ browser only fetches the resource when required.
Each image, script and stylesheet are submitted as a single HTTP request. A simple tracking code may well load dozens of additional requests, so review them regularly.
Caching is the process of storing data in a place where it can be easily accessed at a later date. A browser cache saves website data like HTML files and images on the visitors’ device. When they return to the web page, the browser loads these files from its local cache instead of requesting them from the web server, which is faster and uses less bandwidth.
With an effective caching policy, you can:
This process is essential for static web content that sits on your website for long periods. Content like global CSS styles and logos can be safely stored for a year before refreshing. Everything else on your site that changes on a more regular basis should be stored for no longer than a week. Check with your developer that the “Cache-Control” and “Expires” headers are correctly set. This will ensure that your caching policy is working correctly.
The larger the distance between the device making HTTP requests and your servers completing the requests, the longer your website files will take to send and load.
You can remedy this problem with a content delivery network (CDN). A CDN is a collection of servers distributed around the world that hold cached copies of your website files. When a user visits your website, your CDN will determine the server closest to their physical location and deliver the files from that server.
CDNs are a great way to help distribute your static assets across geographic regions – effectively bringing the files closer to your users. This can be particularly useful if your website itself isn’t load-balanced across multiple regions and can help you boost performance considerably.
A growing number of people use mobile devices as their primary method of accessing web content. In the first quarter of 2021, mobile devices generated 54.8 percent of global website traffic. Even with such a high proportion of users preferring mobile, it can be easy for designers and developers to forget this and overlook them in favour of desktop devices.
To ensure a great experience and consistent performance for all users, you need to take a mobile-first approach to your website. Responsive web development is key, and it’s easier to do this at the start of a new project.
We recommend using Google Analytics to identify what devices your visitors use. If more users are on mobile, then make a mobile-first strategy a priority. This locks in a high-performance approach from the offset, allowing you to selectively introduce more expensive enhancements for larger devices, rather than introduce them later down the line.
Liberal use of WordPress and other marketplace plugins can be a tempting option for you and your developers. But while they might look like a shortcut to advanced functionality, they’re not always created with performance in mind.
The bar for entry is low, so the quality often varies wildly between plugins. Plus, they can introduce lots of new coding elements like tracking or analytics to your website. Many of these plugins use similar code, so you could be introducing superfluous code into your system without gaining any extra benefits. Use these plugins sparingly as they can hamper performance, slow down your site, and decrease performance.
If you’re considering redesigning your website or are looking for a way to improve its performance, then you’ll need the support of a web design agency. An inexperienced agency can be costly, so here are the key questions to ask from the beginning.
Do you employ your own developers or rely on freelancers? – While freelancers can be useful, they can also be inconsistent. So it’s better to find an agency that employs their own developers.
Do you offer website hosting? And if the answer is ‘yes’ – do you offer 24/7 support? – It’s rare to find a developer or agency that have the specialised infrastructure to host websites effectively.
Do you use version control? – Version control, like that provided by BitBucket or GitHub, helps you keep your code safe.
Blend's website grader provides a performance score out of 100, based on the effectiveness of your website. Factors include overall performance, SEO, mobile experience, and security.
It’s powered by Google’s open-source Lighthouse tool and examines key contributors like page size, number of HTTP requests, caching, and image size.
W3C Validation Tools is a popular HTML 5 Validator Online tool. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. It has a simple UI and is incredibly easy to use.
Every website has a different set of design goals based on its target industry and audience. But website performance is universal. If your website is slow, it’s frustrating for users, bad for SEO, and can heavily impact your bottom line.
Website performance shouldn’t be an afterthought. It’s essential for solidifying your online presence and creating trust in your brand. If you continually work to improve site performance, you’ll see noticeable gains everywhere else.
Use our website grader to test your site's performance, SEO, mobile design, and security.
