In our collective pursuit to push the web to do more, we're running into a common problem: Performance. Sites and apps are richer in functionality than ever before. As a consequence, they've become more demanding of network and device resources. So much so, that we now struggle with achieving a high level of performance across a variety of network conditions and devices.
Performance issues are variable. At best, slow sites and applications incur trivial delays that impede users for only briefly annoying moments. At their worst, they're completely inaccessible, unresponsive to user input, or both.
Performance is about retaining users
We want users to interact meaningfully with what we build for the web. If it's a blog, we want people to read posts. If it's an online store, we want to turn prospective shoppers into buyers. If it's a social networking web app, we want visitors to write posts, upload photos, and interact with one other.
Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Here are some case studies of how performance has affected engagement and conversions for several websites.
- Pinterest rebuilt their pages for performance realizing a 40% reduction in perceived wait times, thus increasing both search engine traffic and sign-ups by 15%.
- By cutting average page load time by 850 milliseconds, COOK found they were able to increase conversions by 7%, decrease bounce rates by 7%, and increase pages per session by 10%.
If high performance is an asset, then poor performance is a liability. Here are a couple case studies where poor performance had a negative impact on business goals:
- The BBC found they lost an additional 10% of users for every additional second their site took to load.
- DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.
Because business is highly competitive, we're always cognizant of how our competitors are doing. 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 the competition, check out the Speed Scorecard tool.
Performance is about improving conversions
Retaining users is crucial to improving conversions. If you run an online business, conversions are the goal and performance is critical. 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:
- For Mobify, Every 100ms decrease in homepage load speed worked out to a 1.11% increase in session-based conversion, yielding an average annual revenue increase of nearly $380,000. Additionally, a 100ms decrease in checkout page load speed amounted to a 1.55% increase in session-based conversion, which in turn yielded an average annual revenue increase of nearly $530,000.
- DoubleClick found publishers whose sites loaded within five seconds earned up to twice as much ad revenue than sites loading within 19 seconds.
- When AutoAnything reduced page load time by half, they saw a boost of 12-13% in sales.
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 our Impact Calculator tool.
Performance is about the user experience
When you navigate to a URL, you do so from any number of potential starting points, possibly discarding one experience for another. Depending on a number of conditions (e.g., connection quality, server and front end architecture), your experience could be quite different from another user's.
Consequently, it could be argued that performance is a foundational aspect of good user experiences. When sites ship tons of code, poor performance persists as browsers chew through megabytes of it on slow networks. Devices with limited processing power and memory can have trouble coping with what we might consider to be a modest amount of unoptimized code. As poor performance persists, application responsiveness and availability diminishes. Knowing what we know about human behavior, these poorly performing applications will only be tolerated for so long before users abandon them. If you want to know more about how to assess your site's performance and find opportunities for improvement, check out our guide How to Think About Speed Tools.
Performance is about people
While improving performance is vital to the financial success and well-being of businesses, it's important not to overlook the potential challenges people face as they navigate the web. Improving performance should not be seen solely as a means of advancing ourselves, but also as ethically responsible behavior. Poorly performing sites and applications can pose real consequences and costs for the people who use them.
As mobile users continue to make up a large 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. Simply put, mobile devices and internet access are no longer luxuries for well-to-do consumers. 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 amount of data the typical page delivers increases, metered data plans become less economical. When these plans run out they must be replenished, which costs money.
While fast and lightweight user experiences show economic consideration, they can also prove crucial for users in crisis. Public resources such as hospitals, clinics, and crisis centers have online resources which convey important and specific information a person needs in the midst of a crisis. While design is pivotal in presenting important information efficiently in stressful moments, the importance of delivering this information expediently can't be understated. It's part of our job.
Where to go from here
You know now why performance matters, but you might be wondering "what next?" Next, we'll cover three pragmatic performance considerations, complete with suggestions for addressing each. While these lists may seem daunting, understand you don't need to do all of these things to improve the performance of your site. They are merely potential 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's developer tools 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 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 should seek to expedite rendering by eliminating unnecessary overhead, and instead rely on tools baked into the browser whenever possible.
example: Element selection has been greatly simplified thanks to methods like
querySelectorAll. Event binding is easy with
getAttributeoffer 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.
Mind how you send resources
When you know what resources you need to send for your app to be as beautiful and functional as you want it to be, think next about how you send them. As is the case with forethought and prevention, delivery is vital to building fast user experiences.
- Migrate to HTTP/2. HTTP/2 addresses many performance problems inherent in HTTP/1.1, such as concurrent request limits and the lack of header compression.
- Expedite the delivery of resources using resource
rel=preloadis one such resource hint that allows early fetches of critical resources before the browser would otherwise discover them. This can have a pronounced positive effect on page rendering and lowering Time to Interactive when used judiciously.
rel=preconnectis another resource hint that can mask the latency of opening new connections for resources hosted on third party domains.
Mind how much data you send
With some ideas of what resources are appropriate to send and how you should send them, let's cover a few suggestions for limiting how much data you send:
- Configure your server to compress resources. Compression drastically reduces the amount of data you send to users, especially where text assets are concerned. GZIP is a venerable format in this space, but Brotli compression can go further. Understand, however, that compression is not a catch-all for performance woes: Some file formats which are implicitly compressed (e.g., JPEG, PNG, GIF, WOFF, et cetera) don't respond to compression because they're already compressed.
- Optimize images to ensure your site sends as little image data as possible. Since images make up a large portion of the average per-page payload on the web, image optimization represents a uniquely large opportunity to boost performance.
- If you have time, consider serving alternative image formats. WebP enjoys reasonably broad browser support, and can undercut established formats in file size while retaining similar visual quality. JPEG XR is another alternative format supported in IE and Edge offering similar savings.
- Deliver images
The huge diversity of devices and their screens presents a tremendous
opportunity to improve performance by sending images that are the best fit for
the screens that view them. In the simplest use cases, you can add an
srcsetattribute to an
<img>element to specify an array of images the browser can choose from. On the more complex side of things, you can use
<picture>to help the browser choose the most optimal format (e.g., WebP over JPEG or PNG), or serve altogether different treatments of images for different screen sizes.
- Client hints can be used
to tailor resource delivery based on current network conditions and device
Viewport-Widthheaders can help you deliver the best images for a device using server-side code and deliver less markup. The
Save-Dataheader can help you deliver lighter application experiences for users who are specifically asking you to do so.
NetworkInformationAPI exposes information about the user's network connection. This information can be used to modify application experiences for users on slower networks.
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!