Responsive Web Design–a solution that delivers a consistent experience across different screen resolutions—is picking up significant steam as the standard method by which websites are being designed. Where just a few years ago device detection was commonly used, the pendulum has swung toward Responsive Web Design and designers evaluate it for reasons it won’t work, instead of the other way around. Indeed, Google has even listed Responsive Web Design as its preferred configuration for creating smartphone-optimized websites.
Reasons for Responsive Web Design
The growing diversity of devices is certainly a key factor in this shift and, as evidenced by a Google survey, 67 percent of users claim they are more likely to make a purchase when a website is mobile-friendly. But an equally important reason to move to Responsive Web Design is website performance. Let’s look at three ways website performance can be improved using this method:
Improving Responsive Web Design Performance
1. Inline the above-the-fold content, such as HTML markup, images, CSS and Javascript. With website size continuing to bloat and Google recommending that mobile websites load in one second or less, something needs to give. Websites should primarily structure the HTML to load the critical, above-the-fold content first, then reduce the amount of data used by resources by tactics such a minifying resources and enabling compression.
2. Optimize images. People want high-resolution images on their websites, as evidenced by the growing number of retina displays on devices, but at what cost? Image size has burgeoned on websites over the last two years, and is adding significantly to website bloat. Switching between different-sized and different-quality images to save bandwidth using tools like Picturefill and Adaptive Images can help, as can the adoption of new image formats, such as WebP and JPEG XR.
3. Control the loading of CSS and JavaScript. Responsive sites often combine the desktop and mobile CSS and JavaScript into one set of files, but this can impact performance by delivering unnecessary code to the width that’s being viewed. Instead, branch the load by using JavaScript to determine the width of the page that’s being loaded, and then request specific styles and JavaScript that are specific to that width.
Monitoring for Web Performance
Before you start the optimization methods above, it’s important to first establish a performance baseline, and consistently monitor your website’s performance throughout to determine what factors are still impeding load times. By taking a mobile and performance-first viewpoint using Responsive Web Design, websites can maximize their performance—and the user experience on all devices.
