Responsive web design performance

Design with mobile (and performance) in mind first

A recent study showed that mobile is the primary Internet access method for a vast number of global Internet users. Roughly 50% of Internet users in Africa and Asia are mobile-only, in contrast to 25% in the United States. This study called “mobile-only” users those who never or infrequently use the desktop Internet (though the study included tablets in the “desktop” category). The bottom line: lots of people are primarily using handsets to access the Internet, and these devices are so much slower than desktop machines.

Before a mobile device can transmit or receive data, it has to establish a radio channel with the network. This can take several seconds. The best part is, if there is no data transmitted or received, after a timeout the channel will go idle, which requires a new channel to be established. This can obviously wreak havoc on your web page load times.

On a typical United States desktop using WiFi, a request’s average round trip takes 50 milliseconds. On a mobile network, it’s over 300 milliseconds. This is as slow as old dial-up connections. Additionally, even WiFi is slower on handsets, thanks to antenna length and output power. This means you really need to prioritize performance as you optimize your site’s design for mobile devices.

But most web designers’ focus right now is on tackling the challenges with mobile device screen sizes, and the method most people are turning to now for this is responsive web design. Unfortunately, the vast majority of responsive web design sites are not devoting enough attention to performance. That being said, responsive web design is not inherently bad for performance, and your approach to implementing responsive web design can make an enormous impact on your site’s page load time.

Responsive Web Design Approaches

If you start your development or design workflow by thinking about the project from a mobile perspective first, you may be able to avoid many of the problems that bloated desktop sites tend to face. Designing mobile first can save you time by forcing big questions early—like what the core purpose of your page or site is and trimming all other cruft.

An additional recommendation I have when approaching a new project is to create a performance budget, such as a total page weight limit or total page load time goal. By creating a performance budget up front, you have an easy baseline to refer to as you design and develop. If you decide that you want the page to be loaded under two seconds, you can continue to play with the balance of aesthetics and performance and decide what works best to meet that goal.

Responsive Web Design Implementation

As you implement your responsive web design, you’ll make choices about your content’s size as it is displayed to the user. It may be fluid, it may be fixed and change at certain breakpoints, or you may choose to simply not load certain assets at certain screen sizes. This is why it’s important to make sure you are only loading the assets you truly need for a user.

One approach to consider is conditional loading. You may have heard the term “RESS” popping up lately, which is using responsive web design combined with server side detection. This takes into account what kind of device the user is on—screen size, touch capabilities, etc.—and loads only the content that is necessary for that user to see. A tool like Adaptive Images, for example, detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images.

Similarly, lazy loading is another technique that you can try, in which you load assets like images or content when the user requires it. You deliver what’s necessary above the fold for the user, and “lazily” load other things as the user scrolls. However, be aware that this can cause problems for screen readers, search bots, and users with JavaScript disabled.

Picturefill is another technique you can use to deliver correctly sized images to your users. It mimics the proposed picture element, requires a tiny JavaScript file, and works across all browsers. Performance-wise, this is great. It provides unique image URLs that can be cached. It starts with the smallest image and requires only one image download for the user, and there’s even a fallback for old versions of Internet Explorer. However, that markup ends up being pretty sizeable, and may be hard to replace in the future if browsers decide on a different universal responsive image solution. This is why you may want to abstract your image markup in a template or function call so it’s easier to swap out in the future.

Asset loading is also incredibly important when it comes to third party scripts. Third party scripts can be a single point of failure for your site if they don’t load, but equally importantly, they can drag down the performance of your site when they do load. There’s no reason why these scripts need to load synchronously—you should always load them asynchronously. If the third party doesn’t provide an asynchronous version, demand it. Also consider replacing these scripts in a responsively designed site with simple links that don’t have the overhead and are much more in your control for performance optimization.

All of the image and markup optimizations previously covered in this series will also help you tremendously when you implement responsive web design. A holistic approach to responsive web design that takes into account other factors like accessibility and behavior will help you implement the best experience for your users.

In the next post, we’ll walk through benchmarking page load time as you iterate through improvements to the design and performance of your site.

Additional Resources

tags: