Adding Delay to Network Requests

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

Below are some scenarios where you might want to delay the network requests –

• Test the performance of your web app on a slower network.
• Test your app's behavior when one or more APIs respond slowly, i.e., 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 the loading speed of an external resource on your app.

This article focuses on the different methods developers can follow to simulate these network conditions.

Approach 1: Network throttling feature of DevTools. 

The network tab of the browser (Chrome, Firefox, Edge, and Safari) provides an option to throttle network requests. With this, you can experience the same network conditions one might face when using slow 3G, 2G connections or offline.

Steps to use the throttler:

1. Open the DevTools of your browser (Cmd + Shift + C for Mac and Cntrl + Shift + C for Windows).
2. Switch to the Network Tab.
3. By default, the throttler is set to 'No Throttle.'
4. From the dropdown menu, select the type of network to simulate.
5. Long press the reload icon while the DevTools panel is open.
6. Select Empty cache and Hard Reload.

Limitations

As it throttles the entire network, it may not be helpful if you want to delay a specific network request like a particular API request. For more information, refer to the documentation: Chrome, Firefox

Approach 2: Server-side delay - Using public APIs to add delay in requests

APIs like deelay.me and Requestly allow you to selectively delay a network request. These types of delays won’t impact the browser's performance. 

How to use the API:

1. Change the link to be delayed as: “https://app.requestly.io/delay/<delay_in_millisecods>/<URL_to_be_delayed”
2. Let's say 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. 
3. Then the URL has to be changed to: “https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.sl”
4. You can configure a Redirect Rule in Requestly to redirect the jQuery CDN URL "https://code.jquery.com/jquery-3.6.0.slim.js" to above mentioned URL.‍

Limitations

• As the requests are redirected to public APIs, they cannot be applied to XHR requests, as CORS policy would block the redirected resources.

Approach 3: Client side delay - Using Requestly browser extension 

Requestly is a free browser extension that allows you to delay a particular network request. You can also modify headers, redirect URLs, switch hosts, mock API responses, insert custom scripts, and do much more. Requestly delay rule works primarily on the client side. 

To create a Delay Request Rule in Requestly:

1. Install Requestly’s browser extension.
2. Click Delay Network Requests and click Create Rule.
3. You can choose the option you want from the dropdown menu.
4. Enter the time delay and click Create Rule.

You can also combine this with other rules of requestly, for example, when you want to modify the headers of the request after delaying it.

Limitations

• The Requestly extension actually adds to 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.

Which approach should I take?

Whenever you want to test your entire application on a slower network, you should prefer using the browser's network throttling feature. If you want to add delays to external resources like CSS, JS, etc. prefer using Server Side delay. To add delays to API requests (& AJAX requests), r using a Client Side delay would be a better option.

I hope this article gives you clarity on how to test your applications on a slower network or simulate API latency in your app.

We regularly share tips and tricks to speed up your web development process. Do follow us on Twitter to stay up-to-date on our blogs. We are also reachable by contact@requestly.io

‍

‍