Frontend performance: why should you care?

Speed is the most important feature of any online store. If it is too slow, people will just not use it. It may have great products, low prices, the most beautiful interface, but if it takes forever to load, people will just go away.

In the offline world, we often have to wait. Line in the bank, security control at the airport, checkout line at the grocery store… pick your favorite. “I had such a great time waiting in the line for 3 hours” – said no one, ever…  People hate waiting.

On the other hand, in the online world, we have ability to serve thousands of customers in the same time. Immediate service. And that’s exactly what people expect. They expect websites to load in 2 seconds or less. Almost half of customers will abandon the website if it takes more than 3 seconds to load, and most of them will never come back. (Source: Kissmetrics)

Bad performance = Bad business

It is obvious that loading time has direct impact on customer satisfaction, conversions, and in the bottom line, on sales. It is proven that 1 second delay in loading time results in 7% less conversions. Amazon discovered that 100ms of latency costs them 1% less revenue. On the other hand, statistics show that websites are getting slower every year. It is almost like they are losing money on purpose. Why is that?

Graphic credit: radware.com

Websites are getting fatter

Websites are getting more complex with every year. We also have bigger screens and bigger images, and that is the main reason why web pages are getting “fatter”. Namely, around 60% of page weight consists of images.

It is a Mobile-first world

I already stated that screens are getting bigger. Well, kind of… They are getting smaller at the same time. Smartphone and tablet usage is climbing sky-high. We can now say that 55% of online traffic these days come from mobile. And mobile users expect sites to load as fast or even faster than on their desktops. And that’s hard to achieve due network constraints.

Although the mobile networks are getting faster, web browsing experience on 4G did not dramatically change compared to 3G. As it appears, bandwidth is not the biggest constraining factor – it’s the latency. Simply put, latency is time needed for a request to go from the browser to the server and back. Latency is important on wired connections, so you can imagine how critical it is on mobile networks.

The mobile web is a whole different game, and not one for the better. If you are lucky, your radio is on, and depending on your network, quality of signal, and time of day, then just traversing your way to the internet backbone can take anywhere from 50 to 200ms+. From there, add backbone time and multiply by two: we are looking at 100-1000ms RTT range on mobile.

What to do?

So far we stated:

1. Speed is important
2. Users expect 2 seconds
3. Mobile traffic is dominant
4. Mobile web is slow

We have a problem here… So, what can we do to avoid this pittfall of bad performance? Follow these rules, and you’ll be on the right track…

Speed is a feature, treat it as a part of UX

Speed is directly responsible for conversion rates. It is your competitive advantage. A feature of your store… And it is equally or even more important than your fancy newsletter subscribe form or one-step checkout. If your website is slow, no one will use it. Period.

Treat performance as a part of UX design, plan it in advance and make sure you secure a budget for it.

Speed is the most important feature. If your application is slow, people won’t use it. I see this more with mainstream users than I do with power users. I think that power users sometimes have a bit of sympathetic eye to the challenges of building really fast web apps, and maybe they’re willing to live with it, but when I look at my wife and kids, they’re my mainstream view of the world. If something is slow, they’re just gone.

Fred Wilson: “The 10 Golden Principles of Successful Web Apps”

Mobile first, content out workflow

Always start with the content. Structure it to create focus and hierarchy. Putting your content on a small screen, where your screen real estate is limited, will make you think twice what is most important and what deserves to be on the screen. It will give you an opportunity to reevaluate what content or functionality is necessary, and not just for the mobile version.
Performance will also benefit from mobile first approach. Think of it as building a house. You start with the foundation, and build on top of it.

Start with a baseline mobile experience and enhance with a media query cascade that starts from small screens and adapts design as screens get bigger.

Set a performance budget

We are not talking about money here. Performance budget is a clever idea introduced by Tim Kadlec.

A performance budget is just what it sounds like: you set a “budget” on your page and do not allow the page to exceed that.

Your “budget” may be number of requests, page weight, loading time…  It is important to declare your goals early in the planning phase. If you set a goal to have a homepage under 500Kb and then desing a content slider with 5 full screen images, it is going to be impossible to achieve your goals.

Once you achieved your goals, you should stick to them. Next time you want to add something to the page, you need to make sure it doesn’t exceed the budget. If it is does, there are three options:

• Optimize an existing feature or asset on the page.
• Remove an existing feature or asset from the page.
• Don’t add the new feature or asset.

Optimize!

This is the part you need to be religious about it. Squeeze the last Kb out of your website. The main goals of optimization are:

• Reduce http requests
• Reduce file sizes
• Reduce latency
• Optimize critical rendering path

There are numerous techniques to achive this goals, and we will cover them in our future blog posts. Stay tuned!