 Hello, I'm Gilberto. Hi, I'm Saurabh. And today we'll be talking about Core Web Vitals in the real world. This talk will explore how well the sites across the web are currently doing on the Core Web Vital metrics and what progress the web as a whole has made over the past few months. We'll also take a closer look at some specific improvements that a few companies have made and the challenges that come with optimizing for real users. Let's dive straight in and see how you can apply some of these learnings on your websites too. During the last Chrome Dev Summit, we shared with you that 60% of the page visits within Chrome were meeting the Core Web Vital threshold. Between then and now, in around less than 6 months time, we have seen that number going up further by 4%. What a healthy run rate! It takes a village to achieve something like this and we'd sincerely like to thank the developer community for their constant effort to make their websites faster, capable and truly usable. I want to take a moment and reiterate that you are not alone on this journey. Chrome is also making changes to help websites load faster. One example of recent change from Chrome in the last 6 months has been the rollout of Back Forward Cache which helps web pages load instantly when the browsers back and forward buttons are used. It significantly improves the browsing experience of users, especially for those with slower networks or devices. Back Forward Cache has been supported in both Firefox and Safari for many years and now it's available in Chrome since version 96. As web developers, it's critical to understand how to optimize your pages for Back Forward Cache across all browsers so that your users can really reap the benefits. And we're glad to see how some of you have already been exploring that successfully. Mindvalley, for example, has optimized their pages to qualify for Back Forward Cache, ensuring that the pages aren't reloaded after each click of the back and forward buttons. This makes those experiences both instant and seamless. When pages are loaded from the Back Forward Cache, they are far more likely to meet all the recommended core vital thresholds. So ensuring that your pages are eligible is a great way to improve your scores. We just discussed how more and more page visits within Chrome are meeting the core vital thresholds. But keep in mind that a large portion of web users spend most of their time on just a handful of very popular websites. So let's dig deeper and see what the picture looks like at the original level using the data from Chrome User Experience Report. By focusing on the origin, we can better understand how the web is doing as a whole, considering both big websites and small. Amongst the three metrics, cumulative layout shift metric saw the most significant uplift of 5.3%. This number goes up to nearly 25% when compared to the stats from a year before. This means the content stability has been constantly improving across the web. Overall, approximately 4.5% more websites now meet the core vital threshold at the original level. And that's a huge improvement within the span of just a half a year. In fact, if we compare it with the same time last year, this improvement is nearly 15%. What does that tell us? In a nutshell, this means that all kind of sites, whether big or small, have had success improving their core vital scores. This gives us the confidence that our combined efforts are moving in the right direction. Also, more and more companies are realizing that improving core vital is important not only for users to have better experiences, but also to have positive business impact as an outcome. As a result, we have seen many companies prioritizing it, even making them company-wide key performance indicators. But while the momentum is good, we still have a long way to go. Largest content for paint in particular has a lot of room for improvement. And we hope that if we can help more and more websites fix these issues, we'll see a major jump in the overall number of websites meeting all three thresholds. As a matter of fact, it's quite common for sites with global traffic to have really different, largest content for paint metric values across countries. Users may get different site experience depending on where they are located and what devices they are using. For this reason, it's critical for site owners to analyze their audience and better understand how these indicators change across multiple dimensions. Remember, network conditions and device capabilities are key influential factors of these metrics changing. Let's cover the journey that the online magazine for web developers and designers' machine magazine took on optimizing the largest content for paint metric globally. Optimizing for core web vitals requires knowing how to read metric values in the right context, depending where the data comes from, either from real users or lab synthetic testing tools. Data based on real users, as measured by the Search Console core web vitals report, suggested that most of their pages were not passing the largest content for paint metric threshold. They ran through most of the common reasons that caused high largest content for paint metric timing. The first bottleneck to check is the presence of pages with low server response time. So they focused on optimizing their content delivery network in order to deliver a low backend time on traffic from every country. Then the render blocking time resources had been reduced by inlining critical CSS and the third JavaScript. This is particularly positive to reduce the page blank screen time that act as minimum possible value of the largest content for paint metric timing. The third point is to optimize the resources load time, in particular images that could drive the health CP timing. Their images were appropriately resized and served using the AV format. But they also took care of the critical images network request start time that should trigger early. It's important here to avoid lazy loading in viewport images in order not to delay their request. Thanks to all of these efforts, their Lighthouse score improved from a sub 50 to a sub 70 range on mobile, topping to a maximum 88 Lighthouse performance score on their own page at that time. But despite all of these optimizations, the Chrome User Experience report was still reporting a vast amount of pages still not passing the LCP metric threshold. That's when they decided to implement real user monitoring, or RAM as we call it. A technique that measures and provides websites performance insights of real users. RAM helps detect poor user experiences and issues with deeper context, which usually goes unnoticed, such as measuring loading metrics by countries, browser versions or other dimensions. There are both free and commercial solutions available in the market that are applicable to any type of site. By using the WebVitals.js library and sending back the hits to Google Analytics, they being able to measure the same metrics but split by countries and device types. And thanks to the WebVitals report, it has been possible to quickly visualize the data in a dashboard. In India, largest contentful paint appeared to be 31% higher compared to other countries such as the US. This insight is an example of a region-specific issue that is possible to discover only by using full RAM solutions. The next step was to measure the core WebVitals metrics by other dimensions, such as the network connectivity speed, device capabilities and user-chosen settings. They found out that 66% of the India Chrome mobile population had data saver enabled. By checking the navigator connection save data in JavaScript, they could conditionally avoid loading additional fonts when users have data saver enabled. And for the future, they also implemented the prefers-reduced data media query to replicate the same logic in the RCSS. Results on lab data using web page test and emulating the data saver mode shows a 20% improvement in the RCP time. And after going live, this change led to a plus 80% increase in the number of pages passing the RCP threshold, from 20 all the way up to 100%. This is a great example about how optimizing for core WebVitals leads to faster websites but also helps developers build more inclusive web solutions for their users. Signals such as data saver are indeed useful, but it's possible that users may not always enable these settings even when they should. Think about how many times while being in a hurry we forgot about setting a real useful feature. It's quite common. That's where other proxy signals such as device memory can help developers identifying high or low end devices in order to implement effective adaptive content strategies. Measurements by smashing magazine show a clear correlation between device memory and LCP timings, suggesting it can be used in a similar way to data saver as a signal to optimize. If you have a site with high traffic from low end devices, it's suggested to split metrics by this dimension to understand whether further actions should be taken in consideration. Now, let's turn to another part of the world. The Brazilian publisher Global used RAM to improve the cumulative layout shift and largest contentful paint respectively by 88% and 28%. In a market where low end devices accounts up to 35% of the Chrome sessions. And beyond the standalone browser usage other sites like LINE used RAM to improve co-app vitals on their app using webviews, topping a 20% LCP improvement. Overall, all of these companies used RAM to first identify and then take action on performance issues as faced by real users. The challenges may be different for e-commerce, social networks, news publishers and even CMS. But what's important is that by knowing these data points through the help of RAM solutions they all successfully managed to improve their end-users experience. Alright, to summarize, remember that the core web vital is a measure of real user experience which is why real user measurement tools is critical to understanding and optimizing those experiences. If you've never tried out a RAM solution we strongly encourage you to. Next, go deep into your analysis. Don't just limit yourself to the basics. If you're using Chrome user experience report or search console, that's a great start. You'll have a much better understanding of how your users are experiencing your website once you start drilling down dimensions like country, device or even very specific feature preference of your users like we discussed today. For example, as you saw earlier the same web page could deliver a very different experience for new internet markets like India, Indonesia, Brazil and more where there is high concentration of low memory devices and unfortunately internet speeds are still not at par with what we see around the other parts of the world. Lastly, remember that any site type can achieve their core web vital goals and that the data we shared earlier shows that many sites across the globe already have. The key thing that's needed is true understanding of your market and most importantly your users. Focus on the user and all else will follow. Anyway, with that we come to the end of this presentation. We hope you truly enjoyed this journey of core web vitals in the real world with us. Thank you. Thank you. Grazie.