Network connection latency has a big impact on how a users experiences browsing the web. High-latency is likely to result in a poor visitor experience.
Learn what latency is, how network round trip time impacts page speed, and how Content Delivery Networks can speed up your website.
What is network latency?
Latency measures how long it takes for data to travel between two computers on a network.
If the data is transferred between two devices that are physically far apart then network latency will be higher than for devices that are in close proximity to each other.
Mobile networks also typically introduce more network latency than wired or wifi connections.
Data doesn't typically travel in a straight line. Imagine you'r accessing a website from your phone. Your phone connects to a cell phone tower. The cell phone tower connects to the mobile network provider. The mobile provider connects to the internet and sends data to a server somewhere in the world that's hosting the website.
Check out the the submarine cable map to get an idea of how data has to navigate to go from one place to another.
Latency is also introduced by delays in processing caused by network infrastructure along the route of the data transfer. Data may be queued up in a buffer before being forwarded to the next node, if the processing capacity of the infrastructure has been reached.
What is network round trip time (RTT)?
Network round trip time measures how long it takes for data to travel from one device to another and back. In the context of web development, that means a browser is sending a message to a server and then receives a response.
Usually we're trying to exchange data between the client and the server, so looking at the round trip time is usually more important than the one-way latency!
Loading a website involves multiple round trips between the browser and the server that you're loading the website from.
What is ping time?
The ping command is a way to measure round trip time. Here we can see that it takes about 140 milliseconds for data to travel from my computer to the example.com server and back.
ping example.com
PING example.com (96.7.128.198): 56 data bytes
64 bytes from 96.7.128.198: icmp_seq=0 ttl=40 time=139.154 ms
64 bytes from 96.7.128.198: icmp_seq=1 ttl=40 time=138.831 ms
How does latency impact website speed?
So what does this mean for page load time on the web? To load a resource from the web at least four network round trips are usually required.
- Looking up the website IP address (DNS)
- Establishing a reliable connection (TCP)
- Making the connection secure (TLS)
- Requesting the resource (HTTP)
If our network round trip time is 100 milliseconds that means loading a resource from the web, for example an HTML document, then this process takes at least 400 milliseconds. And that – unrealistically – assumes that the server always responds instantly to the request without taking time to process it.
Downloading responses larger than roughly 10 kilobytes also requires additional round trips on the network, due to TCP Slow Start.
Let's take a look at a network waterfall chart to see how latency impacts how quickly a website loads.
When loading the a resource from the same server, the request using the high-latency connection takes 1.13 seconds to complete. In contrast, on a fast connection the resource has been fully loaded after only 70 milliseconds.
Network round trips beyond the initial request and visit
I mentioned above that loading a resource over the network requires at least four round trips. That's a lot, considering that website often make hundreds of requests.
However, not every request needs four round trips on the network:
- Server connections can be reused between requests
- DNS lookups are cached after the first visit
- HTTP/3 can be used once the browser knows that the server supports it
How Content Delivery Networks reduce latency
Long geographic distances between a website visitor and the backend server can cause poor page speed.
For example, when I ping the website of one Australian university from the UK I get round trip times of over 270 milliseconds.
ping www.curtin.edu.au
PING wp183.host.pressdns.com (52.64.39.142): 56 data bytes
64 bytes from 52.64.39.142: icmp_seq=0 ttl=43 time=278.483 ms
64 bytes from 52.64.39.142: icmp_seq=1 ttl=43 time=278.763 ms
What if I could instead load the website from a server closer to me? Or at least establish the connection with a nearby server?
That's what Content Delivery Networks (CDNs) allow you to do. These services maintain a global server network with data centers close to a large chunk of the world's population. These server locations are called edge nodes of the CDN.
Let's run the ping command again, this time for a different Australian university:
ping bond.edu.au
PING bond.edu.au (104.18.20.75): 56 data bytes
64 bytes from 104.18.20.75: icmp_seq=0 ttl=56 time=5.362 ms
64 bytes from 104.18.20.75: icmp_seq=1 ttl=56 time=5.465 ms
Here the round trip time is much lower, just 5 milliseconds. What does this website do differently from the previous one?
Instead of connecting to a server in Australia I'm actually connecting to a CDN edge node that's clos to me. In this case, the website uses Cloudflare's global network for their CDN.
Unless the response is cached at the CDN edge node, Cloudflare still needs to load the actual page contents from the Australian server. But even avoiding this long-distance trip for the three server connection round trips provides a big performance benefit.
Measure Time to First Byte from around the world
The Time to First Byte (TTFB) metric measures how long it takes to start receiving a partial response when loading data from a server. It's an important web performance metric because browsers can't show website content until at least the first chunk of the document HTML code has been received.
You can run a free TTFB test on your website to see how performance is impacted by the geographic location of the visitor.
For example, here we can see that the website server is located in Europe, and visitors from Australia or Brazil are waiting a long time for the website to load.
However, if we run a test for the Australian university website that uses Cloudflare, we can see that the TTFB is good from all test locations.
The test location table shows the region that each response is served from. For example, the request that's made from the Singapore data center is handled by a Cloudflare edge node in Singapore.
Latency settings in Google Lighthouse
Lighthouse is a web performance testing and auditing tool by Google. It adds additional latency when running a test, to simulate a slower network connection.
On mobile Lighthouse increases round trip time by 150 milliseconds. On desktop, it adds 40 milliseconds. If you use the command line lighthouse tool you can specify a custom throttling value using the -throttling.rttMs parameter.
Getting a connection RTT value from the Network Information API
If you want to see how latency is impacting how fast your website is for your visitors you can use the Network Information API in JavaScript.
navigator.connection.rtt;
// 50
The connection RTT metric is based on recent connections made by the browser. It is rounded to the nearest 25 milliseconds.
View real user latency data for your website
Google provides round trip time measurements as part of the Chrome User Experience Report (CrUX) data.
If you run a DebugBear website speed test you can find this data in the Web Vitals tab of the test result.
Note that RTT is a diagnostic data that tells you about your visitor's internet connection. It's not a metric you can directly optimize, as it doesn't just take your own website into account.
You can also set up real user monitoring on your website to see how visitors on different connections experience your website.
This table shows a breakdown of how round trip time on the network impacts the Largest Contentful Paint metric.
How does RTT relate to TTFB?
As several network round trips are required before the first response byte is received, higher round trip times also mean a higher TTFB score.
Broadly, TTFB is the sum of:
- Time spent on redirects
- 4x connection RTT
- Application server server response time