The Ultimate Guide to Website Performance

The Ultimate Guide to Website Performance

Learn what makes web pages fast, and how to optimize your website to deliver content to visitors as quickly as possible.

Updated: 12/03/24

Published: 01/09/21

When it comes to website performance, remember this: You have two seconds. That's about the longest the average internet user expects to wait for a page to load.

Any longer than that, and you risk losing your visitor to the competition. Google found that as the page load time goes from one second to three, the likelihood that a visitor will bounce increases by 32%.

In this guide, I'll unpack everything you need to know about website performance, including what affects it, why it matters, and how to benchmark your website performance so you can continuously improve.

What is Website Performance?

Website performance refers to how quickly the pages of a website load and display in the web browser. Web performance optimization is the practice of improving website performance by various methods - faster websites are said to be higher-performing.

Good website performance is a cornerstone of any successful website because it's the first event that all visitors experience. First impressions influence whether website visitors convert, buy, or bounce.

Why Website Performance Matters

Your website performance impacts everything from user satisfaction to your bottom line. Let's review the many reasons website speed matters for your business.

User Experience

Website optimization aims to improve the user experience (UX). All website design choices should foster a positive UX, and speed is no exception.

If your website is slow, your visitors will have a bad time. And if your visitors have a bad time, your online business will have a bad time too. Conversely, a high-performing site will improve UX, leave a positive impression on visitors, and encourage them to return.

So, how fast is fast enough for a good experience?

There's no definitive benchmark for how fast a website must be. There have been multiple numbers thrown around, anywhere from five seconds down to half a second, but perhaps the most influential opinion comes from Google.

In 2010, Google stated that a web page must load fully within two seconds for a positive UX, and this is still widely referenced today.

Note that two seconds is a maximum. The fastest websites can load their content in under a second on average. And Google itself says it aims for under half a second.

If you're panicking at those numbers, don't worry. With a bit of work, one to two seconds is achievable for almost any website.

The good news is that you don't need a large team to hit the two-second threshold. There are clear strategies you can follow to speed things up, and below, I'll show you what causes slow pages.

Visitor Retention

With website performance, you want to lower your bounce rate as much as possible. This measures how often a visitor lands on your site, then immediately exits. High bounce rates hurt SEO and conversions.

Research by Akamai Technologies found that:

• Two extra seconds of load time more than doubles a page's bounce rate.
• 53% of mobile users will abandon a page that loads in more than three seconds.

Conversions and Sales

There's a strong link between website performance, conversions, and sales. Portent found that a B2B site that loads in one second converts at a rate three times higher than one that loads in five seconds.

It doesn't matter how you define a conversion - performance affects visitor satisfaction, and the happier people are using your website, the more likely they are to download a content offer, join an email list, or complete a purchase.

For e-commerce businesses, just look at how steep the conversion rate drop-off is within the first four seconds of page load, according to Portent data:

Image Source

As marketers know, a conversion lost by you is a conversion gained by a competitor - in this case, a competitor with a faster website.

Brand Perception

Imagine you discover a new restaurant and decide to stop there for lunch. When you arrive, you notice the front door is busted. No big deal, they'll fix it soon, you think. But, when you return the next week, the door is still broken.

Sure, you're bothered by the minor inconvenience. Worse than that, though, you may start presuming things about the restaurant - if they can't fix the front door, what does that say about the quality of the food?

The same is true about websites. A noticeably slow website will stir up assumptions that damage your credibility and brand image.

Visitors will question your competence, security, and ability to serve the customer. Some might even think your site is unsafe or illegitimate. Every other website they use is fast, so why not yours?

Brand perception is a topic for another post. But, it's safe to assume that poor perception impedes growth in a competitive online space.

Mobile Experience

In 2023, smartphone users became the global majority, with over 4 billion people owning a smartphone. That means when a potential customer lands on your site, there's a good chance they're on mobile.

Mobile-first is more than just layout, though. Mobile devices tend to have fewer computing resources than the standard desktop computer and, as a result, pages take about 70.9% longer to load on a mobile device than on a desktop computer.

To serve this growing user base, your mobile website must be lightweight for smaller devices over slow connections.

SEO

Lastly, website performance affects your place in search results. Since 2010, Google has factored page speed into its ranking algorithm. In 2018, it announced the same for mobile pages. This is one way the search engine rewards websites for providing a better UX.

While page speed is not currently the most decisive ranking factor (Google states that relevance plays a much larger role), it may still impact your website's place in search results and affect traffic, conversions, and sales.

For example, if Google sees your website and a competitor's website as equally relevant to a query, the faster of the two may rank higher.

What Affects Website Performance?

Many factors must come together for a browser to display your website on a user's screen. And if you fail to optimize your website, these factors will slow it down.

Here are the main components that determine whether a web page is fast or slow, and how you can optimize each.

Page Weight

Page weight refers to the total size of a web page, comprising all the resources (code files, images, embeds, etc.) it needs to load.

Load time largely depends on page weight. The more files you include and the larger those files are, the more work the browser needs to do to render them.

Because of how websites are built, many things that slow pages down are on the front end, or what users actually see on the page. Take it from former Google Performance Engineer Steve Souders, who writes, "80-90% of the end-user response time is spent on the front end. Start there."

This idea is illustrated particularly well by a waterfall diagram, one which visualizes how long each resource takes to load completely.

As Souders illustrates below, front-end content makes up the bulk of the load time on a typical web page:

Image Source

How can you trim page weight? Remember, for every new element you place on your page, you add time spent loading its resources.

Therefore, simplicity is key for both performance and UX. Opt for clean layouts over complexity in your designs. But that's not the only way to reduce page weight.

Even after simplifying your pages, you might experience stalls in performance due to large files. This is where minification comes in.

Minification is the practice of deleting excess characters from files like certain spaces, line breaks, and comments. This information helps developers read the code files but makes no difference to the browsers processing them.

Minification is possible with online tools, and WordPress users can leverage speed plugins to minify files automatically.

Images

Most content you see on websites is either text or images. Image files are much larger than plain text HTML files, so they take longer to download and render in the browser.

Larger, high-res images will slow down an otherwise respectable load time. Luckily, optimizing your images is an easy fix.

Most importantly, don't go overboard on the number of images you use across your site. Each image is another resource to load, so choose yours intentionally.

Next, resize your images to the desired dimensions before uploading them. Don't count on your server or the browser to scale them down; this takes extra time. It's better to upload the same image to your server in multiple dimensions, rather than use one large image in different locations on your website.

Compressing images may also improve load times, but this is a fine balance. You want your image files to be small enough to improve performance, but large enough to retain sufficient quality. This will take some trial and error, but you'll tend to find that compressing to around 75% of the original image yields the right balance.

Lastly, keep files small by limiting image file formats to JPG, PNG, GIF, and SVG whenever possible.

HTTP Requests

Every website follows the Hypertext Transfer Protocol, or HTTP. HTTP dictates that for a website to load in a web browser, the browser must first send an HTTP request to the target website's hosting server. The web server then sends back a response with the requested resource.

In reality, most web pages are complex and require multiple HTTP requests to fully render. As a rule of thumb, the more complex a web page is, the more HTTP requests it needs. And the more requests made, the slower the page.

Reducing HTTP requests may take some time and rethinking of your site, but it could be worth the investment to shave down your load time. Simplifying a page will reduce the amount of requested resources, so start there if you can.

Also, be wary of external resources, resources fetched from third-party servers. External resources can be embeds like images, videos, and other media, as well as external font packs, display ads and affiliate links, and widgets - all require additional HTTP requests to separate servers and may hurt performance.

Browser Caching

Caching is the process of storing data in a place where it can be more easily fetched in the future.

A browser cache saves website data like HTML files and images temporarily on the user's device. When the user returns to the cached web page, the browser loads these files from its local cache instead of requesting them from the web server, saving time and bandwidth.

Browser caching is a must for content that does not change frequently on your site - this is called static content. Content that does change frequently is called dynamic content, and should not be cached.

How you enable caching will depend on what services you use to build and host your site, but every provider should offer instructions and explain how to set time limits for cached content.

File Compression

File compression helps deliver files quickly over the web. A web server with compression enabled shrinks down the requested files (without loss of information) before sending them.

When a browser receives the compressed files, it decompresses them and renders them as normal.

Smaller files are faster to send and download, so compression almost always helps. Today, about 87% of websites use compression, specifically a type of compression called GZIP.

Render-Blocking CSS and JavaScript

Web browsers process each page resource one by one. Sometimes, this means that a file's code prevents future assets from loading quickly - this is referred to as render-blocking code.

Render-blocking code is typically CSS or JavaScript that, by default, loads before the rest of the page content, even if this code isn't required for above-the-fold content (i.e., content first visible when the page first loads) to work.

Developers can remove or defer render-blocking code to give the impression of better performance.

Hosting

While most web performance optimization practices address the front end of your website, the right web host is the foundation of a successful, high-performing website.

A poor server is subject to flaws and performance issues, so it's worth the investment for hosting that can handle increasing traffic and spikes in requests.

The low cost of shared hosting may be tempting, but know you'll be splitting server resources with many other websites - increased activity on any of them hurts performance on yours.

Improving your page speed could be as simple as upgrading to a plan that isn't shared hosting.

Geographic Location

With all this tech-speak, it's easy to forget that servers are physical computers located somewhere in the world. The larger the distance between the device making HTTP requests and your server(s) completing the requests, the longer your website files will take to send and load.

This is why it's important to know where your servers are being pinged from - your website will likely perform differently in Washington D.C. versus Tokyo.

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 requests your website, your CDN will deliver the files from the server closest to the user's physical location.

Permanent Redirects

301 redirects send users from the page they requested to another. As you can guess, the time spent redirecting visitors detracts from performance.

There's not much you can do about this once the redirect is in place, so it's best to avoid 301s when you can.

How to Check Website Performance

Now that you know what affects website speed, it's time to conduct an online speed test to determine your site's speed.

With these free tests, you paste in the URL of any webpage and get a summary of the page's performance. Many tests also provide an overall score and a breakdown of which areas need the most work. That way, you can pinpoint the most significant issues on your website and achieve some quick performance wins.

I've listed a few of these speed tests below. As you pick one, keep the following in mind:

• Every tool calculates your performance score differently, and some may even use metrics that others don't. Because of this, try a couple of tools and keep using those when you benchmark to see your progress on each tool.
• Run multiple tests to simulate performance when your website is both cached and uncached by the speed testing tool. Cached websites load faster than uncached ones, so if your website underperforms on your first test, this may be why.
• Your site doesn't need a perfect score to be considered high-performing - it may not even be possible depending on the resources your page needs. Aim for as close to perfect as you reasonably can.

Website Grader

Website Grader provides an aggregate score out of 100 based on the categories of performance, SEO, mobile experience, and security. I like its easy-to-understand user interface with humorous wording, which differs from other website tools that can be dry.

Powered by Google's open-source Lighthouse tool, Website Grader's performance assessment accounts for 30% of your website score and examines key contributors like page size, number of HTTP requests, caching, and image size.

There's also a free accompanying video course to help you improve your grade.

PageSpeed Insights

Another popular testing option for marketers, Google's PageSpeed Insights tool assesses your website performance on both mobile and desktop devices.

It provides an aggregate score from 0 to 100 and is powered by Lighthouse - a score of 80 or above is considered high-performing.

PageSpeed Insights is notably rigorous and holds websites to high performance standards. It also provides a detailed but accessible report of important metrics, suggestions for speeding up your page, and additional diagnostics that may be helpful.

Image Source

Pulsetic

Pulsetic is a global website monitoring tool that provides insight on your website performance, including speed, typical website maintenance, and other customizable reporting - from setting headers to response timeouts.

For websites with multiple languages and regions, reports will include detailed regional information like uptime and response times.

Pulsetic allows you to run tests and receive website downtime alerts via phone, SMS, email, or Slack.

Image Source

Pingdom

Pingdom offers a free website speed test and is really easy to use. Its results center on changes you can make to boost performance, and it assigns letter grades to each component that enhances or detracts from load time. It breaks down transfer sizes by file type and number of HTTP requests per content type.

Also, Pingdom allows you to run tests from several global locations to simulate how your site performs in these regions.

Image Source

GTmetrix

The GTmetrix performance test is one more Lighthouse-powered option. It gives an in-depth summary of performance and suggestions for improvement.

It also includes a helpful speed visualization (a timeline of screenshots marking each significant load time event), a content waterfall, video recordings of its tests, and historical performance data for tracking improvements over time.

Image Source

WebPageTest

WebPageTest is an open-source testing tool that assesses web performance and security. It runs performance tests on multiple browsers and lets you test from multiple global locations.

Less intuitive than other tools, WebPageTest is better for web experts than those seeking quick wins or a brief, user-friendly summary. Specifically, its performance breakdown is highly detailed, and its report may take longer to assess than reports with other tools.

Image Source

Website Performance Metrics to Benchmark

After putting your website through one of the tools above, you might be unfamiliar with the terms used to measure performance.

The first step to learning how to benchmark your website is understanding what each metric means. Let's define some of the speed benchmarks your website is up against.

Page Load Time

Page load time is the time it takes to load an entire web page. It is measured from when a user requests a website (e.g., enters a URL in the browser or clicks a link on a search results page) to when the last resource on the page is rendered.

When I say that websites should load in two to three seconds maximum, this is the metric I'm referencing.

Time to First Byte

Time to first byte (TTFB) measures your web server's latency. It is the time between a user requesting your website and your web server sending the first piece of information to the user's browser.

A slow TTFB indicates an issue with your web server, which can be resolved by changing your hosting plan or by using a CDN.

But first, you're probably better off focusing on metrics that deal in the front end, such as ...

Time to Start Render

Time to start render is the time it takes for content to begin displaying on the page after a request for the website is sent. It measures how long it takes before the user knows that content is being loaded. This can be signaled by any visual element - like a header, a block of text, or the background - appearing on screen.

This is an important metric, as it tells users that their request is being processed and they'll see your website soon, which holds their attention. Time to start render usually takes one to two seconds, but top-performing websites hit this mark in under a second.

Time to Title

Time to title is how long it takes for your website's title to appear in the browser tab. This tells the visitor that your website is loading. The faster the title appears, the better.

Time to Interactive

Another key website performance indicator, time to interactive measures the time from when a user requests your website to when they can start interacting with elements on the page, like clicking buttons or scrolling.

This doesn't mean that the page is fully loaded - some page elements may still load after others become interactive. Still, if a user can interact with content above the fold, they will consider the page ready to use.

DNS Lookup Time

DNS lookup time is how long it takes for the Domain Name System (DNS) to convert the domain name entered by the user into the corresponding IP address. This must be done to retrieve the resources from each hosting server.

DNS lookup should be very short, no more than 150 milliseconds - anything longer can noticeably impact performance. A lengthy DNS lookup time could be caused by your DNS provider, in which case you might consider a premium DNS service.

It may also be due to the number of third-party resources on your web page. For example, if your page includes content from two third-party resources, the DNS must translate three domains (including your own) into IP addresses, inflating your total DNS lookup time.

User-Based Metrics

These metrics aren't direct measurements of website performance but can be good indicators. If these get worse, look into your page speeds.

Bounce Rate

A page's bounce rate is the percentage of people who land on the page, then leave without clicking anything. It's a critical engagement metric. If a page is slow, it makes sense that more visitors will be impatient and leave without interacting.

But, remember that high bounce rates can be caused by many things - your page might load fine but fail to capture interest.

Session Duration

Session duration (also called "time on site") is another sign of potentially slow pages. If it skews very low, this may indicate that many users aren't getting past the first page load.

Conversion Rate

Conversion rate is the percentage of the total visitors to your website that complete a conversion. As discussed, conversions are closely linked to website performance - happy visitors are more likely to stay on your website and complete some desired action.

Like bounce rate, many factors influence your conversion rate, but it's worth investigating to see if performance is one of them.

Error Rate

Error rate is the proportion of HTTP requests that return error codes among all HTTP requests over a short period. A high error rate indicates something is wrong with your web infrastructure that prevents resources from being delivered, slowing or stalling pages and turning visitors away.

Best Practices for Benchmarking Site Performance

When using the above tools and metrics to benchmark your website performance, there are a few best practices to ensure you do it right. Let's review advice from two website optimization experts I spoke to.

1. Start with a baseline measurement.

Before you start optimizing your website, it's critical to take a "before" measurement. It's the first thing SEO and marketing agency Stratabeat does when a client enlists its help for website optimization.

"We will always take a baseline view of how they have been performing historically before we do anything," says Stratabeat CEO Tom Shapiro.

By doing this, you can track progress and ensure that your efforts are really working. Not sure where to start? Website Grader, mentioned above, is free and easy to use. Record its results in a spreadsheet tracker so you can benchmark against it in the future.

2. Build custom dashboards based on what matters to your business and stakeholders.

As we've seen, there are a lot of metrics that impact website performance. But when you're benchmarking for your website, you get to choose what matters most to you.

Shapiro says he and his team set up custom dashboards for their clients "so that we can be tracking the exact measurements that they find valuable for the business."

He adds, "We typically have at least three different dashboards for every client, and that can include a very detailed SEO and content dashboard, which might include 10 or 11 or 12 different tabs within the dashboard. So you could literally spend days looking at all the data."

But of course, not everyone has time for data analysis that's that extensive. For that reason, Shapiro also sets up an executive view.

"So let's say that you're sharing it with a CMO," he explains. "They just want to spend 60 seconds or maybe two minutes looking at the data. So we provide an executive view, and it's just one page where they can look at the metrics that they find very valuable."

When you're benchmarking your website performance, build a custom dashboard based on the metrics that move the needle most for your business. From there, you can customize reports based on the stakeholders you'll be sharing them with.

3. Think beyond mere metrics - keep the end user in mind.

I know we've talked a lot about metrics, but I'd like you to stop thinking about them for a minute.

"You're actually solving for two things here," shares David Mooney, a senior software engineer at HubSpot. "Real customers' experiences and what Google thinks of your website. Those are not always the same."

He gives the example of a website with zero images and no styling that loads in a blazing 0.1 seconds.

"Might be great for Google, but not so much for a customer," Mooney says. "For Google, you want to measure things like page load speed, mobile responsiveness, and how well your site is structured. For customers, it's more about the experience. We don't want to compromise their experience for the sake of Google, so sometimes you have to find a balance."

Shapiro, too, emphasized not getting too hung up on metrics like conversions and traffic. "That alone is only going to give you a surface-level view or surface-level insights," he says. "And that's not sufficient to massively move the needle."

Instead, Shapiro recommends focusing on your ideal website visitor. "What we need is actionable data, and for that, what our agency loves to rely on is understanding who is on the website," Shapiro says, "and are we attracting the right organizations, the right companies to the website, and are they looking at the right things?"

Shapiro's agency uses behavioral data, such as video recordings of website visits, to see if visitors are finding what they're looking for, ensuring a good user experience.

4. Consult your dashboards regularly.

It's a big mistake to go through the trouble of learning website performance metrics and creating dashboards to benchmark them - only to neglect those dashboards. You should be checking them regularly.

"At a minimum on a weekly basis," recommends Shapiro. "Too many marketers will only look on a monthly basis, or they'll look quarterly. But really, you need to be much more proactive if you want to move the needle."

Website Performance Monitoring Tools

So, what tools can you use to monitor website performance regularly? I'll share some favorites below. Website performance monitoring comes in two types: real user monitoring and synthetic monitoring.

• Real user monitoring, also called passive monitoring or reactive monitoring, tracks user activity and records in detail how your website performs for real users.
• Synthetic monitoring, also called active monitoring or proactive monitoring, uses software to simulate real user interactions at routine intervals. This helps uncover performance issues before they affect real visitors.

Both real user monitoring and synthetic monitoring require specialized monitoring software, and several cloud-based solutions exist for active and reactive monitoring.

Here are some standout options:

Pingdom

Pingdom is a top player among website monitoring tools. It is loved for its reliability and up-to-the-minute alerts issued when your website is down or performing below benchmarks.

This service also offers synthetic monitoring to discover performance problems and a user-friendly interface that allows website owners of any experience level to keep tabs on their sites.

Pingdom prices its service on a scale and splits its plan into synthetic and real user monitoring services.

Synthetic monitoring starts at $10 per month for 10 uptime checks (i.e., checking that your website is available) and one advanced page speed check. Real user monitoring starts at $10 per month for 100,000 page views.

Image Source

Uptrends

Uptrends is another popular monitoring tool that includes solutions for proactive and reactive website monitoring.

It lets you automate performance tests from 224 global locations in intervals of up to one minute, and its visual reports are highly intuitive and visually engaging.

Uptrends is priced starting at $9.20 per month (billed annually) for real user monitoring. It offers a free 30-day trial.

Image Source

Site24x7

Site24x7 provides a comprehensive suite of tools for website monitoring as well as server monitoring, application performance monitoring, and more.

You can leverage its global network of over 100 monitoring locations to simulate web page interactions and track your site's performance and uptime.

Site24x7 can also conduct security audits and API monitoring - it's a lot to take in, which may make this powerful option feel overwhelming for new users.

Plans range from $9 per month to $89 per month (billed annually), with increasing synthetic web transactions and pageviews by tier. There's also an enterprise plan and a 30-day free trial.

Image Source

TeamViewer

The TeamViewer Remote Management tool (previously Montis) is centered on page performance. You can check page speeds from over 30 global locations and generate visual reports for each check.

Performance checks can be set to run as frequently as you want, and you can program alerts if performance drops below a set threshold. One drawback is that the user interface isn't as striking as competitors.

TeamViewer offers plans for single users, teams, and enterprises. Single-user plans start at $24.90 per month, billed annually.

Image Source

Improve Your Website Speed

Good website performance is necessary for all websites, regardless of the niche, service, or content. A slow website will turn away potential customers, which hurts your business.

Optimization isn't a one-and-done deal. You must continue to benchmark website performance consistently. Yes, it takes effort - but the data shows that fractions of a second make all the difference.

Editor's note: This post was originally published in January 2021 and has been updated for comprehensiveness.

Topics: Website Performance

Don't forget to share this post!