About InterGlobe Technologies

Responsive Web Design: Considerations for Performance Optimization

By Pawan Kumar Yadav,

The use of mobile devices to surf the web is growing at an astronomical pace with recent trends showing more and more people using mobiles as the primary device for accessing the internet. According to StatCounter, an independent website analytics company, the use of mobile devices to access the internet has increased by 67% worldwide over the last 12 months. In terms of web usage, mobile has already overtaken desktop in several countries including US, India, South Africa and Saudi Arabia.

Unfortunately much of the web isn’t optimized for mobile devices. Nor is it possible to download mobile applications for everything we do on the internet. Mobile devices are often constrained by the display size and require a different approach to how content is laid out on the screen. Thus, web designers often end up struggling to manage mobile device screen sizes instead of focusing on the more important aspect of performance (2G/3G Networks)

Developers need to consider mobile data transmission limitations where the majority of worldwide users are still on 2G/3G Networks. Wi-Fi networks are pretty powerful with the average request round trip taking approximately 50ms whereas it is close to 300ms on a Mobile network. However, even WiFi becomes slower on mobiles, due to antenna length and output power All these factors make it even more important to focus on performance optimization for Mobile devices.

Performance Optimization

Responsive web design performance is subjective to overall Architecture & Design and implementation approach leveraged at various layers (Client/Server). It is important to have a good implementation approach where code optimization is done from the client as well as server side which would ensure a huge high performance. While implementing a responsive web design, choices can be made on the nature of content to be displayed to the user. The content could be fixed and change at certain breakpoints or could be fluid. Alternatively, it may be decided to simply not load certain assets at certain screen sizes. It’s important to ensure that only the assets which are truly needed for a user are loaded.

A. Client Side Code Optimization Considerations

1. Above-the-fold Content

Designing the “above-the-fold” content to render it within a second can help improve user experience significantly and keep the user engaged.

There are multiple techniques to manage the performance of “above-the-fold” content. The user experience depends on the page rendering speed from usability/user perspective. Improvement techniques include minimizing the number of redirects and round trips and avoiding external blocking of JavaScript & CSS in above-the-fold content.

2. Use of JavaScript MatchMedia

Browsers loads and parse all of the selectors and styles for all devices .This means that a mobile phone would download and parse the CSS for larger screens. And because CSS blocks rendering, you would be wasting precious milliseconds over a cellular connection. There are ways to just load the CSS for device that we really need by .

3. A Mobile-First Approach

It is imperative to make mobile technology choices depending on what types of mobile services you plan to offer or how sophisticated your offerings would be, which would, in turn be based on what you want to communicate to the mobile user and what is most important to the user? Mobile technology strategies will evolve over time as mobile services evolve.

Consider a Mobile-first approach if you are starting new development or design workflow. This will help you to avoid the many problems that bloated desktop sites tend to face. Designing content and layout for the core message of your webpage will help trim all the fat and unnecessary info and will enable you to become more focussed and direct with your content, which will, in turn, produce a quick, concise and relevant mobile experience that is carried over to the tablet and desktop.

A holistic approach is very critical for a better performance by considering Client and Server code collectively to optimize implementation.

4. Asset Loading

Asset loading is very important when it comes to third party scripts. These scripts can be a single point of failure for your site if they don’t load, and also bring down the performance of your site. The scripts need to be loaded asynchronously.

Significant performance optimization can also be achieved by loading only required resources like CSS, JS and images. Sample snapshot below from a typical site shows number of request by component type and size (Bytes).

B. Server Side Code Optimization Considerations

Server-side feature detection and decisions are not new to the mobile web.

It improves responsive design in speed and usability, while keeping a single code base for everyone server-side. This consider attributes like device type, screen size, network type, touch capabilities etc. and loads only the content that is necessary for that device. Right mix of client and server side responsive web design techniques can yield incredible performance improvements.

Tools for RWD Code Performance Evaluation

The overall user experience is based on perceived performance which is quite easy to manage if we consider a holistic approach while designing a responsive web site. To measure perceived performance, we need to find out the time it takes for a page to start rendering visually in the browser.

Following are two tools which can provide statistics, recommendations and suggestions for performance improvement.

1. Google PageSpeed Insights -

https://developers.google.com/speed/pagespeed/insights/

This tool provides great information about various performance attributes of webpage along with recommendations to improve it.

Webpage Test

https:// www.webpagetest.org

Webpage test is a helpful tool which requests the site in a real browser and device, analyses how it loads, and provides tons of information. Some portions of their results are directly related to the perceived performance, for example, “Start Render”.  A sample result summary is provided below

Conclusion

Responsive design allows you to stay ahead of the trend. With the burgeoning demand for media rich mobile internet and apps and with the explosive increase in Tablet sales and smartphone device usage , responsive design is the key to keeping up ahead of your competitors and increasing your market share.

The above considerations will ensure that your responsive site is optimized for performance and will provide your users with a great experience.

About the Author

Pawan  is the CoE Practice Head for  Mobility at InterGlobe technologies. With a Bachelor of Science degree in Computer Science from Delhi University and a Honors Master of Science Degree in Computer Science from DAVV Indore, Pawan has over 18 years of IT experience in Enterprise Mobile Solutions, Application Architecture, Java/J2EE, Websphere Application Server, MQ Series, DB2, OTMA Bridge and C/C++.

Pawan has worked in leading firms including IBM, Bharti Cellular (Airtel) and Hero Honda Motor Ltd. (HHML ). In his stint at IBM, he managed large global programs for Citigroup, Bank of America, American Express Technologies and VISA Inc. Prior to joining IGT, Pawan was the Enterprise Mobility Practice Leader at SDG Corp. Pawan can be reached at mktg@igt.in

Share thisShare on Facebook0Tweet about this on Twitter0Share on LinkedIn86Pin on Pinterest2Email this to someone
Category: Mobility

Leave a Reply

Menu Title