Here at Yottaa we talk a lot about front-end optimization — optimizing the content of a website so that’s easier for the browser to load it quickly.  Today about 90% of a page’s load time occurs on the front end, so we think it’s more than justified to focus our attention there.  However, the other ten percent – the backend and delivery – can’t be ignored.  If there are problems with the server, database, or content delivery, the page download will be delayed.

Problems with these stages of web page load are manifested in statistics for Time to First Byte (when the first byte of the HTML file has successfully traveled from the server to the visitor’s browser) and Time to Last Byte (when the HTML file has been fully downloaded).  Since the HTML file provides the information necessary for the browser to put together the pieces and construct the page, delays in the download of this file will have a significant effect on the overall page load time.

Why Does a Slow First/Last Byte Time Create a Poor User Experience?

In the simplest terms, the issues that cause long First Byte and Last Byte metrics delay your page load because the browser cannot download and render all of the page’s content until they have completed.

More specifically:

• Until the first byte of the HTML file reaches the browser, the browser cannot download anything. The visitor is staring at a blank screen. The faster the first byte gets to the browser, the faster content can start to download. Time to First Byte should be less than 0.15 seconds (150 milliseconds).
• After the first byte has gone through, the HTML file is in the process of downloading.  While the download is happening, content may start to download.  This is not a given, however: many – if not all – assets on the page could be blocked from downloading until the HTML file is fully loaded. Time to Last Byte should be less than 0.5 seconds (500 milliseconds).

How to Identify the Issue 

To find out if your site is experiencing delays due to a slow first/last byte transfer, find a free website performance testing tool that will show website load process in a waterfall chart.  (Check out our blog post on what a waterfall chart is and how to read one.)  In the examples shown below, we used our own free tool at www.websitetest.com.

Once you’ve run a test on your website and are viewing the results, look for the first bar in the waterfall chart.  Each bar in the chart represents an asset on the page, be it an HTML, JavaScript, CSS or image file. Unless there’s been a redirect, the first bar will always represent the HTML document download.  The colors represent stages of connecting with the server.  The purple part is waiting time, which directly precedes the first byte traveling to the browser.  The gray part indicates the time between the first byte and the last byte.

Example: Long Time to First Byte

(Click here to view and interact with this example)

Notice the long time – about 1 second – where nothing can load (red box).  The first byte is slow to come through.  There is a long DNS lookup time (teal) and fairly long waiting time (purple).  If you look at the page load screen shots above the waterfall, you?ll notice that nothing on the page appears until nearly 4 seconds of loading.  This is partly due to the 1-second delay where nothing was able to load.

Example: Long Time to Last Byte

(Click here to view and interact with this example)

In this example the first-byte time is reasonable, but it’s the last byte time that really drags things down.  Notice the long gray section of the first bar – that’s the time from the first byte to the last byte. During this time some assets download, but when it gets to the 11^th asset there is a gap of over 1 second where the browser is starved for assets and cannot start a new asset download. This is because part of the HTML file containing information necessary to load assets from line 11 onward has not come through yet.  In this case, those assets are blocked until the last byte of the HTML file has come through.

What Causes a Slow Time to First/Last Byte?

Knowing that the problem exists is the first step. Finding out what is causing the slow Time to First Byte or Time to Last Byte is a more difficult question to answer.  In some cases, application performance management (APM) software may be necessary to pinpoint the cause if it’s within your system.  Here are just a few common examples of problems that cause slow first/last byte time:

• Geographic latency (server is far away from visitor)
• Poorly written server-side code
• Outdated server hardware
• Overloaded servers (clogged bandwidth due to high traffic – from humans, bots, or both)
• Poorly organized databases
• Poorly written database code