davidbgk
/
larlet-fr-david-cache

title: Throttled Thursdays
url: http://fourword.fourkitchens.com/article/throttled-thursdays
hash_url: 72a6f5871b8860e3066f9e598e98aba0

<p>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 <span class="caps">LTE</span> 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.</p>
<h2>Embrace the pain</h2>
<p>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 <a href="http://bradfrost.com/blog/post/performance-as-design/">performance as a basic feature of the web</a>.</p>
<p>We have the means to make this happen. It’s simply a matter of <a href="http://timkadlec.com/2015/05/choosing-performance/">choosing performance</a>, including it within every decision as we build sites and apps, and sticking to <a href="http://timkadlec.com/2013/01/setting-a-performance-budget/">performance budgets</a>. And the only way to really keep it top of mind is to experience bad performance for yourself.</p>

<blockquote><p><strong>I propose that web developers <em>everywhere</em> start taking at least one day of their week to throttle their internet connections.</strong></p>
</blockquote>
<p>See how your day goes with a throttled connection. Loading sites, running <code>npm install</code>, 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.</p>
<p>Tim Kadlec has mentioned on many occasions that we need to <a href="http://24ways.org/2012/responsive-responsive-design/">embrace the pain</a> 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.</p>
<h2>System-level tools</h2>
<p>Here’s a list of tools to help you experience the web in slo-mo:</p>
<h3>Charles (Win/<span class="caps">OSX</span>/Linux)</h3>
<p><strong>Charles</strong> 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 <em>Proxy » Throttle settings</em> and configure to your liking. It offers common presents but you can also manually  configure the bandwidth, latency, <span class="caps">MTU</span> (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.</p>
<p><a class="green button" href="http://www.charlesproxy.com">Get Charles</a> (free trial, $50 per license)</p>
<h3>Fiddler (Windows 7, 8, 8.1, 10)</h3>
<p><strong>Fiddler</strong>, similar to Charles, is a developer-oriented web debugging proxy. It is an add-on for .<span class="caps">NET</span>2 and .<span class="caps">NET</span>4, and it features a few other useful features for web development, such as remote debugging, performance testing, and session manipulation.</p>
<p><a class="green button" href="http://www.telerik.com/fiddler">Get Fiddler</a> (free)</p>
<h3>Android and iOS</h3>
<p><img class="right" src="http://fourword.fourkitchens.com/sites/default/files/blog/inline-images/network-throttle-android.jpg" width="288" height="278" alt="Screenshot of Android settings to control which cellular network is used."/><br/><strong>Android</strong> allows you to choose which cellular chip the phone will use as a user setting. Change it by going to one of the following:</p>
<ul><li><em>Settings » Mobile Networks » Preferred Network Type</em></li>
<li><em>Settings » Wireless <span class="amp">&amp;</span> networks » More » Cellular <span class="amp">&amp;</span> networks » Preferred Network Type</em></li>
</ul><p><strong>iOS 8.3</strong> recently followed suit, allowing you to pick which cellular chip the phone uses. On any recent iPhone this means <span class="caps">LTE</span>, 3G, or 2G. Enable the setting by going to <em>Settings » Cellular » Voice <span class="amp">&amp;</span> Data</em>. You must have an iPhone; the iOS Simulator does not surface this particular setting.</p>
<h3>Network Link Conditioner (<span class="caps">OSX</span>)</h3>
<p><strong>Network Link Conditioner</strong> is a more refined method of throttling your iPhone. You must connect the phone to your computer and enable the setting via <span class="caps">XC</span>ode. 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!</p>
<p><a class="green button" href="http://nshipster.com/network-link-conditioner/">Read about Network Link Conditioner</a> (free, bundled with <span class="caps">XC</span>ode)</p>
<h3>NetLimiter (Windows <span class="caps">XP</span>, Vista, 7, 8, 8.1, 10)</h3>
<p><strong>NetLimiter</strong> 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.</p>
<p><a class="green button" href="http://www.netlimiter.com/">Get NetLimiter</a> (free trial, $19.95 for Lite, $29.95 for Pro)</p>
<h3>Slowy (<span class="caps">OSX</span>)</h3>
<p><strong>Slowy</strong> 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. <strong>Slowy is not supported in Yosemite and newer</strong> but is a hassle-free option on older versions of <span class="caps">OS</span> X.</p>
<p><a class="green button" href="http://slowyapp.com">Download Slowy</a> (free, must use <span class="caps">OS</span> X Mavericks or older)</p>
<h2>Web development tools</h2>
<p>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:</p>
<h3>Chrome DevTools (Win/<span class="caps">OSX</span>/iOS/Android/Linux)</h3>
<p><strong>Chrome DevTools</strong> now supports network throttling when you enable device emulation (that little mobile device icon next to <em>Elements</em>). At the time of posting it is a blue-colored drop-down. You can set both a <abbr title="user agent"><span class="caps">UA</span></abbr> 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 <em>Disable cache (while DevTools is open)</em> in devtools settings.</p>
<p><a class="green button" href="https://developer.chrome.com/devtools/docs/device-mode#network-conditions">Read about throttling in DevTools</a> (free, included with Chrome)</p>
<h3>WebPageTest.org</h3>
<p><strong>WebPageTest.org</strong> 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 <em>Advanced Settings » Test Settings » Connection</em>. Like Charles, it offers some sensible, common defaults along with a Custom option which lets you throttle downloads, uploads, latency, and packet loss.</p>
<p><a class="green button" href="http://www.webpagetest.org/">Test on <abbr title="Web Page Test"><span class="caps">WPT</span></abbr></a></p>
<h1>Get throttling!</h1>
<p>Starting tomorrow, I will be <a href="https://twitter.com/search?src=typd&amp;q=%23throttledthursdays">throttling every Thursday</a> 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.</p>
<p><em>Special thanks to both <a href="https://twitter.com/andydavies">Andy Davies</a> and <a href="https://twitter.com/paul_irish">Paul Irish</a> for suggesting tools and other links contained within this blog post.</em></p>