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:
Tokopedia reduced render time from 14s to 2s for 3G connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user.
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!
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
- The "why" of web performance
- What is web performance?
- How do users perceive performance?
- Measuring performance
- Multimedia: images
- Multimedia: video
- HTML performance features
- CSS performance features
- Fonts and performance
- Mobile performance
- Focusing on performance