The meanings of indicators in waterfall flow are as follows:

  • Queueing

The browser queues resources, for example, for higher priority requests or requests with more than 6 concurrent requests.

  • Stalled

The holdup time due to queue time.

  • Proxy negotiation

Negotiates time with the proxy server.

  • DNS Lookup

DNS resolution time, the browser needs to convert the domain name to IP.

  • Initial Connection

The time it takes to establish an HTTP connection before the browser can send a request.

  • SSL

If the site uses HTTPS, this is how long it takes for the browser to establish a secure connection with the server.

  • Request sent

The time when the request was sent.

  • Waiting (TTFB)

The amount of time to wait for the server to return data, which is subject to server processing performance.

  • Content Download

The time it takes for the browser to download the resource, which is subject to file size and bandwidth.

As you can see, the time spent on an HTTP request is broken down to help analyze and locate the problem.

So how do you reduce resource consumption or speed up page opening? I think there are several directions to consider:

Optimize the resource sequence and reduce the opening time of the first screen.

Convergence and divergence of domain names of websites, too many domain names cause more HTTP connections to be unable to reuse, too few domain names cause exceeding browser limits and waiting.

Reduce the number of HTTP requests, such as the proper use of client caching, and now there are front-end tools to merge JS/CSS resources.