How to Test Your Application in Different Network Conditions by Simulating Artificial Delays in Network Requests
See how to test your application in different network conditions by simulating artificial delays in network requests.
Join the DZone community and get the full member experience.Join For Free
There are various methods available to simulate the network conditions like throttle network traffic using browser DevTools Network Throttle feature, Publicly available APIs which respond with delay, and using a Browser Extension to redirect your actual request to those Public APIs, and Chrome Extension which adds actual delays to the network requests.
As a frontend developer or QA, we want to test our website performance in different network conditions and with different API latencies too. Testing certain components of web applications requires simulating delay in one or more web app components.
Here are some scenarios where you would like to delay the network requests.
- Test performance of your web app on a slower condition
- Test behavior of your app when one or more APIs respond slow (API Latency has gone up)
- Check if any race conditions exist when some resource X gets loaded after/before another resource Y.
- Test the impact of slow loading of external resources impact on your app.
- Test your loading experience in the app.
It is important for a developer to test the website's performance in poor network conditions. This article focuses on the different methods which could enable developers to simulate network conditions.
Approach 1: Network Throttling Feature of DevTools. Available in Chrome, Firefox, and Edge.
The network tab in DevTools provides an option to throttle network requests. With this, you can experience the same network conditions that one might face when using slow 3G, 2G connections, or offline.
Steps To Use the Throttler
- Open DevTools (Ctrl + Shift + I)
- Switch to the Network Tab.
- By default, the throttler is set to ‘No Throttle’.
- From the dropdown menu, you can select the type of network to simulate.
- Long Press the reload icon while the DevTools panel is open.
- Select ‘Empty Cache and Hard Reload’ from the advanced reload options.
It is important to empty cache to examine the page as a first time visitor.
- It throttles the entire network. It is not possible to delay a particular network request.
- It might not be helpful in cases where you want to selectively delay network requests.
For more information, refer to the documentation here.
Approach 2: Server Side Delay - Using Public APIs To Add Delay in Requests
APIs like deelay.me and
https://app.requestly.io/delay allow selectively delaying a network request. This kind of delay does not impact the browser.
How To Use the API
Change the link to be delayed as:
For example - Suppose you want to delay https://code.jquery.com/jquery-3.6.0.slim.js by 4000 ms and see the impact on your app as your libraries heavily depend on jQuery. This URL has to be changed to :
You can configure a Redirect Rule in Requestly to redirect jQuery CDN URL
https://code.jquery.com/jquery-3.6.0.slim.js](https://code.jquery.com/jquery-3.6.0.slim.js to above-mentioned URL like
- As the requests are redirected to public APIs, they cannot be applied on XHR requests as CORS policy would block the redirected resources.
Method 3: Clientside Delay - Using Requestly Browser Extension (Chrome, Firefox, Edge, Opera, Brave)
Using Requestly, you can Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts, and much more.
Requestly delay rule works primarily on the client-side. This is how you can create a Delay Request Rule.
- It supports delaying multiple requests which contain a certain keyword or match against the regex.
- It also works with AJAX requests.
You can also combine this with other rules of Requestly, which is helpful in many situations like somewhere you want to modify the headers of the request after delaying it. It could be easily solved using Requestly.
- The Requestly extension actually adds the delay in the browser.
- Adding the delay in the browser could lead to a poor browsing experience when the delay is applied to too many requests or it is applied for a large duration.
- To test your entire application on a slower network, prefer using the browser's network throttling feature.
- To add delays to external resources like CSS, JS, etc prefer using Server Side delay.
- To add delays to API requests (AJAX requests) prefer using Client-Side delay.
Hope this article gives you clarity on how you can test your applications on a slower network or simulate API latency in your app.
Opinions expressed by DZone contributors are their own.