What Is Latency & How Do You Improve It?

Latency — the delay between a user making a request on a web application and getting a response — can play a major role in your website performance.

By minimizing it, you can ensure that a user’s request — whether that’s checking out on your ecommerce website or clicking on an internal link — is met as quickly as possible. This is key to providing a seamless user experience on your website.

In this post, we’ll discuss what latency is and how it works. Then we’ll walk through several ways to improve yours. Let’s get started.

What is latency?

Latency is the delay between the browser sending a request to the server and the server processing that request on a network or Internet connection. It’s usually measured in milliseconds.

Latency can be measured in two ways. The first is round trip time (RTT), or the amount of time it takes for the request to travel from the browser to the server and back. The second is time to first byte (TTFB), or the amount of time between the browser sending a request to the server and receiving its first byte of data.

Latency associated with a basic HTML page or other single asset may seem insignificant. But latency associated with a website can significantly impact the user experience since it typically involves multiple requests for HTML pages as well as CSS, scripts, and media files. 

• What is latency?
  

  • What causes latency?

  • What is a good latency?

• How does latency work?
• Why improve latency?
• How to Improve Latency
  • Use a CDN
  • Minify CSS and Javascript file sizes
  • Compress your images
  • Reduce the number of render-blocking resources

What causes latency?

The main cause of latency is distance. The longer the distance between the browser making the request and the server responding to that request, the more time it’ll take the requested data to travel there and back.

That’s why website visitors in the US will get responses back from a data center in Council Bluffs, Iowa (one of SiteGround’s data center locations) sooner than website visitors in Europe, for example.

Consider the following scenario: it takes 800ms for a browser to send a request to the server and 900ms for that browser to receive a response. In that case, the latency would be 1.7 seconds. 

Image Source

Other causes of latency are the size of the requested resources and end user issues. For example, if a user requests a web page with lots of images, CSS and JS files, or content from multiple third-party websites, then it will take longer for the server to respond. Or a user might be using a device with low memory, a poor internet connection or another issue that is increasing the delay. 

What is a good latency?

Because latency is the time it takes for a request to complete a round trip between the browser and server, it can’t actually be zero. But ideally, it’ll be as close to zero as possible.

While a good latency, like a good bounce rate, is relative, anything less than 100 milliseconds is generally acceptable. The optimal range is even lower, between 20 and 40 milliseconds.

How does latency work?

Latency is the amount of time it takes from when a user makes a request to when they receive a response. Once a user makes a request, several steps have to happen before they get a response.

Take the following example. Say a user is browsing an ecommerce website and clicks a category. To display items from that category on the user’s browser, the following has to happen:

1. The user clicks on the category. 
2. The user’s browser sends a request to the server of the ecommerce website.
3. The request travels to the site’s server, with all the necessary information. Transmitting this information takes time. The more information being sent, the more time it takes to transmit. 
4. The server gets the request.
5. The server either accepts or rejects the request before processing it. Each of these steps take time. The amount of time depends on the server’s processing capacity and the amount of information being processed.
6. The server sends a reply to the end user with the necessary information pertaining to their request.
7. The user’s browser gets the reply, and displays the product category. 

Steps 1-4 represent the first part of the latency cycle. Steps 5-7 represent the second part. To get the total latency resulting from the request, you add up all the increments of time, starting from when the user clicks on the category to when they see those products.

Why improve latency?

Page speed is critical to the user experience. So much so that all the way back in 2010, Google announced that page speed was a ranking factor for search. And while they didn’t give an exact number, they did say their goal was less than half a second.

While hitting this target may seem difficult, there are several ways to optimize your website’s speed. A major way is to improve your latency.

You can’t completely eliminate latency, but you can minimize it. Let’s take a look at some steps you can take to minimize latency below.

How to Improve Latency

1. Use a CDN.
2. Minify CSS and Javascript file sizes.
3. Compress your images.
4. Reduce the number of render-blocking resources.

While there are steps that the user can take to reduce latency on their side, we’ll focus exclusively on server-side solutions below.

1. Use a CDN.

Since latency is related to the distance between a browser and server, you can reduce latency by bringing the two closer together. While you can’t literally uproot your server location and bring it closer to every user, you can use a content delivery network (CDN).

A CDN is a distributed system of servers designed to deliver web content as quickly as possible to visitors, no matter where they are in the world. With a CDN, you don’t have to rely on one server to send content all over the world. Instead, the CDN will tap different servers in the network that are closest to each unique visitor to deliver the assets requested.

Once the server closest to the user delivers and displays the requested content, that server makes a copy of those web assets. When another visitor in the same part of the world tries to access that content, the CDN can redirect the request from the origin server to the server closest to them, and that server can deliver the cached content much more quickly because it has less distance to travel. Here’s an illustration:

Image Source

There are two ways you can use a CDN. You can purchase one from a CDN vendor, like Cloudflare. Or you can choose a website building platform with a built-in CDN, like Content Hub.

2. Minify CSS and Javascript file sizes.

Most web pages will contain a combination of HTML, CSS, and Javascript. The problem is that every time a visitor loads a page, CSS and JavaScript files need to be sent from the server to the browser. That means more HTTP requests, which can greatly increase latency. While you can’t remove the CSS and Javascript from your web pages, you can reduce the size of these files. The smaller the files, the faster the files will travel from the server to the browser.

The good news is you can automate this process with a minifier like the Closure Compiler Service by Google. Just add your code into the compiler, click the “Compile” button, and download the minified file.

Image Source

3. Compress your images.

Optimizing your images is another way to reduce your website’s HTTP requests. Ideally, you should reduce each image's file size to less than 100 KB. You don’t have to reduce that much if it affects the quality of the image, but try to keep it as close to 100 KB as possible.

You can upload, resize, and compress your images one at a time using a tool like Squoosh or all at once with a tool like TinyPNG.

4. Reduce the number of render-blocking resources.

When loading a page, browsers download and parse each resource — including images, CSS, and more — before rendering them to the front-end user. Certain resources like fonts and JavaScript files are deemed critical by the browser so it stops downloading and parsing other parts of the page until they are processed.

These resources are coined “render blocking resources,” and can significantly slow down your site. Reducing the amount of render blocking resources on your site won’t technically reduce latency, but it will improve the perception of load time on your site.

Minimizing Your Latency

Minimizing latency can have a major impact on your website performance and user experience. Lower latency helps ensure users are receiving the resources they requested as quickly as possible, so they have more reasons to return to your site again and again. 

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