: How can I simulate a slow connection for page load? I have a fast server, and a reasonably fast home Internet connection. How can I simulate my page loading on a slow connection?
I have a fast server, and a reasonably fast home Internet connection. How can I simulate my page loading on a slow connection?
More posts by @Sims2060225
Sorted by latest first Latest Oldest Best
You could simulate a slow connection on a local web server at localhost by using node.js and browser-sync.
Run this command from node.js command prompt: npm install -g browser-sync
Run this command from node.js command prompt: browser-sync start --server
From web browser, open localhost:3001/, then click "Network Throttle" link to create a server with the selected speed and port:
Simulate Slow Connection using Chrome
Go ahead and install Chrome if you don’t already have it installed on your system. Once you do, open a new tab and then press CTRL + SHIFT + I to open the developer tools window or click on the hamburger icon, then More tools and then Developer tools.
This will bring up the Developer Tools window, which will probably be docked on the right side of the screen. I prefer it docked at the bottom of the screen, since you can see more data. To do this, click on the three vertical dots and then click on the middle dock position.
Now go ahead and click on the Network tab. On the right, you should see a label called No Throttling.
If you click on that, you’ll get a dropdown list of a pre-configured speeds that you can use to simulate a slow connection.
The choices range from Offline to WiFi and the numbers are shown as Latency, Download, Upload. The slowest is GPRS followed by Regular 2G, then Good 2G, then Regular 3G, Good 3G, Regular 4G, DSL and then WiFi. Pick one of the options and then reload the page you are on or type in another URL in the address bar. Just make sure you are in the same tab where the developer tools are being displayed. The throttling only works for the tab you have it enabled for.
If you want to use your own specific values, you can click the Add button under Custom. Click on the Add Custom Profile button to add a new profile.
When using GPRS, it took google.com a whopping 16 seconds to load! Overall, this is a great tool that is built right into Chrome that you can use for testing your website load time on slower connections. If you have any questions, feel free to comment. Enjoy!
Router Method (QoS)
One of the easiest methods is actually by simply login into your router dashboard and tweaking the QoS advanced settings. However... old, ISP provided or cheaper routers generally do not have the advanced QoS features which will allow you to throttle the bandwidth.
If you are among the majority of users with a cheaper or ISP provided
router then you may be fortunate enough to have a router that is supported by open source projects whcih will unleash the full potential of your router, not only unlocking full QoS features but many advanced features only found in high end Cisco routers.
Some open source router firmware projects include:
In Chrome, you can open the developer tools, click in the device icon (1), and then select the connection throttling (2).
Since around Chrome 45, it actually got a little bit easier: you don't have to be in device mode anymore.
I assume the issue is the same one i have. When developing a web project internally, working on LAN servers, or VM, sometimes you need to simulate a real live scenario, as if the server load were high, in order to see how fast the page loads on the client side, and if some data that comes from the server, actually loads and doesn't mess up your client-sided functions, due to server behavior and delays. Since there is no perfect way of simulating real-case scenarios, the best thing is to make sure, that you fire events, only after the data has been completely retrieved from the server. Using the $.ajax complete function and async:false seems to do the trick so far. This ensures that whatever data-based event you need to fire, will not be executed unless the data exists.
Use a mobile phone to connect instead of fast home connection. Open multiple browser tabs with video streaming to further slow down the connection.
You can emulate various net speeds on a Mac using an free application called Speedlimit
SpeedLimit is a Leopard preference pane for limiting your network
bandwidth to one of a couple different speeds — 768k DSL, Edge, 3G,
and Dialup. This is really handy for testing your iPhone app under
normal Edge network conditions in the iPhone Simulator.
You can slow down specific resources with Deelay.me:
Deelay.me is a delay proxy for web resources. You can use it with your images/stylesheets/scripts, to increase their load time.
A quick & dirty solution is to upload a large file to try to choke your outbound bandwidth, this should slow down your inbound connection, and is usually easier than trying to similarly choke inbound bandwidth.
Try out www.webpagetest.org/test. You can run a test from any of their remote servers around the world and see how fast you page loads from those location. It will even let you use a dial-up speed or other slow speeds for most locations.
Fiddler Web Debugger is an excellent HTTP proxy debugging tool for Windows that includes a modem speed simulation feature (Main menu > Rules > Performance > simulate modem speed). Fiddler is freeware.
I also like Charles Web Debugging Proxy, a similar tool. Charles can also throttle the connection speed. Charles is commercial software, but has a free trial available. What I like most about Charles is that it is cross-platform: Being Java-based, it can run on Windows, Mac OS X, and Linux. (You didn't mention which platform you're on, but it's probably one of those :-)
FireFox Throttle is a FireFox extension that should do it. Sloppy is a proxy which slows down your connection so it should work across browsers.
MODERATOR EDIT 2013-02-02
This extension is no longer available but a repo has been created on Github.