Using nginx to fake a slow connection

A simple situation: Some Javascript code hides all images in an image grid until they are completely loaded, then throws them back into the document. Meanwhile a spinner should be shown instead so the user isn't confused by the empty page if the images take a while to load.

Of course, on a local machine or in a local network, images will load near-instantly and this sort of behaviour is hard to debug. Chrome offers a very nice feature: you can limit a pages loading speed to fake a slow mobile connection. This delays the image loading enough to get a good look at the spinners.

Trouble starts with older browsers like IE or edge. They don't let you limit the bandwidth whatsoever (at least I couldn't find any such option), and they're the usual suspects for correct CSS to mysteriously fail because of rendering bugs.

I was facing exactly that situation today, and after short consideration decided to use nginx to just create my own bandwidth-limiting proxy server.

After creating a simple and working nginx server configuration, this is the relevant part I added to the http block:

server {
   listen 4001;
   location / {
      proxy_pass http://localhost:4000/;
      limit_rate 10k; 
   }
}

That's it. Start the server, and navigate to any route on the original server (running on port 4000 in this case), then just increase the port number by one to get the limited version of the same page.

While this solution differs from chromes limiting in that it limits the connection to small chunks every second instead of simulating large packets with very long round-trip times, this is more than enough for most cases.

I will certainly be using this trick again, not even just for developing on old browsers, but also because it's a simple way to show someone the "slow network experience" without them having to set up their browser for it.

I suppose with a bit of scripting (using the nginx-lua-module, that is) this could even be extended to simulate many different kinds of network failure.

Anyway, I hope you found this article helpful, and it'd be interesting to hear from people who do this kind of work more often (I only have to deal with web design every now and then) and might even use dedicated tools for it :)