Adding Delay to 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.

Approach 1: Network throttling feature of DevTools. Available in Chrome, Firefox and Edge.

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.
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.

Limitations

  • 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.

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>

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 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.

Limitations

  • The Requestly extension actually adds the delay in the browser.
  • 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 test your entire application on a slower network, prefer using 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.

--

--

--

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!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

TDD Conference 2021 — How TDD sensitized me to speed as a regular workplace habit?

Scrum: an Agile Software Development Method

How to expect a compilation error with Azure Pipelines

How to Understand Surfaces in Grasshopper, Foundations in Grasshopper

creating vs counting

Why Am I Starting A Blog? (And the Process Behind It)

The Ultimate Guide to get High PR/PA/TF Tumblr Blogs

statistics on post types on tumblr platform

How to Add JWT Auth API to Existing Rails Application

Server with wires

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Requestly

Requestly

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!

More from Medium

Extend your router using Nokia G-140w-f (Bridge Mode)

Intermediate: Let’s us take a tour of Cloud DB in Huawei Mobile Service

Ace of Spades — Asymmetrical Play Patterns

Mongo’s Data API is Cloud Ready