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 a great deal so, that many sites now struggle to attain a high level of performance across a variety of network conditions and devices.
Performance problems vary. At best, they create small delays that are only briefly frustrating to your users. At worst, they create 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 most important function in the success of any online venture. Here are a few case studies that demonstrate how high-performing sites connect and keep users better than low-performing ones:
- Pinterest improved search engine traffic and sign-ups by 15% when they reduced seeming wait times by 40%.
- COOK improved conversions by 7%, decreased rebound rates by 7%, and enhanced pages per session by 10% when the compact average page load time by 850 milliseconds.
Here are combine case studies where low performance had a negative collision on business goals:
- Every additional second their site took to load 10% of users lost BBC found.
- If pages took longer than 3 seconds to load, Double click by Google founds that 53% of mobile site visits were discarded
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.
Performance is about improving conversions
- Retaining users is critical to improving conversions. Slow sites have a harmful impact on revenue, and the conflicting is also true. Here are some examples of how performance has played a position in making businesses more (or less) profitable:
- For Mobify, every 100ms reduce in homepage load speed worked out to a 1.11% add to in session-based conversion, yielding an average annual revenue increase of nearly $380,000. as well, 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.
- Publishers found that whose sites loaded with in five seconds earned up to twice as much revenue than sites loadning with in 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 the 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. 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.
Figure 3. A comparison of page load on a very slow connection (top) versus a faster connection (bottom).
As a site begin to load, there’s a period of time where users hang around for content to appear. Until this happens, there’s no user experience to converse 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 an initial characteristic 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 incomplete CPU power and memory. They frequently get snowed under with what we might consider a small amount of unoptimized code. This creates a poor performance which leads to indifference. Knowing what we know about human activities, users will only abide by 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.
Performance is about people
Poorly performing sites and applications can also pretense real costs for the people who use them.
As mobile users continue to make up a better segment of internet users universal, it’s significant to bear in mind that a lot of-of these users right to use 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 falling, which in turn is assembly access to the internet more reasonable in places where it once wasn’t. movable devices and internet access are no longer luxury. They are common tools necessary to navigate and function in an increasingly interconnected world.
Total page size has been progressively increasing since at least 2011, and the tendency appears to be continuing. As the typical page sends more data, users must refill their metered data plans more often, which costs them money.
In addition up to saving your users money, fast and lightweight user experiences can also prove crucial for users in crisis. community resources such as hospitals, clinics, and crisis centers have online resources that give users significant and exact in order that they require during a crisis. While the design is essential 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 list under may seem intimidating, know you don’t require to do all of this equipment to get better the performance of your site. They are just preliminary points, so don’t feel besieged! Anything you can do to improve performance will be helpful to your users.
Mind what resources you send
An effectual technique of building high-performance applications is to review what resources you send to users. While the Network panel in Chrome DevTools does an unbelievable job of abbreviation 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 establishment to build your UI, ask yourself if they’re needed. Such abstractions insert heaps of CSS the browser must download, parse, and be relevant to a page, all before your site-specific CSS enters the picture. Flexbox and Grid are superb at creating together simple and complex layouts with comparatively little code. Because CSS is a render blocking resource, the overhead of a CSS framework can delay rendering significantly. You can speed up your representation by removing unnecessary overhead whenever possible.
JavaScript libraries are suitable, but not always required. Take jQuery for example Element assortment has been greatly basic 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 cleaner alternatives. For example, Zepto is a smaller jQuery alternative, and Preact is a much smaller alternative to React.
Not all websites require to be particular 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
well-organized delivery is vital to building fast user experiences.
- Migrate to HTTP/2. HTTP/2 addresses a lot of performance troubles inherent in HTTP/1.1, such as simultaneous demand limits and the lack of header compression.
- Download resources earlier using resource hints. rel=preload is one such resource hint that allows near the beginning fetches of critical resources before the browser would otherwise find out them. This can have a distinctly positive effect on page rendering and lowering Time to Interactive when used judiciously. rel=preconnect is another resource hint that can mask the latency of opening new connections for resources hosted on third party domains.
- Modern sites ship a lot of JavaScript and CSS on average. It was similar to bundle styles and scripts into large bundles in HTTP/1 environment. This was done because a huge quantity of requests was detrimental to performance. This is no longer the case now that HTTP/2 is on the scene, as multiple, simultaneous requests are cheaper. Consider using code splitting in web pack to limit the number of scripts downloaded to only what is needed by the current page or view. divide your CSS into smaller template or component-specific files, and only include those resources where they’re likely to be used.
Mind how much data you send
Here are some suggestions for limiting how much data you send:
- Minify text assets. Minification is the taking away of pointless whitespace, comments and other content in text-based resources. It considerably reduces the quantity of data you throw to users without impacting functionality. Use uglification in JavaScript to get more savings through shortening variable and method names. Since SVG is a text-based image format, it can be optimized with SVGO.
- arrange your server to compress resources. Compression drastically reduces the amount of data you send to users, especially text assets. GZIP is a popular option, 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 make sure your site sends as little image data as possible. Since images make up a huge portion of the average per-page payload on the web, image optimization represents a uniquely large opportunity to boost performance.
- If you have time, reflect on serving alternative image formats. WebP enjoys reasonably broad browser support and uses less data than JPEG and PNG while keeping visual quality high. JPEG XR is another alternative format supported in IE and Edge offering similar savings.
- Carry images responsively. The huge variety of devices and their screens presents a wonderful chance to improve performance by sending images that are the best fit for the screens that view them. In the simplest use cases, you can put in a srcset attribute to an <img> element to identify 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.
- Use video in its place of animated GIFs. Animated GIFs are huge. Videos of alike quality are far smaller, often by 80% or so. If your site makes heavy use of animated GIFs, this is probably the most impactful thing you can do to improve loading performance.
- Client hints can tailor resource delivery based on current network conditions and device characteristics. The DPR, Width and Viewport-Width headers can help you deliver the best images for a device using server-side code and deliver less markup. The Save-Data header can help you deliver lighter application experiences for users who are specifically asking you to do so.
- The NetworkInformation API 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!
