The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Why Performance Matters

In our shared pursuit to push the web to do more, we're running into a common problem: performance. Sites have more features than ever before. So much so, that many sites now struggle to achieve a high level of performance across a variety of network conditions and devices.

Performance issues vary. At best, they create small delays that are only briefly annoying to your users. At worst, they make your site completely inaccessible, unresponsive to user input, or both.

Performance is about retaining users

We want users to interact meaningfully with what we build. If it's a blog, we want people to read posts. If it's an online store, we want them to buy stuff. If it's a social network, we want them to interact with each other.

Performance plays a major role in the success of any online venture. Here are some case studies that show how high-performing sites engage and retain users better than low-performing ones:

Here are a couple case studies where low performance had a negative impact on business goals:

In the same DoubleClick by Google study cited above, it was found that sites loading within 5 seconds had 70% longer sessions, 35% lower bounce rates, and 25% higher ad viewability than sites taking nearly four times longer at 19 seconds. To get a rough idea of how your site's performance compares with your competitors, check out the Speed Scorecard tool.

A screenshot of the Speed Scorecard
tool, comparing performance across four popular news outlets.
Figure 1. Speed Scorecard comparing the performance of four competing sites using Chrome UX Report data from 4G network users in the United States.

Performance is about improving conversions

Retaining users is crucial to improving conversions. Slow sites have a negative impact on revenue, and the opposite is also true. Here are some examples of how performance has played a role in making businesses more (or less) profitable:

If you run a business on the web, performance is crucial. If your site's user experience is fast and responsive to user input, it can only serve you well. To see how performance could potentially affect your revenue, check out the Impact Calculator tool.

A screenshot of the Impact
Calculator, estimating how much revenue a site could stand to gain if
performance improvements are made.
Figure 2. The Impact Calculator estimates how much revenue you stand to gain by improving site performance.

Performance is about the user experience

When you navigate to a URL, you do so from any number of potential starting points. Depending on a number of conditions, such as connection quality and the device you're using, your experience could be quite different from another user's.

A comparison of two filmstrip reels
of a page loading. The first shows a page loading on a slow connection, while
the second shows the same page loading on a fast connection.
Figure 3. A comparison of page load on a very slow connection (top) versus a faster connection (bottom).

As a site begins to load, there's a period of time where users wait for content to appear. Until this happens, there's no user experience to speak of. This lack of an experience is fleeting on fast connections. On slower connections, however, users are forced to wait. Users may experience more problems as page resources slowly trickle in.

Performance is a foundational aspect of good user experiences. When sites ship a lot of code, browsers must use megabytes of the user's data plan in order to download the code. Mobile devices have limited CPU power and memory. They often get overwhelmed with what we might consider a small amount of unoptimized code. This creates poor performance which leads to unresponsiveness. Knowing what we know about human behavior, users will only tolerate low performing applications for so long before abandoning them. If you want to know more about how to assess your site's performance and find opportunities for improvement, check out How to Think About Speed Tools.

Page performance overview as seen in
Lighthouse.
Figure 4. Page performance overview as seen in Lighthouse.

Performance is about people

Poorly performing sites and applications can also pose real costs for the people who use them.

As mobile users continue to make up a larger portion of internet users worldwide, it's important to bear in mind that many of these users access the web through mobile LTE, 4G, 3G and even 2G networks. As Ben Schwarz of Calibre points out in this study of real world performance, the cost of prepaid data plans is decreasing, which in turn is making access to the internet more affordable in places where it once wasn't. Mobile devices and internet access are no longer luxuries. They are common tools necessary to navigate and function in an increasingly interconnected world.

Total page size has been steadily increasing since at least 2011, and the trend appears to be continuing. As the typical page sends more data, users must replenish their metered data plans more often, which costs them money.

In addition to saving your users money, fast and lightweight user experiences can also prove crucial for users in crisis. Public resources such as hospitals, clinics, and crisis centers have online resources that give users important and specific information that they need during a crisis. While design is pivotal in presenting important information efficiently in stressful moments, the importance of delivering this information fast can't be understated. It's part of our job.

Where to go from here

While the lists below may seem daunting, understand you don't need to do all of these things to improve the performance of your site. They are just starting points, so don't feel overwhelmed! Anything you can do to improve performance will be helpful to your users.

Mind what resources you send

An effective method of building high performance applications is to audit what resources you send to users. While the Network panel in Chrome DevTools does a fantastic job of summarizing all the resources used on a given page, it can be daunting to know where to start if you haven't considered performance until now. Here are a few suggestions:

  • If you use Bootstrap or Foundation to build your UI, ask yourself if they're necessary. Such abstractions add heaps of CSS the browser must download, parse, and apply to a page, all before your site-specific CSS enters the picture. Flexbox and Grid are superb at creating both simple and complex layouts with relatively little code. Because CSS is a render blocking resource, the overhead of a CSS framework can delay rendering significantly. You can speed up your rendering by removing unnecessary overhead whenever possible.
  • JavaScript libraries are convenient, but not always necessary. Take jQuery for example: Element selection has been greatly simplified thanks to methods like querySelector and querySelectorAll. Event binding is easy with addEventListener. classList, setAttribute, and getAttribute offer easy ways of working with classes and element attributes. If you must use a library, research for leaner alternatives. For example, Zepto is a smaller jQuery alternative, and Preact is a much smaller alternative to React.
  • Not all websites need to be single page applications (SPAs), as they often make extensive use of JavaScript. JavaScript is the most expensive resource we serve on the web byte for byte, as it must not only be downloaded, but parsed, compiled and executed as well. For example, news and blog sites with optimized front end architecture can perform well as traditional multipage experiences. Particularly if HTTP caching is configured properly, and optionally, if a service worker is used.

Mind how you send resources

Efficient delivery is vital to building fast user experiences.

Mind how much data you send

Here are some suggestions for limiting how much data you send:

For a more holistic guide on improving performance, check out our writeup on the RAIL performance model, which focuses on improving both load time and application responsiveness. Our PRPL pattern guide is also an excellent resource for improving the performance of modern single page applications.

If you're excited to learn more about performance and how to make your site faster, browse through our performance documentation for guides on a variety of topics. We're constantly adding new guides and updating existing ones, so keep coming back!

Special thanks to Addy Osmani, Jeff Posnick, Matt Gaunt, Philip Walton, Vinamrata Singal, Daniel An, and Pete LePage for their extensive feedback in improving and launching this resource!

Feedback

Was this page helpful?