Sunday, 17 November 2019

Timing tab of chrome dev tools

Timing breakdown phases explained

Here's more information about each of the phases you may see in the Timing tab:

  • Queueing (no-color, transparent, white). The browser queues requests when:
    • The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images.
    • The request was put on hold to wait for an unavailable TCP socket that's about to free up.
    • The request was put on hold because the browser only allows six TCP connections per origin on HTTP 1.
    • Time spent making disk cache entries (typically very quick.)
  • Stalled/Blocking (grey). Time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation.
  • Proxy Negotiation (grey):Time spent negotiating with a proxy server connection.
  • DNS Lookup (Dark green). Time spent performing the DNS lookup. Every new domain on a page requires a full roundtrip to do the DNS lookup.
  • Initial Connection / Connecting (Orange):Time it took to establish a connection, including TCP handshakes/retries and negotiating a SSL.
  •  SSL (Orange, but I saw pink on chrome):Time spent completing a SSL handshake.
  •  Request Sent / Sending (Green)Time spent issuing the network request. Typically a fraction of a millisecond.
  • ServiceWorker Preparation. The browser is starting up the service worker.
  • Request to ServiceWorker. The request is being sent to the service worker.
  • Waiting (TTFB) (Green). The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.
  • Content Download (Blue). The browser is receiving the response. If you see lots of time spent in the Content Download phases, then improving server response or concatenating won't help. The primary solution is to send fewer bytes.
  • Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
  • Reading Push. The browser is reading the local data previously received.




No comments:

Post a Comment