#SAM2013 Ribbon
4 Tips to Speed Up Your Responsive Website on Mobile
Posted in: Getting Started, Mobile, Speed Up Tips   -   August 31, 2013

Introduction:

When it comes to multi device web design, you really can’t beat responsive. Websites built using responsive design techniques such as fluid grids, flexible images and media queries are adaptive, interactive and provide a rich user ­experience. But many of the elements that make responsive websites beautiful and adaptive to screens of all shapes and sizes also make them slow to download to mobile devices.

Page speed is very important to mobile users, especially those browsing over a 3G connection. Current forecasts suggest the majority of users will be on 3G or 3G­like speeds until 2018 but visitors on mobile still expect the same web​ browsing speed on their phones as they do on desktops, and are even more impatient when it comes waiting for a website to download.

This means that developers need to be careful not to design an impressive, responsive website only to have visitors click the “X” in the corner because it performs so slowly on their smartphone or tablet.

To avoid an unnecessary bounce rate due to slow load times, here are four easy ways to build performance directly into your responsive website.

Tip #1: Move Your JavaScript

Script placement has a lot to do with page speed. Fetching and parsing JavaScript at the top of the page can block the rest of the DOM from rendering. If you have particularly complex scripts, users can end up spending a couple of seconds staring at a blank white page. On already heavy responsive websites, this can compound the performance impact by making the page feel slower than it actually is.

For best results, put scripts below the fold or at the bottom of the HTML to avoid unnecessary blocking. If you absolutely have to use a script, place it inline in the document head and make sure it’s small!

Tip #2: Serve the Right Image to the Right Device

Images make up most of the bytes in a page, so they are also the biggest culprits when it comes to poor page performance. There are actually a host of ways to make images responsive some that are simple to implement, and some that require extensive backend wrangling.

Our own responsive performance suite uses a single JavaScript tag inserted into your HTML to deliver responsive images. It is designed so that you can always send the right images to the right devices, and do so at remarkable speeds – without needing to change your website. You can try it on your website here: https://cloud.mobify.com/performance/quickstart/

Tip #3: Limit HTTP Requests

Reducing the number of HTTP requests is an age ­old web performance technique. However, with responsive designs leaning towards rich media experiences, (and the expectations of mobile users increasing), the network overhead of every single HTTP request starts to really matter. For mobile you might want to consider using CSS sprites instead of data URIs to reduce the number of image requests. Modern browsers don’t render until the CSS is downloaded, so you’ll want to keep your CSS file at the top of the document. For most small to medium sized sites, you should keep all of your CSS in a single file with generous caching rules.

Tip #4: Get Rid of Repetitive DOM Elements

Since a responsive layout adapts to the viewport of a device, sometimes elements that need to be present on desktop are no longer required on mobile. An example of this is sidebars or advertising that displays on desktop. Rather than simply hiding elements for the smartphone or tablet – hiding does not stop elements from being part of the parsing and layout phase – you should strive to remove unnecessary DOM elements completely.

It’s possible to do this in two different ways. The first is by using a ReSS solution to essentially do user agent sniffing on your web server to send the right template to the right device. Alternatively, you can use Mobify’s free performance suite, which has a feature to filter the DOM at any breakpoint of your choosing and does not require any changes to your web server.

Final Thoughts These four tips will go a long way to helping you improve the performance of your responsive website. But ultimately, the only way to ensure that your responsive website performs optimally on a mobile device is to think of speed as a feature in the design and build process (rather than as an afterthought). The bottom line is: nobody will use your gorgeous website if it’s too slow to load on their device!


Peter is a co­founder and the Chief Architect at Mobify. His background in HCI research and large­scale system architecture drives the evolution of Mobify's Mobile Cloud. On sunny days, Peter leads workouts on Mobify's rooftop patio.

Tags: , , ,

  • http://blog.justindorfman.com jdorfman

    Great post Peter! I found my new favorite tool: https://cloud.mobify.com/performance/quickstart/ =)

  • http://www.MaxCDN.com/ Chris Ueland / MaxCDN

    Thanks Peter!

  • kenrome

    good ideas.

  • Felix Brown

    Really it is a great post, as a newbie in web design, I read this post and bookmarked
    it, very organized information you have post here.