The DevTools waterfall shows each part of the request in a different color.Īgain, you can hover over the request to get an explanation of the breakdown. Network round-trips Ī network request to a new website consists of multiple sequential round-trips that are needed to create a server connection: Learn more about the different types of network throttling. Note that DevTools uses a relatively basic type of network throttling. Throttling the network allows you to watch your page render gradually, observe what order content is displayed in, and which block rendering. Here's a site on a fast connection without any throttling.Īnd here's the same site loaded using the Slow 3G setting. To enable throttling, select an option from the dropdown on the right of the "Disable cache" checkbox. This lets you simulate how your site loads on a slower connection. To make investigating performance easier, Chrome DevTools includes a network throttling option that artificially increases response delays and reduces bandwidth. Likewise, running your server locally means there's practically no round-trip latency. So a 10MB image might load quickly on your computer, but will take a long time on a 3G connection. Network throttling Īs a developer you probably use a relatively fast internet connection. Learn more about reducing slow Time To First Byte (TTFB). It might be doing unnecessary work or run slow database queries. To resolve slow server responses you'll need to look at your backend code. Use gzip or brotli to compress the response.
0 Comments
Leave a Reply. |