Speeding Up Responsive Mobile Website Design

Responsive mobile website design is the standard, set by Google in particular and the industry-at-large in general — but it’s not the be-all and end-all of mobile websites. In other words, the fact that your website is responsive doesn’t make it mobile-friendly. It just makes it mobile-compatible, but there are differences between those two. Even the man who coined the term “responsive design,” Ethan Marcotte, said responsive design was never intended to act as a replacement for mobile websites.

What’s Wrong with Responsive Design?

Simply put, responsive design is slow. The CSS media queries used to establish what format the website will display to the mobile device block rendering, which means you don’t get to start the rendering process until after the CSS queries have been processed. That costs milliseconds. Moreover, in order for a media query to decide which of the many possible options to activate, it first has to load every single one of those options.

All this when the goal for total click-link-to-fully-rendered-page time is one second or less. That’s not a lot of time, especially when you’re dealing with loading all of those site elements over a cellular connection (and the phone isn’t especially lightning-fast at rendering in the first place.)

Tackling the Performance Problem

There are a few ways to speed up the painful speed of a responsive mobile website. The best is remarkably simple: design with JavaScript ‘matchMedia’ queries in the place of CSS media queries, and point each of the possible results of the matchMedia query to its own CSS sheet. The CSS sheet for each matchMedia result should have the website load only the minimum number of elements for the site to work properly on that medium.

Because you’re loading a smaller CSS sheet, you’re using less time before you can start rendering. Because your CSS sheet only points at the elements you’re actually displaying, you’re not loading 30-50 elements that your end user will never interact with, thus saving them not only page loading time, but bandwidth (which is still mighty precious in some cellular contracts.)

There are other ways to speed up your responsive design — using server-side tools like WURFL or Device Atlas, for example — but this single trick will slash your load times and allow your responsive designs to be as nimble as they are robust.