The "why" of web performance

Web performance is all about making web sites fast, including making slow processes seem fast — but why is that important? This article provides an introduction into why web performance is important to your users and, some would say "more importantly", to your business goals.

Prerequisites: Basic computer literacy, basic software installed, and basic knowledge of client-side web technologies.
Objective: To gain basic familiarity of why web performance is important for good user experience.

Web performance refers to how quickly a URL's content loads and renders in a web browser and how well it responds to user interaction. Bad performing sites are slow to load and slow to react. Bad performing sites can lead to site abandonment or make your content inaccessible altogether. The goal with performance is for users to not notice performance. While site performance performance is subjective and relative, the loading and rendering can be objectively measured. While good performance may not be obvious to the user, the lack of performance is. That's why we care.

Why care about performance?

Web performance and associated best practices are vital for as many of your users as possible to have a good experience. In a sense, web performance can be considered a subset of web accessibility — considering what device a user is using to access your site and what connection speed thay have is just as vital as considering if they have any disabilities, or anything else that is more traditionally associated with accessibility.

As an example, consider the loading experience of CNN.com, which at the time of writing had over 400 HTTP requests with a file size of over 22.6MB.

  • Imaging loading this on a desktop computer connected to a fibre optic network; this would seem pretty fast and the file size at least would be pretty much irrelevant.
  • Imagine loading that same site using tethered mobile data on a 9 year-old iPad while commuting home on public transportation; that fast experience would instead be slow to load, and probably verging on unusable depending on cell coverage. You might give up before it finishes loading.
  • Imagine loading that site on a $35 Huawei device in a rural area in India with limited to no coverage. All of a sudden that fast experience would instead be really slow to load if it loads at all with blocking scripts possibly timing out and the impact on the CPU being such that the browser crashes if it does load.

A 22.6 MB site could take up to 83 seconds to load on a 3G network, with DOMContentLoaded (meaning the site's base HTML structure) at 31.86 seconds.

And it isn't just the time taken to download that is a major problem — a lot of countries still have internet connections that are charged per megabyte. This 22.6 MB CNN.com experience above would cost around 11% of the average Indian's daily wage to download. If this site was loaded on a mobile device in Mauritania, it would cost two full days of an average user's salary.  And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (There is a site where you can see how much your site costs to download.)

Reducing the dowload and render time of a site improves conversion rates and user retention.

Improve conversion rates

A conversion rate is the rate at which users perform the measured or desired action. This might be making a purchase, reading an article, signing up for a newsletter, or other. The action being measured as the conversion rate depends on business goals.

Performance impacts conversion rates; improving web performance improves conversion rates. Web users expect a site to load in two seconds or less, and even less time on mobile (where it generally takes longer) and begin abandoning site at 3 seconds. The speed at which a site loads is one factor; if the site is slow to react to user interaction, or appears janky, can cause users to lose trust in a site and even abandon the site altogether.

Here's some real-world examples of performance improvements:

To build websites and applications people want to use, which attract and retain users, you need to create an accessible site that provides a good user experience. Building websites requires HTML, CSS, and JavaScript, often including binary file types such as images and video. The decisions you make and the tools you choose as you build your site can greatly impact the performance of your application.

Good performance is an asset. Bad performance is a liability. Site speed directly affects bounce rates, conversion rates, revenue, user satisfaction, and search engine ranking.  Performant sites have been shown to increase visitor retention and user satisfaction. Slow content has been shown to lead to user abandonment, and many of them won’t come back. Reducing the amount of data that is sent between the client and the server lowers the costs to all parties. Reducing HTML/CSS/JavaScript and media file sizes reduces both the time to load and a site's power consumption (see performance budgets).

Tracking performance is important. Multiple factors, including network speed and device capabilities impact performance. There is no single performance metrics; and differing business objectives may mean different metrics are more relavant to business goals. How the performance of your site is perceivedd is user experience!

Conclusion

Now that you understand web performance is important for accessibility and for less altruistic business metrics; we'll take a sky high view of the web performance topic so you to get an idea of what it is all about, and what you need to know to improve your site's performance.

In this module