Lately Elon Musk has recently been publicly talking about performance of Twitter.

This article will talk about one important aspect of web performance, Time to First Byte (TTFB) and how changes have been made in this area to provide customers with a better experience.

TTFB is a metric that measures the time between a clients request and the time for the first byte of the response. This metric by itself won’t necessarily mean a website is performing well, but it is an important base metric to know as it plays a part in the perceived load speed, for example TTFB effects the Largest Contentful Paint (LCP) metric.

A good value for TTFB is 800ms and a poor time is over 1800ms:

Working on TTFB

Some typical problems with TTFB are slow infrastructure, databases etc. that reduce the ability of the origin servers to respond to requests quickly enough. At Domino’s we have tried to remove any bottlenecks with our servers by taking advantage of the following techniques:

1. Caching and reuse of content for multiple users can save on processing the same code over and over. Some webpages might have a mixture of content that is viewed by everyone and content that is viewed by a single customer only. This data can be split into different requests and the shared data can be cached. E.g. the basket is unique to a customer, therefore it isn’t cached or sent down on the original document request, but potentially the rest of the page can.

2. The above splitting of content then helps with rendering the cacheable content and storing it on a content delivery network’s (CDN) edge servers. There are usually more edge servers on a CDN than your own origin servers, and they are also likely to be closer to the customers devices.

This is beneficial for a couple of reasons, one, is that being closer to the customer means the response can travel faster as there is less network hops and physical distance, and secondly it takes load away origin servers, which helps against slow infrastructure and databases.

3. A large download size can reduce the effectiveness of the above two points, as a slow mobile connection can be very bandwidth limited, therefore you don’t want an initial document request of multiple megabytes even though it might perform fine on your local development machine.

The Domino’s homepage document size is currently under 70kB, but still includes styles and JavaScript that allows the browser to show relevant content quickly and doesn’t have any major flashes of unstyled content (FOUC). This was achieved by using methods like compression (gzip), minification and tree shaking.

Results

All the above techniques have had a positive impact on the TTFB, and the metrics like LCP it directly influences. Ultimately those metrics will improve a customer’s experience when visiting by allowing them to use and interact faster.

Useful links

https://web.dev/ttfb/

Over time more and more research has shown how important the speed of site is. Faster sites will generally mean users will have a better experience and will be more engaged with your site. No matter what the aim of your site is, it can improve vital statistics like the average session length, page views and conversion rate, all which can increase the revenue the site generates.

Research carried out by Akamai found that a 1 second delay in page load can result in up to a 7% reduction in conversions. A 1 second delay may seem like it’s not much whilst you are developing a new feature, and will probably be ignored, but percentages like this can results in millions of pounds of revenue being lost over the course of the year.

Page speed doesn’t just affect the users experience on your site, it also can affect how easy users can find your site. Google now uses page speed as a factor in how it ranks their results, so a poor performing page could make the difference between you or your competitor being the 1st result returned by Google.

So, if you are not thinking about the speed of your website it might be worth thinking about various techniques to improve performance.

Areas and Techniques

There are various areas that need to be looked at when working on how to improve the performance of your site. I’ll break these down into three areas to talk about briefly:

1. Server-side

2. Client-side

3. Third-party

Diagram showing Google Chrome DevTools (F12)

Away from the client, on the server infrastructure there are components such as a database and server-side code that will need to execute to give the client a response. On the above diagram this will be the time before the first response is received over the network (Time to first byte (TTFB)). It is important for this time to be as small as possible, because without this the user sees nothing. Techniques such as improving code efficiency, improving database queries and caching commonly used content can help reduce this time.

Client-side performance is an area which you will have more variance because a multitude of different devices can be accessing your site. This variance can be due to differences in network speed (e.g. 3G vs Wi-Fi) and device performance (mobile phone vs desktop PC). You can analyse the client-side performance using your browser (e.g. Google Chrome DevTools) or with online tools like WebPageTest. These tools give a waterfall chart showing the length and order of resources downloaded to the client which then can be used to optimise performance with techniques like CSS & JavaScript minification and compression, using CDNs and leveraging client-side caching.

Examples of commonly used third-parties in e-commerce are Google Analytics and payment providers. Third-party code can be called from the server-side and client-side, but unlike the others it can be much harder to optimise as you are not in control of the code. Therefore, techniques to improve the performance of third-party code is significantly reduced so it is important to choose a good provider and have good support. Also, if possible try to reduce the number of third-parties used and reduce the dependencies either by completely removing them or having a good fall back.

Next steps

Page load speed can significantly change the behaviour of your customer, which in turn can result in large changes to the revenue made. Even if you’ve never investigated the performance of your site or you think it is fine, it’s worth analysing how well it’s doing and if it can be improved. If you have Google Analytics on your site, the data it collects includes information on the speed your customers are experiencing, and it will give you some simple tips to get started.

Useful links

WebPagetest: https://www.webpagetest.org/

Google Analytics: https://www.google.com/analytics/web/