Optimize for Core Web Vitals 2022

Optimize for Core Web Vitals 2022

That’s what the Web Vitals initiative is all about– giving the developers and site owners the metrics, tools, and guidance they need to deliver a great experience for every user. Last year, we announced that the Core Web Vitals, a set of three metrics that covers loading performance, input responsiveness during load, and the visual stability of content, will begin to be serviced across tools provided by Google to help developers build a great user experience.

So what’s happened in the past year? Thanks to developers around the world working hard in improving their sites, the ecosystem as a whole is steadily improving. 20% more page visits on Chrome now fully meet the recommended Core Vital thresholds compared to a year ago. And the total percentage of page visits in Chrome that meet these thresholds is now 60%, which is a big deal. Much of these advancements are a direct result of the work being done by developer communities, including the improvements that many content management systems, website builders, and e-commerce platforms have made.

This past spring, we launched a new Core Vital Technology Report to show how sites built on these platforms perform. You can see that many are sharply up and to the right, with some showing more than 200% improvement year on year, and leaders like Duda and Jimdo surpassing 50% of origins with good Core Vital scores.

We’ve also worked with some popular JavaScript frameworks, including Next.js and Angular, to deliver the best user experiences possible without sacrificing developer experience. We’re calling this initiative Aurora.

And thanks to the work we’ve done to land strong defaults and optimize performance, in less than a year, we’ve seen 91% and 111% increases in the number of mobile Next.js and Angular origins, respectively, that have good Core Web Vital scores.

That’s incredible progress in a short time span, and we can’t wait to see similar growth in other framework ecosystems in the near future, like Nuxt. We know that optimizing for Core Vitals could still be challenging for the everyday developer, so we’ve got a couple of new updates to our performance tooling that make the process a lot easier. First, we started with a complete revamp of the PageSpeed Insights UI.

PageSpeed Insights is a great tool because it will show you real user data from the Chrome UX report and will also run a Lighthouse report and show suggestions and opportunities to improve based on a synthetic load of the page in a lab environment. The new UI makes it much clearer which data is field data coming from real user experiences and which data is lab data coming from the Lighthouse report.

If you want to check a Core Vital score, you should always look at real user field data. For anyone who wants specific actionable suggestions for how to improve performance, the Lighthouse report is a great place to start. Next up, we’ve worked on addressing a blind spot that our tooling hasn’t been able to capture yet– user flows.

Some of our tools have been limited by only assessing your pages during load. They want to scroll down the page, click around, or do anything else that users typically do as they browse the web. For example, consider a typical checkout flow where someone needs to perform a number of different actions to order some coffee, like navigating through several pages, adding items to a cart, and confirming their payment details. In the past, we could only measure the performance of each page separately. But think about how much more we could learn about the overall user experience by measuring every action and navigation in between.

We’re glad to announce that we’ve rolled out support for user flows in Lighthouse, which will only make it easier to diagnose performance issues within a user journey and get suggestions for how to improve.

Amazon Products

Understanding performance with Core Web Vitals

Lighthouse will be able to distinguish and provide separate reports for page navigations, any user interactions that occur during a given time span, and snapshots to represent a captured state of a page. And it’s not just Lighthouse where we’re introducing support to analyzing user flows. We launched a completely new recorder panel in DevTools that will also let you record an entire user journey on your website and easily view all the actions taken by the user directly in the panel, such as navigations, key presses, link clicks, and so on. You can download the user flow and export it as a puppeteer script for testing, replay it, and even click and easily measure the performance trace in the Performance panel.

Not only will this made the process of understanding and debugging interactions easier, it will also help you better identify performance opportunities throughout the user journey.

The Recorder panel is currently in the preview stage, and the team is working on an activity, so stay tuned for more features. All of our tooling has been instrumental to how the Core Vital metrics have helped developers succeed in improving the user experiences of millions of sites around the world. And all these brand-new changes will go a long way to help you understand precisely where and how you can keep getting better.

Now, what’s next for the Core Web Vital metrics themselves?

Well, there’s more to great user experiences than just three areas, and we’re working hard to fill the gaps that the current set of metrics don’t address just yet. We’re excited to introduce two new metrics we’ve been experimenting with that we think will improve how user experience is measured on the web, and we’d love to get your feedback on them. The first is a metric to measure overall input responsiveness. Today, we measure the responsiveness of the first user input, but ideally, we want to extend that to capture every user input from the moment they land in your site to the moment they leave.

We’ve also made improvements to the APIs that capture event timing so we can better monitor the full event lifecycle and better handle complex user inputs that trigger more than one event.

The second metric measures scrolling animation smoothness. I’m sure we’ve all had experiences where a page will stutter or freeze during scrolling or animations. We want to better understand how often this happens and how severe it is. We’re still working on both of these metrics, and we’d love to hear your feedback. These articles explain our current thinking in detail, so give them a read and think about how using them can help improve the user experience of your site.

Feel free to send us an email if you have any thoughts or suggestions. We’re excited about all the advancements that have been made to help developers succeed in building fast, delightful experiences for their users in the metrics themselves, from the community, and directly in many tools and platforms. If you haven’t already, go to PageSpeed Insights to see how your site scores on the Core Web Vital metrics. We also have a number of other great tools that you can also use to continuously monitor and optimize your site’s performance, so be sure to check them out to see which one works best for you. Now I’ll pass it back to Ben before we share some exciting updates I’m really excited to see how Core Web Vitals evolves in the coming years

As found on YouTube