Optimizing Mobile Performance in Responsive Design

Responsive design, the concept of building a web page that stretches/shrinks into differently sized screens, can have a big impact on page performance, especially on mobile devices. A recent study cited in eWeek revealed unacceptable page load times of 155 responsive sites analyzed. In fact, just 21% of the sites loaded in less than four seconds on mobile phones. The study identifies site images as the major culprit behind slow load time. For all sites, the average page weight is often adversely impacted by image size. Server-side technology can help solve this problem.

Imagine a large promotional image on your responsive website that is served to desktop users. Often, users will drag and resize sites in their browsers. To enable the ability to resize to any dimension, the image needs to be served in full size. On a mobile phone, however, the screen is limited to a much smaller area and serving a full-sized image would be wasteful as it would add a lot of unnecessary bytes to the page weight.

The solution is simply to serve the properly sized image to the appropriate device, but how do you do that in responsive design? There are many articles that focus on client-side solutions to this problem, such as using JavaScript to detect screen properties, or leveraging HTML5 picture element or srcset, but there are just as many articles that discuss problems with these approaches.

The issues have to do with browser support, handling retina displays, browser prefetching, and other factors. The end result is that the user downloads multiple images, not all of which are required. These extra images take up additional HTTP requests, add to the page weight, and degrade both the page performance and the user experience.  Network latency is the biggest performance bottleneck today, so how can you optimize the mobile experience by not downloading unnecessary imagery on mobile devices?

We have found that having the ability to target a mobile device server side allows you to detect and optimize requests. The ability to target a mobile device and change the path to an image before the browser starts reading and rendering the page ensures that mobile users get a smaller version of an image in a single HTTP request.

You could combine this technique with an automated performance optimization solution to even further compress and optimize image assets and other resources on your site. Such optimization can not only improve speed and the user experience, but it has also shown to lift business metrics such as conversion and engagement. In the widely cited Aberdeen study “The Performance of Web Applications: Customers are Won or Lost in One Second,” research indicates that one second matters. A one-second delay in page-load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions. Imagine the impact a 7% loss in conversions will have to your bottom line.

Site speed and how to best optimize all sites — whether responsive design or not — continues to be a topic of discussion. If you’re interested in learning more about the importance of site speed and optimization, here are some articles to get you started:

• Just One Second Delay In Page-Load Can Cause 7% Loss In Customer Conversions
• For e-Commerce web performance, milliseconds matter

To learn more about SiteSpect, visit our website.