Understanding performance with Core Web Vitals

Key Takeaways

[Music] and as 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 vinyls 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've found that websites which optimize these measures are consistently more successful to tell us more i'd like to introduce hussein 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 that's what the web vitals initiative is all about giving 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 of vitals a set of three metrics that covers loading performance input responsiveness during load and the visual stability of content will begin to be surfaced across tools provided by google to help developers build 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 in 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 vitals 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 experience as possible without sacrificing developer experience we're calling this initiative aurora and thanks to the work we've done to land strong defaults and optimized performance in less than a year we've seen 91 percent and 111 increases in the number of mobile and xgs and angular origins respectively that have good core revital 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 next we know that optimizing for core vitals can 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'll 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 wouldn't 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 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 capture state of a page and it's not just a 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 make 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 it actively so stay tuned for more features all of our tooling has been instrumental to how the core volumetrics 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 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 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 life cycle and better handle complex user inputs that trigger more than one event the second metric measures scrolling and animation's smoothness i'm sure if all had experiences or 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 of vitalmetrics 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 thanks usain i'm really excited to see how core web vitals evolves in the coming years [Music] you