Core Web Vitals: How Quickly Users Can See The Site’s
The web gains new features and capabilities, another theme we hear is the importance of helping developers get the best results they can out of the modern web platform. Now, one way we’re doing this is the Web Vitals program, which is the result of years of research to understand what makes a web experience great. With Core Web Vitals, we closely examined many factors that lead to high-quality user experiences, and we identified three quantifiable measures that have a big impact. Now, these are one, how quickly a user can see a site’s most important content, two, how quickly a user can start to interact with that site, and three, the stability of the site’s layout over time. And we found that websites which optimize these measures are consistently more successful. To tell us more, I’d like to introduce Houssein.HOUSSEIN DJIRDEH: Thanks, Ben. So if you want to build a great website, you need to understand how it performs from a real user’s point of view.
Chrome’s Core Web Vitals Metrics Are 20% Better Than
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 are 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.
Core Vital Technology Report Shows Major Improvements for Sites Built on Popular Platforms
Many 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.
PageSpeed Insights: A New UI Makes It Easier to Optim
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 Next. 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 makes 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.
Measure user flows to optimize for Core Web Vitals
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.
Introducing user flows and recorder panel in Lighthouse to help diagnose performance
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. 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.
Core Web Vitals Preview: Tooling Updates to Help Developers Succeed
Not only will this make the process of understanding and debugging interactions easier, but 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 toolings have 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?
Introducing metrics to measure user experience
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 doesn’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 on 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.
UX design: What you need to know
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 about UX design.
Core Web Vitals: Maintaining an Optimal Web Presence
Like me are you really excited to see how Core Web Vitals evolves in the coming years?
