Requestly

Adding Delay to Network Requests

#APITesting #SimulateLatency #WebAppTesting #SlowNetwork #DevTools

As a frontend developer or QA, testing certain parts of web applications require you to simulate delay in one or more components of the web app.

Here are some scenarios where you would like to delay the network requests.

  • Test performance of your web app on a slower condition
  • Test behaviour of your app when one or more APIs respond slow (API Latency has gone up)
  • Check if any race conditions exists 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 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.

Steps to use the throttler:

  • 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.
Long press the reload icon to see advanced reload options
Long press the reload icon to see advanced reload options
Long press the reload icon to see advanced reload options
  • 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.

Limitations

  • It might not be helpful in cases where you want to selectively delay network requests.

For more information, refer the documentation: https://developer.chrome.com/docs/devtools/network/reference/

Approach 2: Server Side Delay — Using public APIs to add delay in requests

How to use the API:

https://app.requestly.io/delay/<delay_in_millisecods>/<URL_to_delay>

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 :

https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js https://deelay.me/4000/https://code.jquery.com/jquery-3.6.0.slim.js

or

You can configure a Redirect Rule in Requestly to redirect jQuery CDN URL https://code.jquery.com/jquery-3.6.0.slim.js to above >mentioned URL like https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js

Method 3: ClientSide Delay — Using Requestly browser extension (Chrome, Firefox, Edge, Opera, Brave)

Delay HTTP(s) Requests using Requestly
Delay HTTP(s) Requests using Requestly
Delay HTTP(s) Requests using Requestly

Requestly delay rule works primarily on client side. This is how you can create a Delay Request Rule.

Delay Network Requests rule in Requestly App
  • 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.

Limitations

  • Adding the delay in browser could lead to poor browsing experience when delay is applied to too many requests or it is applied for a large duration.

Conclusion

  • 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 slower network or simulate API latency in your app.

We share news about developer tools. Follow us on Twitter to learn more about devtools. We are also reachable on email at contact@requestly.io

Originally published at https://requestly.io

Setup redirects, modify headers, switch hosts, insert user scripts and much more. Install it on Chrome & Firefox and join our family of more than 100,000 devs!