We know how important page speed is 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. In this post, we’ll discuss what latency is and what a “good” latency time is. Then we’ll walk through several ways to improve yours. Let’s get started.

Free Intro Guide to HTML & CSS [Download Now]

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.

The main cause of latency? Distance. The longer the distance between the browser making the request and the server responding to that request, the more time it’ll take 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.

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.

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.

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:

CDN taps into network to deliver content from the closest server and caches content to improve latency

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 CMS 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.

Minifying CSS and JavaScript files with the Closure Compiler Service to improve latency

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.

Compressing and resizing an image using Squoosh to improve latency

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

Latency 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.

New Call-to-action

 css introduction

Originally published Dec 15, 2020 7:00:00 AM, updated January 12 2021


Website Performance