I really enjoy the process of making websites faster. It’s my job, so I bring it up whenever I can. But it’s not everyone’s job. It can be a tough problem to keep at the top of your mind when fast internet is always available. It’s easy to forget when you have broadband at home, blazing pipes at the office, and LTE walking around town.

But not everyone has these luxuries, and for the Open Web to truly succeed on a global scale the majority of the web producers need to experience the web the way the majority of people consume it.

Embrace the pain

There’s been a lot of lively discussion lately about creating a culture of performance within organizations. The biggest news was Facebook’s Instant Articles, which some see as a blatant admission by many major sites that they’d rather let Facebook host their content than prioritize frontend performance for their products. It’s been called a failure of our industry to evangelize performance as a basic feature of the web.

We have the means to make this happen. It’s simply a matter of choosing performance, including it within every decision as we build sites and apps, and sticking to performance budgets. And the only way to really keep it top of mind is to experience bad performance for yourself.

#throttledthursdays

I propose that web developers everywhere start taking at least one day of their week to throttle their internet connections.

See how your day goes with a throttled connection. Loading sites, running npm install, pushing to GitHub, and even downloading GIFs in chat will immediately be more painful. And it should be painful, to remind all of us lucky broadband users how most people view our work.

Tim Kadlec has mentioned on many occasions that we need to embrace the pain of slow connections rather than avoid it, leading our web creations to be leaner and more robust. I can think of no better way than to experience a mobile connection on a device that is normally much faster.

System-level tools

Here’s a list of tools to help you experience the web in slo-mo:

Charles (Win/OSX/Linux)

Charles is a professional-grade proxy that does many things including throttle your connection. It is cross-platform and if you do significant amounts of mobile development I highly recommend it. It even allows importing/exporting of preferences if you want your team to use identical settings. To enable throttling, go to Proxy » Throttle settings and configure to your liking. It offers common presents but you can also manually configure the bandwidth, latency, MTU (packet size), and even whitelist which hosts get throttled. Once you’re configured, you can simply toggle throttling from the menu bar icon (it looks like a pitcher of water). In the general preferences you can set it to automatically enable throttling on startup.

Get Charles (free trial, $50 per license)

Fiddler (Windows 7, 8, 8.1, 10)

Fiddler, similar to Charles, is a developer-oriented web debugging proxy. It is an add-on for .NET2 and .NET4, and it features a few other useful features for web development, such as remote debugging, performance testing, and session manipulation.

Get Fiddler (free)

Android and iOS

Android allows you to choose which cellular chip the phone will use as a user setting. Change it by going to one of the following:

• Settings » Mobile Networks » Preferred Network Type
• Settings » Wireless & networks » More » Cellular & networks » Preferred Network Type

iOS 8.3 recently followed suit, allowing you to pick which cellular chip the phone uses. On any recent iPhone this means LTE, 3G, or 2G. Enable the setting by going to Settings » Cellular » Voice & Data. You must have an iPhone; the iOS Simulator does not surface this particular setting.

Network Link Conditioner (OSX)

Network Link Conditioner is a more refined method of throttling your iPhone. You must connect the phone to your computer and enable the setting via XCode. This is an easy one to forget about, so remember to switch it off when you’re done… or don’t if you really want to live the slow web!

Read about Network Link Conditioner (free, bundled with XCode)

NetLimiter (Windows XP, Vista, 7, 8, 8.1, 10)

NetLimiter has been around a while, and provides a simple, highly configurable interface for system-wide throttling within Windows. Like Charles, it allows you to isolate individual apps or even connections, and is a good tool for more advanced users wishing to control the connection a bit more.

Get NetLimiter (free trial, $19.95 for Lite, $29.95 for Pro)

Slowy (OSX)

Slowy is a simple app that gives you quick access to system-wide throttle controls. Just click the icon in your menu bar and pick your speed. Slowy is not supported in Yosemite and newer but is a hassle-free option on older versions of OS X.

Download Slowy (free, must use OS X Mavericks or older)

Web development tools

These tools allow you to adjust the network during development of your sites or apps, to more accurately paint a picture of the real-world consumption:

Chrome DevTools (Win/OSX/iOS/Android/Linux)

Chrome DevTools now supports network throttling when you enable device emulation (that little mobile device icon next to Elements). At the time of posting it is a blue-colored drop-down. You can set both a UA and a network speed, and it is a great way to instantly demo a slow connection, especially when developing locally. Local development is an easy way to gain false confidence in a site, because there’s no network latency. Bonus points: try testing with a cold cache by enabling Disable cache (while DevTools is open) in devtools settings.

Read about throttling in DevTools (free, included with Chrome)

Update 2015-07-27: Throttling is now featured in the regular Network tab as well, no need to enable device emulation! Read about throttling in this DevTools Digest

WebPageTest.org

WebPageTest.org is primarily a testing tool as opposed to all the development tools listed above. You might use many of the default settings when running tests, but I encourage you to be a bit harder on yourself and try a slower connection by selecting Advanced Settings » Test Settings » Connection. Like Charles, it offers some sensible, common defaults along with a Custom option which lets you throttle downloads, uploads, latency, and packet loss.

Test on WPT

Get throttling!

Starting tomorrow, I will be throttling every Thursday along with others at Four Kitchens. See if you can get others within your organization to do the same! Once we all embrace the pain of a slow web, we’ll be more motivated to make it fast. If you know of other good tools please drop them in the comments and I’ll keep this post updated with the best ones.

Special thanks to both Andy Davies and Paul Irish for suggesting tools and other links contained within this blog post.