Let’s talk about web performance
When thinking about “performance,” remember that someone once said: “Web performance means making websites fast, even making slow processes seem fast.” In the tech industry, we often must discuss how poor performance impacts business results or influences users to leave.
Websites that load quickly and respond well usually engage users more and increase conversion rates. We’ve known this for a while, but we must consider it a crucial sign of success. So, it’s time to discuss what we need to know to build better web experiences faster.
Let’s start with a few questions that you may hear or not but 100% sure you feel it more than once: Does the site load quickly? The site lets users interact when needed and give feedback if it takes time (like loading). Do scrolling animations feel smooth? You may hear about these infrequently, but it’s still there. Is the layout consistent when loading the website starts and then when that load ends?
As you can see, web performance is all about user experience and how they perceive and “feel” our business value offered. In other words, Web performance is about user experience and business (both together, never isolated).
How to make millions saving milliseconds
“Time is money.” Let’s say that money for us comes from “conversion rates,” like all websites to buy something. Users want a smooth and fast buying experience without obstacles or extra confirmations. Web Performance is also about interactions and how frictionless they are.
The Deloitte report of 2020 found that improving mobile site speed by just 0.1s led to better conversions and customer engagement. Some of those are:
- Mobile site speed improvements had a direct correlation to enhanced funnel progression. And today is even more when mCommerce has a doubled impact on sales.
- Retail conversions increased by 8.4%, and average order value increased by 9.2%
- Travel conversions increased by 10.1%, and average order value increased by 1.9%
- Luxury brand page views per session increased by 8.6%
- The lead generation information about page bounce rate improved by 8.3%
Suppose you have a mobile retail website, and your average order value is USD 100; let’s do some math to help you understand. With just 0.1s of improvement, the order value can increase to USD 109.2, so with just an average of 10 daily orders, you can rise to USD 33,580 in your yearly revenue. These numbers are just a simulation; if you look at your numbers, you can understand them better and appreciate the web performance improvements now from a business perspective.
How do we measure web performance today?
A few years ago, when discussing web performance, we usually would say, “The fastest websites make better websites.” But “fast” means different things when you understand the metrics that say, “This website is fast.”
Usually, “Load Speed” was the standard metric used to talk about web performance. Still, in the “load” moment, we have different micro-moments that users are living in when they visit our web apps. We didn’t have ways to measure it, especially from the “feeling” perspective or, as we mentioned earlier, the user perceptions.
Since 2018, the “Web Performance Working Group” at W3C has been collaborating with major industry players like AKAMAI, Airbnb, Apple, Adobe, Amazon, Cloudflare, Alibaba, Microsoft, Meta, The New York Times, Shopify, Salesforce, Wikimedia Foundation, and Google (through the Google Chrome team). They are working together to create a set of APIs and web performance metrics for measuring application performance on a web page.
That was a massive thing for all because before this working group, we needed standard ways to measure web performance, and without that, having an analysis like the last one explaining conversion rate increase by web performance improvements wasn’t possible today.
In 2021, Google added Core Web Vitals to their algorithm for ranking search results. These metrics are now part of the “Page Experience signals” and come from every web where Google’s bot looks.
So, let’s talk about Core Web Vitals. These metrics identify user experience issues by generating a metric for three primary areas of user experience:
- Page loading performance (measured by LCP, Largest Contentful Paint)
- Ease of interaction (measured by FID, First Input Delay) or responsiveness (measured by INP, Interaction to Next Paint since 2024)
- Visual stability of a page from the user’s perspective (measured by CLS, Cumulative Layout Shift)
Each of these metrics provides its perspective on different elements that impact how users interact and engage with a website. While engineers must think about “user experience” from a holistic perspective, these independent metrics help break down different variables into smaller pieces to identify and fix technical and experience issues across our website.
It’s important to remember that these metrics only tell part of the story about the user experience on a website. However, engineers, business owners, and designers can use each metric to troubleshoot web performance systematically.
Using the Lighthouse tool as a “lighthouse” 🔦
The Lighthouse is a website audit tool that helps engineers improve user experience. It provides opportunities and diagnostics. With the Lighthouse tool, you can:
- Deliver all standard web performance metrics (including Core Web Vitals).
- Allows to simulate different scenarios (3G and 4G networks, mobile devices, among others).
- You can include it in your CI/CD pipelines and use it with other tools like bundlesize. Bundlesize helps limit the scope of your final application.
- Measure more than just web performance, including A11Y, SEO, and other best practices for your website.
- Generates Lab data, which means controlled data to analyze a sample of how your website performs.
We can start having Core Web Vitals metrics from our website by implementing the Lighthouse tool to measure web performance. Now, let’s make a plan to improve both now and in the future. Remember Addy Osmani’s quote: “Small changes can lead to big gains.”
One strategy to create a plan is to use Performance Budgets. Performance budgets are limits that prevent regressions and can be settled as thresholds for measurements over time. Defining a budget also helps start your organization’s web performance conversation.
I have my metrics, but how can I define the thresholds to have my Performance Budgets? One way to make it easier is to follow the 20% rule for how people perceive time. Remember, what matters is how users perceive our website. Users can tolerate longer wait times, but perception still matters.
To start our improvement plan, we will measure the current state. Then, we will work on improvements to reach the initial budget one step at a time. And after that, we will focus on the following goal: being faster than our competition.
How to improve my web performance
After we mark the path through the current state of the Core Web Vitals, we start deciding what to improve and how to implement those improvements. Some potential implementation strategies can be:
- To improve LCP, FID, and CLS, find solutions for their common issues in each part of the application.
- Remember the DRY principle in our approach to avoid repeating solutions and promote reusability.
- Remember to use caching strategies by layers, not only in the web channel (applies for microservices, APIs, etc).
- Analyze what flows can change to be asynchronous to improve time perception. For example, do you need to wait for the payment confirmation to show the successful order creation to the user? We have so much to learn from big companies like Amazon about asynchronous flows.
Improving performance is a journey
Thinking about performance improvements as a journey is the right way. To understand web performance, our teams need a mindset change and maturity progress. It’s a one-time task and part of our software engineering lifecycle.
To live this journey, define thresholds for files, file types, and our Core Web Vitals. Measure them each time we release a new website version and ensure good web performance for new features. As a mature organization, we can automatically roll back the release if the metrics don’t meet our performance goals during the release process. These decisions are crucial because our business could lose millions of dollars by sending a new feature to production that degrades our web performance. It’s always better to take the time to fix the problem than lose that millions.
Wrap up
The purpose of web performance is to improve our user experience and, with that, improve our business goals, always together. Nowadays, we know more than ever the impact of bad web performance and the positive consequences of improving it. The main idea to improve is to set goals to improve web performance without harming functionality or user experience.
Final words and next steps
Before reaching your goals, it is essential to complete the initial steps. Skipping them can cause chaos and confusion, making it difficult to know where to start. Remember: Improving performance is a journey.
I hope you enjoy this introduction to web performance. In the following articles about performance, we will learn different ways to improve it, from coding to marketing, because everything you do matters.
🎯
