High Speed Responsive Web Design

“Today we are designing objects that will be perceived and used in a variety of conditions that we could not even think about before. Adaptive design allows us to move forward, provides a real opportunity to “create products that can resist the rapid flow of change.”

With these two sentences, Ethan Marcott concluded an article introducing an adaptive design to the world . Since then, the approach has captured the web, like an epidemic. It seems that not a day goes by without us hearing about a new adaptive website of any company. Major brands such as Microsoft, Time and Disney, have put an adaptive design into play, which immediately disarmed critics who insisted on its suitability only for small blogs.

This is definitely great news. As Ethan correctly noted, and shortly before him, John Allsopp , the inherent flexibility of the web environment is, first of all, a new opportunity, and not a limitation. The unique ability of web resources to interact with an unlimited number of devices, with an unlimited number of input methods – this is what we still have to get used to.

There is, however, another side of the coin that is often forgotten: the ability of the web environment to work with an unlimited number of networks, with certain values ​​of bandwidth and cost of waiting time, on devices with different hardware capabilities.

A few months ago, Stephanie Rieger wrote on Twitter :

“Shoot me … it seems, adaptive design is perceived as an opportunity to reduce performance, and not as an opportunity to increase it.”

I would be glad to disagree, but unfortunately, what is happening around confirms the words of Stephanie. Look at the size and number of requests for four well-known responsive sites launched in 2012:

74 requests, 1,511kb
114 queries, 1,200kb
99 requests, 1,298kb
105 requests, 5,942kb
And these are page stats for small screens!

These sites have received the approval of the professional community for its affiliate visual design and adaptive nature. They are pleasing to the eye, the designers have carefully thought out their appearance. But the above data spoil the picture: with how much time was spent on visual design, the performance of these resources is almost not engaged.

It is one thing if these sites were an exception, but unfortunately their mistakes are typical. Guy Podjarny, who has seriously studied the performance of adaptive sites, found that 86% of the mobile page has the same or larger size than the desktop version .

In essence, high performance of the site is an important requirement for any web project, and you need to think about it in advance. Low productivity is associated with a decrease in profits, traffic volumes, conversion and overall user satisfaction with the resource. Case for case, we see how performance optimization, even small, leads to an overall increase in performance. The situation with mobile sites is almost the same: 71% of users expect that they will be able to open a site from a mobile faster or at least as fast as on a computer.

Conclusion: performance is an important characteristic of the interaction experience.

So, if it is so important for any web project, why do we see so many heavy adaptive sites?

I strongly disagree with the belief that poor performance is common to all adaptive sites by definition. This is not a law – it is an excuse for the lazy. The situation serves as an example of how failures are blamed on a method, while blame is on its misuse. Usually this argument is powerless: it does not take into account that the trend of heavyweight websites is gaining momentum today. Although there are also adaptive sites among the worst offenders, it is impossible to hang all dogs on one method.

First you need to stop inventing excuses and seriously get to work. There are several things you can do to improve the performance of sites, including adaptive ones, right now.

Building a performance culture

Realizing the importance of performance for the success of the entire project, you can proceed to the next step: the formation of a culture in which the work of the site is given special attention.

The first thing you can do is set limits. Determine what the maximum size and number of requests you can afford, and do not allow these indicators to exceed on any of the pages. This scheme is used by the developers of the BBC adaptive mobile site.

One variation of the method that Steve Souders recently discussed in his podcast is to create a budget based on these indicators. The first step is to set a minimum, after which anyone who wants to add something to the page must first make sure that the innovation remains within the budget. If it exceeds it, one of three options for further actions is selected:

Optimize a feature or tool that already exists on the page.
Remove existing feature or tool from page
Do not add a new feature or tool.
The idea here is the following: decisions regarding site performance should be made during the development process, not at the end.

Experience the inconvenience for yourself

The disturbing trend of weighting is gaining momentum, and this is partly due to the fact that poor performance does not seem to us a problem. Most of us work with fast networks with low latency. We have no problem downloading a 4 megabyte site.

When I tested the above mentioned 5,942 kilobit site on the 3G network, it took 93 seconds to load. I looked at the white screen for a minute and a half. If someone from the developers did the same, I am sure they would not have launched the site in this state.

Do not think about numbers, more precisely, think not only about them. Open the site on a slower network and experience the beauty of waiting. If you do not have access to it, simulate it using tools such as Slowy , Throttle, or Network Conditioner installed on Mac OS X 10.7.

Start simple
There are several general techniques for improving the work of the site, both adaptive and traditional, which for some reason are often neglected.

Thanks to these simple optimization methods, you can make the page much easier, and the load faster which is a nice ranking factor in search engines and good for marketers agency.

Carefully work with images.
A common reason for the poor performance of a responsive site is the loading of unnecessary large images or, even worse, the loading of several images of different sizes.

When working with background images, pay special attention to where and how you insert images  – this will help avoid the situation when several background images are loaded, although only one is used. Do not rely on the display: none property. Although it helps to hide elements, images will still be queried and loaded.

The situation with the pictures on the page is somewhat more complicated. Never send a large image for a large monitor to a device with a small screen. This damages the site, not only making the page heavier, but also loading the device’s memory. Instead, use a tool, such as Adaptive Images and make sure that the user downloads only images that fit the size.

A new, heavily talked about element <picture> is another great solution for those who are thinking about the future of their project.

Selective download
Do not load resources that will not be used. If for some sizes the need for a script disappears, use matchMedia polyfill to ensure its selective loading – only in those cases when it is needed. Similarly, use eCSSential for selective working with CSS files.

The year before last, 24 ways published an article by Jeremy Keith on selective loading of content in an adaptive design based on screen width on the 24 ways . Subsequently, the technique was improved by the Filament Group and released as the Ajax-Include Pattern . This is a simple and effective way to make it easier to load pages that are loaded onto devices with small screens, and also to get rid of unnecessary elements.

Keep it simple
If you take a look at  HTTP Archive , you will see that JavaScript is another “heavy” resource, along with images, with an average page size of 215 kb. It also boasts the fifth place in the ranking of slow-loading and the second – in the rating of long non-displayed resources.

Large sizes can be explained by the fact that developers have begun to rely more on frameworks. For mobile devices, this is a serious problem. Peter Paul Koch (@PPK) recently said that existing JavaScript libraries are “too heavy for mobile.” The study of the time to analyze the request , conducted by Stoyan Stefanov, confirms this. On some devices for Android and iOS, parsing a jQuery query may take 200-300 ms.

There is nothing wrong with using the framework, but the problem is that it is becoming a standard. Before connecting another framework or plug-in, you need to stop and think about what real value it will bring and whether you can achieve the same result with simple JavaScript and CSS. (This is exactly the case when the performance budget method can be useful).

Do not limit yourself to working on the visual design of the site.
Speaking of responsive design, we like to refer to the versatility of the web environment. But this versatility is not limited to screen sizes. We should not forget about the parameters of networks, hardware capabilities of devices.

The web environment is incredibly fast and interactive space, and designing for it means that we take into account not only the visual design, but also other important aspects of the work of any site.

Leave a Reply

Your email address will not be published. Required fields are marked *