Tag: HTTP

Throttled-Connection Website Testing

There’s a huge gap in a lot of web development projects: testing on slow connections!  More often than not, the sites are tested on the same network as the web server or at least on some crazy business level broadband connection.  No latency whatsoever.  What you really need to see is how your site performs on 3G.  Yes. 3G. A slow cell connection. Then you’ll start to realize what your time-to-first-load is and where the real pain points for your users lay.

This type of throttled-connection testing is also super easy.  So you really don’t have any excuse not to test, do you?

Here’s a very simple way to throttle your connection down to 3G.  It’s not a full-out real-world test, but it’s close enough for 99% of you.

Open Chrome Dev Tools.  Open the network tab, and check out the throttle:

Chrome Dev Tools - Connection Throttling
Chrome Dev Tools – Connection Throttling

There’s some very cool stuff in this network tab, eh?  You can change your connection throttle and limit how fast your site “downloads.” You can even take yourself offline to work out any application-cache / local storage issues.

Also, a HUGE feature for devs is the disable cache toggle.  As long as you have the dev tools open and this checked, it won’t cache anything from the server. Great for testing! Tell your testers/PMs/etc about this so you don’t have to constantly tell them to clear their cache when they don’t see your bug fixes.

Preserve log will help you watch traffic between pages. With the disable-cache toggle UNchecked, this will show how your site behaves with http-caching on.

Explore the network tab.  It’s amaze-balls. So much good stuff in a browser. And Chrome’s not even an IDE!  THANK GOODNESS FOR THE CHROME DEV TEAM!

Watching Localhost Traffic with Fiddler

If you’ve tried to use Fiddler to debug your ajax script locally, you’ve probably noticed that it doesn’t log the traffic to http://localhost/. Well, it can! And it’s a really easy hack. Just put a dot at the end of localhost in your browser. Like this:

http://localhost.:321/

AMAZING!!!

(and here’s why it works)