Emulating mobile network environments

Chris Lamb, May 10th 2014

It can sometimes be a bit of surprise after deploying a new mobile-friendly website the first time you use it "in the wild".

Whilst you may have spent significant time and effort on a responsive design and minifying or removing as many static assets as possible, the effect of latency and packet loss in real-world mobile networks can often expose parts of your site that require further optimisation or reveal large holes in your interaction design.

Examples of issues include:

  • Animations not waiting for the asset to have fully loaded
  • Missing block background colours behind images resulting in (for example) white-on-white text
  • Slow page loading times
  • AJAX-backed interactions missing progress or loading notifications
  • Interfaces not feeling reassuring in the presence of high latency
  • Custom fonts preventing the page from being readable until they have fully loaded
  • Un-optimised images, or images that are excessively large for typical mobile devices
  • Large background graphics that are not progressively rendered using interlacing
  • Excessive raw bandwidth consumption

These problems are very easy to miss when developing your site – you are most likely developing on a desktop or laptop computer using the loopback network interface. Even if you switch to your mobile for testing you are probably still connecting over a reasonably fast wi-fi connection, so any defects remain undiscovered.

To work around this, you can add the following function to your ~/.bashrc or ~/.zshrc:

net () {
    case "${1}" in
        echo "E: Invalid action '${1}'"
        return 1

    for IF in /sys/class/net/*
        sudo tc qdisc ${ACTION} dev $(basename $IF) root netem \
            delay 600ms 400ms 25%

After restarting your shell, you can then enable "mobile mode" with:

$ net slow

This will add a 3G-like latency and delay to your computer. Localhost connections will be modified as well, so you can integrate regular "mobile" testing into your existing workflow without having to switch to another device. Of course, this doesn't replace "real world" mobile testing, but it could identify most of the problems outlined above earlier in the development cycle.

Once you have finished testing, make sure you disable it with:

$ net reset

(The netem functionality that underlies this tool has quite a few options if you wish to experiment or explore more.)

comments powered by Disqus

Learn how to speed up your Django site — get your FREE 14-day course

Become an expert in high-performance web applications.