Fast Speed of The Frontend Performance: Is It Really Important?

Sometimes potential clients leave an online store in spite of its various goods, attractive prices and nice interface. Why does it happen? The answer to this question is simple – people can’t stand waiting long to load pages of the site. If it takes too much time, customers will certainly look for the faster site. That’s why speed is one of the crucial features of internet stores.

In the everyday life we constantly face situations demanding great patience from us. We have to wait at the airports, shops, banks and so on. People are tired from waiting, it makes them really annoyed. That’s why they want the online shopping to be fast.

Serving great number of customers simultaneously is possible online. People know this and expect the service to be immediate. According to Kissmetrics, they won’t wait more than 3 seconds for the page to load. Less than 2 seconds is expected time for the customers to be satisfied and not to leave an online store searching for another one. 

Negative influence of bad performance on your business

Bad performance makes your customers unsatisfied, and thus has great negative influence on conversions and sales rates. If the loading time admits just one second of suspense, it leads to 7% conversions decrease. For example, Amazon can lose one percent of its revenue due to the latency of one hundred milliseconds. This is significant for the company. But there is a strange tendency – instead of getting faster, websites get slower annually. It looks like it’s done specially. But why do they lose their money?

Complicated websites

Every year websites become more complicated. Big images have great influence – they form almost sixty percent of the internet page’s weight. That’s why the pages are pretty “heavy”.

Growth of mobile networks

Nowadays the usage of smart phones expands vigorously. Mobile devices hold more than a half of the whole online traffic. And users want the loading time of a page to be the same as on their computers, and even faster. It’s a hard goal, there are some network limits and restrains

Such factor as bandwidth is not crucial, as there isn’t much difference between 3G and 4G web browsing experience. But what is the most important restraining factor? The answer is latency. This is the needed time for some request’s route: browser-server-browser. Knowing how important the latency is for wired connections, it’s easy to understand its crucial role for mobile ones.    

The mobile networks differ strictly from the networks used at home or at offices. For example, if, you reach internet from home, and the conditions are favorable, your round trip time will be about 50-200 milliseconds. On mobile devices this interval will be within confines of 100-1000 milliseconds. It differs for the worse!

What is to be done?

We can make some following conclusions:

  • The importance of speed is obvious
  • User don’t wait more than 3 seconds
  • Mobile network expands, and mobile traffic prevails
  • Mobile web is not fast

So, there is a problem. What is to be done to exclude this aspect of bad performance? We can propose some effective measures.

Speed as a significant component of UX design

It's known that speed has great influence on the rates of conversion which help you to form competitive advantages. Thus, speed is your store’s feature. You have to understand its importance; otherwise you certainly will lose your clients. They will just refuse using a slow website. Remember this!

Planning UX design of your website in advance is really useful. Furthermore, if you see the frontend performance as its significant part and have the sufficient budget.

As Fred Wilson supposes in his speech “The 10 Golden Principles of Successful Web Apps”, speed is of great importance, and customers refuse using a slow application. He explains this mainly from mainstream users’ position, because he can watch his family’s behavior and thus claim that they just leave when facing something really slow. 

First approach: basic and mobile

The content is to be the first to start with. It must be well-structured, it’s important to define the central point to be focused on. Especially, it takes much effort when a screen is small. You have to decide what content you have to put on the screen, and what you can put aside. It helps you to choose the most important and necessary information or functionality as well, and thus makes the first approach mobile. You can compare this with a building process – a foundation, and then the rest.   

A basic mobile experience will be perfect to start with. To intensify use a media query cascade. It also will help to adapt the design from the small screens to the bigger ones if necessary.

Setting a performance budget

Money is not the only factor worth attention. “Setting a performance budget” is an article written by Tim Kadlec. It represents his interesting point of view.

He sees a performance budget as one that is set on your page. And the page isn’t able to overstep the line of it.

Such elements as weight of the page, time of loading, number of requests and so on form your so-called budget. When you plan a project, don’t forget to identify the main purposes first. For example, if a page doesn’t have to exceed 500 Kb, and a slider consists of 5 big images, you must understand that you’ll fail to realize your purposes.

The achieved purposes must be strictly followed. If there is need to put some additional information, you have to check whether it exceeds the set budget or not. If the result is positive, you can use some effective measures:   

1. Optimize or remove a feature or asset that already exists on your page.

2. Just don’t add the new ones.

Make it optimal!

Take into account that you have to pay special attention to this part. Try to extract the last kilobyte out of your site. Making it optimal will help you:

  • To reduce latency, http requests and size of the file.
  • To achieve optimization of the critical rendering path.

There are a lot of ways to make these purposes realized, and we’ll tell about them in our next posts.

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.