How to simulate a slow internet connection for the user experience?

user_10740362 0
Viewed 1099

I was wondering if it is possible to throttle user internet speed when accessing the website, based on a user choice. This is needed for a small scale test of how users react to different internet speeds. My workaround would be to get the user to manually throttle the speed in chrome dev tools, but I would prefer that as the last option. Any option to achieve this or something similar would be amazing. Thank you.

Edit: Just to clarify I am looking to code the throttling functionality within the website itself so the user won't have to install something or set the Chrome dev tools manually, as I am aware of those solutions already.

throttling javascript
2 Answers

What you desire to do is not easily possible due to security reasons. Chrome (and most other browsers) prevent DevTools access from js scripts. A user has to manually and interactively press the buttons on DevTools to change the network speed of the chrome tab.

On your behalf, you should get the UX testers to use the DevTools.

That being said, there are solutions for this. But they might be complex!

Solutions in JS:

Dirty fix:

Create looping data downloader script that performs a DOS attack on the client. Basically something like:

let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);

Issues with this fix:

  • This creates real network congestion on the client, which might not be optimal.
  • Introduces web page lag because of CPU usage.

Better, but time consuming fix:

You can simulate a slow network environment by doing the following:

  • Periodically do request.abort() some ajax and xhr requests. See here and here. And yes, you have to keep references to the remote calls. (Some inspirational code by bruth)
  • Randomly prevent some images from loading by changing their src attribute for a few second. See here.

And... there are more to it.

  • Iframes are tricky as they can be from another domain. Chrome does not support cross domain request. To simulate a slow network, you have to stop the iframe once in a while and refresh it using the src attribute, just like the images. You could use window.frames[].stop(), to simulate a frozen/stopped iframe.

  • Videos are sometimes loaded with iframes, which is again hard to simulate network lag on. Unlike, images, reloading a video will reset the playback time. AFAIK, there are no way to simulate video lag easily (without heavy change of video playback logic).

  • And... if you are really into it. Go ahead and override different events such as those from GlobalEventHandlers.

Many solutions aside from js

  • Use Chrome DevTools (easiest as mentioned)
  • If the site is connected to a server you own. Add delay on before responding to simulate server congestion.
  • Use/create a Chrome Extension that changes the network speed
  • Create your own browser that can run the site, and change the network speed accordingly
  • Install software to control networks settings on the OS
  • Change the network speed on the router
user_75029140
user_59192890
Related