Latency.

Lag.

Delay.

You may call it different names but the outcome is the same. Your website loads slowly and with people’s attention span these days, that will probably mean they are going to move on to a different site, service or platform. Not ideal, to say the least.

But what is network latency anyways?

Latency is the time it takes for a request to travel from the sender to the receiver and for the receiver to process that request. In other words, it’s the time it takes for the request sent from the browser to be processed and returned by the server.

Consider a simple e-commerce store that caters to users worldwide. High latency will make browsing categories and products very difficult and in a space as competitive as online retailing, the few extra seconds can amount to a fortune in lost sales.

What causes network latency?

There are a number of reasons why your site load time might be lagging. It could be anything, but the most common factors are:

Heavy CSS and JavaScript use
Poor server/hosting plan
Large image sizes
Not using browser cache
Too many widgets and plugins
Hotlinking images and other resources from slow servers
Traffic volume
Older browsers
Slow network connection (especially on mobile devices)

That means there is a whole range of steps you can take to enhance page speed, which I’ll explain later in the post. But before you start troubleshooting to improve website performance, you need to test your page load time.

You can learn more about page speed in our blog post about the top 10 website performance metrics that can help optimize your site and improve user experience.

How to Measure Latency?

Before making any changes, it’s important to measure first. Measuring specific metrics will let you compare your website performance before and after the changes, and will let you know if your changes are actually working.

There are many metrics that you can measure as the website owner, but I would suggest focusing on Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

These three metrics are defined as Core Web Vitals by Google.

What’s a good Latency?

Fine, you manage to measure your latency, but what exactly are you are going to compare these to? Based on the Core Web Vitals metrics mentioned above, you should be serving the content to the user in under 3 seconds. Basically, the recommended thresholds you should aim for are as follows:

You can read more about what criteria Google used to arrive at these thresholds here.

How to Improve Your Site’s Performance?

Great, your website is slow. What are you supposed to do next? If you find yourself asking these questions then the next part is for you. Here are a few ways to speed up your website but note that there are lots of factors that come into play here and these are only the most popular ones, not all of them.

Compression

This is a no-brainer. Small files load faster and the easiest way to minimize the file size is by using Gzip to compress your CSS, HTML, and JavaScript files.

It won’t work on images so you’ll have to make sure you minimize those a different way or use a CDN, but we’ll talk about that later.

Minify files

In order to increase your page speed, you’ll need to optimize the code that’s running your website. Google recommends you use HTMLMinifier for HTML, CSSNano for CSS, and UglifyJS for Javascript.

Render-blocking code

Every time you load a script you’ll add to the time it takes for the DOM to render. While this might not be an issue for small, less complex websites, render-blocking code can cause an outrageous delay in some cases.

CDN

Content distribution networks are a network of servers that are store copies of your site on multiple locations across the globe in an effort to optimize the delivery time of your resources regardless of the location from which the users request them.

Cache

You can store data in temporary locations to make them accessible faster without you having to download them every time. It’s an effective way to reduce costs and decrease the time it takes for the website to load. Here’s a great article about cache in case you want to learn more.

Optimized images

Images are often the source of many issues related to speed as unoptimized images tend to be the main culprit of long load times on websites. There are many ways you can optimize images and there’s probably not a one-size-fits-all approach but here’s what I recommend.

If you have a handful of images you could probably get away with using Photoshop or something similar to optimize them before reuploading them. If you don’t have Photoshop you could always use a free web alternative like Photopea.com. If you have more than a few I recommend a tool that can do batch optimization like ezgif.com.

A third option is to use CSS Sprites, a compilation of multiple images that are controlled with CSS. This allows you to minimize the number of requests by only loading one image and having your CSS control what’s displayed. Use this tool to create your sprite before uploading them to the website.

Tools of the trade

I know that the whole website optimization is a big subject and while I haven’t gone over each aspect of that very lengthy subject I believe I covered the most common parts. The tricky part is not knowing what the issues might arise but understanding exactly where your website is falling short and which areas need immediate attention.

This is where Sematext Experience comes into play. It’s a RUM solution that provides insightful data about how your webapp is performing in all the different corners of the world by measuring data in real-time directly from your users.

Conclusion

Latency is always going to influence the performance of your website but with the proper tooling, you can mitigate its impact by addressing the main issues causing the latency in the first place.