A Slow Website - Time to First Byte (TTFB)
There are many reasons why your website might be slow. Time to first byte (TTFB), respectively time to last byte (TTLB), for the initial HTML document is one explanation we want to focus on in this post.
In most of the cases we talk about how to optimize our frontend such as minimizing CSS or compressing images. This is a very important aspect to have a fast loading website but there are good reasons to optimize the backend as well. Just imagine that there is a slow database query that delays the page download. Other scenarios are that your origin server reaches its limit due to inefficient code execution and slows down.
What is TTFB?
TTFB, which stands for time to first byte, is the amount of time it takes from when a client makes an HTTP request to it receiving its first byte of data from the web server. The time to first byte is made up of 3 separate components.
- The time needed to send the HTTP request
- The time needed for the server to process the request
- The time needed for the server to send back the first byte of the response to the client
Why slow time to last byte of the HTML file results in bad user experience
A web browser gets first the HTML file that includes all the references to the assets, which need to be downloaded sub-sequentially. The browser will not start downloading any asset without the HTML file. Web browsers may start downloading assets while receiving first bytes of the HTML file. Therefore, time to first byte (TTFB) has an important role as well. However, in most cases - if not all - content on the website can be blocked from fetching until the HTML has been fully downloaded. Therefore, TTFB is as important as TTLB.
The slow backend problem
The following simplified example illustrates how a slow backend can lead to a delay for the download of the sub sequent assets. The tests have been made with the full page speed test on tools.keycdn.com/speed. The first example shows fast delivery of the HTML document without any delays.
In the following example, we manually create a delay of 1 second to highlight the issue of a slow time to first byte. The assets starts downloading after the HTML document has been fully downloaded.
The difference between TTFB and TTLB is very small in this example, which eliminates connectivity issues or large geographic distance as potential problems. The issue has to be on the origin server. On average anything with a TTFB under 100ms is fantastic. Anything between 200-500ms is standard, between 500ms - 1s is less than ideal and anything greater than 1s should likely be investigated further.
What are the reasons for slow time to first and last byte?
It is crucial that you identify such issues quickly. Solving them might have a big impact on how you built your architecture or how your database design looks like. All following assets are affected by this delay. This indicates the importance on resolving slow website due to time to first byte issues.
Here is a list of the most common issues:
- Inefficient code on the origin server
- Database design results in slow queries (indexes, commits, stored procedures, etc)
- Misconfigured webserver (Apache, Nginx, PHP, Ruby, MySQL, MongoDB, sysctl etc)
- The origin server reached its capacity (CPU, memory, disk i/o, etc)
Time to first byte test
KeyCDN created a new web performance test tool in which you can easily test TTFB on a single asset from 14 test locations. Simply input the URL of your asset and it will return the status, cache status, ETag, DNS, connect, TLS and also the TTFB. Anything under 400ms will return a green indicator. This time to first byte test can help you determine in which locations you might be seeing slow performance.
A large delta between TTFB and TTLB is often caused by geographic distance or connectivity issues in general, which leads to increased latency and decreased throughput. This fact helps to differentiate the problems and isolate problem resolution.