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 3Glike 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.
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.
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 cofounder and the Chief Architect at Mobify. His background in HCI research and largescale system architecture drives the evolution of Mobify's Mobile Cloud. On sunny days, Peter leads workouts on Mobify's rooftop patio.