Search code examples
performancenetwork-programmingtime-to-first-byte

What makes up the TTFB (Time-To-First-Byte) calculation, and how to see individual component timings?

I'm seeing high Time-To-First-Byte numbers reported in chrome dev tools for network requests. I'd like to improve it, but I'm not sure which part of the request process is leading to slow speeds.

Some sources quote this measurement as "DNS, SSL, Connect, Send, Receive, Wait". What is the authoritative definition of TTFB, and how can you accurately measure the pieces of it?

Solution

  • Using Wireshark as analysis tool to get details of the request.

    • Close all browser windows
    • Launch wireshark and setup to capture on your network card, wether wired or wireless.

    • On a Bash console, get ready to visit https://www.eff.org/ with a text browser like w3m

      w3m https://www.eff.org/

    • Start capturing packets

    • Hit enter on the console, once the page has loaded, stop capturing packets.

    • On wireshark, apply this filter to get significant events

      dns || ssl.handshake.type == 1 || ssl.handshake.type == 14 || ssl.handshake.type == 4 || ssl.record.content_type == 22 || ssl.record.content_type == 23

    Result: wireshark screenshot

    Analysis

    DNS : time at packet 6
    TCP handshake : Difference between packate 10 and 6
    TLSv1.2 handshake: Difference between packet 23 and 10
    Send : Difference between packet 23 and 24 (? not sure)
    TTFB : time at packet 27

    Wait time as regarded by browsers is the time a request has been waiting in the requests queue before it's served.

    References:

    http://www.thevisiblenetwork.com/2015/01/21/calculate-http-response-time-in-wireshark/ http://blog.catchpoint.com/2017/05/12/dissecting-tls-using-wireshark/