App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide How to Perform Network Throttling in Chrome to Simulate Poor Network

How to Perform Network Throttling in Chrome to Simulate Poor Network

By Jash Unadkat, Technical Content Writer at BrowserStack -

Users across different locations might not have the same quality of network bandwidth which might cause altered user experience. To understand how the user perceives the website under different network conditions especially slow network areas, QAs use Network Throttling and see how the website renders under slow network using chrome devtools.

This detailed guide explores what Network Throttling is and how Chrome developer tools slow down network using two different

What is Network Throttling?

Network Throttling is an intentional method to slow down the internet speed. It is used to analyze web performance where network throttling, or network condition emulation is used to emulate low bandwidth conditions.

Why is Network Throttling important?

Network Throttling is done to test the website and get first-hand real user experience that many users with slower networks face in real world. This is a way to test the web application under real user conditions and understand the performance of the website.

Network simulation helps developers or QAs simulate the performance of a website in different bandwidths like 2G, 3G, 4G, etc. This is extremely useful from a testing standpoint as testers get a sense of how the website loads and functions when accessed from different internet connections.

Network TypeDownload (Mbps)Upload (Mbps)Latency (ms)
Slow (2G)0.250.05300
Average (3G)10.5100
Fast (4G)201020

This article will demonstrate two methods, using which testers can simulate poor network conditions while testing websites in Chrome.

Note: For developers or QA engineers seeking to simulate poor network conditions across real mobile devices (for example, 4G network on iPhone 12 Mini or Samsung Galaxy S20), the second method will be more effective in deriving accurate results.

Method 1: Network Simulation Using Chrome DevTools

Chrome browser provides a network throttler in its DevTools. Chrome developer tools slow down network and help Developers or QAs to analyze website performance in slower network profiles.

Note: However, one must bear in mind that this is just a simulator, and the results for a real device may vary up to some extent.

To use the network throttler in Chrome:

  1. Open Chrome DevTools. Open Chrome Developer Tools for Network Throttling
  2. Navigate to the Network Tab and open the Throttling dropdown which is set to No Throttling by default. Open Network Tab to Slow Down Network using Chrome
  3. From the dropdown menu highlighted (as shown in the image above), select Slow 3G. Choose the required Slow Network for Network Throttling in Chrome
  4. To add Custom Network, click on Add. Add Custom Network Profile for Network Throttling
  5. Then, click on Add Profile and fill in the required details to create a Custom Network Profile. Add Custom Network Profile for Network Throttling in Chrome Creating Custom Network Profile in Chrome for Netowrk Simulation

As the browser usually loads the page from the cache, users must select the Empty Cache And Hard Reload option. It forces the browser to load all the resources. This is helpful in examining how a first-time visitor experiences a webpage loading on slow 3G speed.

Check out this interesting article that explains how to test websites from different locations.

Method 2: Chrome Network Throttling on Real Devices Using BrowserStack Live

An accurate way of validating how web pages load in poor network connections is to test them on real browsers installed on devices. BrowserStack’s real device cloud enables developers and QAs to test their websites in real user conditions, including different internet bandwidths.

Simulate Network Conditions on Real Mobile Devices

Instantly choose the desired Android or iOS device on which to simulate the network conditions. Simply sign up for free, navigate to the Live dashboard and choose the desired OS-device-browser combination. The image below represents a sample Live session on iPhone 12 Mini.

Chrome network throttle on BrowserStack

As shown above, the Google website is loaded over a 3G connection on a real iPhone 12 mini.

Developers or QAs can leverage the Throttle Network feature to test the website in multiple network profiles like Edge, 3G, 4G, etc. One can also add custom network profile values to test their websites as per specific requirements.

Throttling the network gives a better idea of how long a page takes to load on a particular mobile device when accessed in a specific network connection.


Must Read: How to test website on older browser versions


Moreover, it also helps developers or QAs to identify if there’s a scope for enhancing the experience for users accessing a site from slow bandwidths. Enhancements may include adding a progress bar or wait statements to avoid the frustration of page load delay among the users.

The demonstration above will help individual developers and QAs to perform network throttling for their websites. Besides, the second method will prove useful for those seeking to simulate different networks on real mobile devices while testing websites.

Try Network Throttling on Real Devices for Free

Tags
Cross browser testing Manual Testing Mobile Testing

Featured Articles

How to Increase Website Speed

How to view Mobile Version of a Website on Chrome

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.