 Hi, I'm Saurabh. Hi, I'm Swetha. We are Web Ecosystem Consultants at Google. Today, we are going to talk about how adopting Core Web Vitals can positively impact your business. Using examples of global brands, we'll cover optimization techniques that were used, key learnings from these companies' journeys, and most importantly, how you can get started on your Core Web Vitals journey. Anyone who knows about Core Web Vitals has probably seen this before. But we want to take a moment to introduce this again because different people in the organization see it differently. Core Web Vitals consists of three different metrics. Largest contentful paint to measure how fast the content loads. First input delay to measure how quickly the content is interactive and cumulative layout shift which measures the visual stability. I'm sure none of us like the content that keeps jumping around. Interestingly, no matter who you are and what role you play, Core Web Vitals actually impact you. Let's take a closer look. As a user, it really defines how you experience the website. As a product manager, it's important for you to take care of these because otherwise it results in disruptive user journey potentially impacting the effectiveness of your released features. And as a developer, you see it as upcoming sprints full of exciting and groundbreaking work. It's always amazing for developers to see their hands on developed products shaping into something which the developer communities and most importantly, the users would love. But at the end, it all boils down to money. As an exec, your company and hence you might be missing out on all those important dollars critical for your business. In a nutshell, no matter which side you're on, the good news is Core Web Vitals brings everyone towards the shared goal and that is user centricity. On that note, let's take a look at a company which has always been performance focused and understood the importance of measuring user centric metrics. Tokopedia is the number one e-commerce site in Indonesia, which is the fourth largest population in the world. Their monthly active users itself is 100 million. For them, improving LCP in the field resulted in much better user engagement. Here's their story. After Core Web Vitals was announced, there was an increased emphasis on using real user monitoring or RUM to measure field data. But what's interesting to note here is that they are using a combination of lab and RUM tools in a really great way. Developers use lab tools like Lighthouse and Chrome DevTools for day-to-day technical analysis. And RUM is the source of truth on how their users are actually experiencing their website. For that reason, they've adopted Core Web Vitals as the ultimate measure of their website's performance. Using these made it easier to get buy-in from C-level and cross-functional teams because everyone can agree on user-centric metrics. They even used comprehensive dashboards like this one for company-wide tracking. That's a great evolution for Tokopedia, right? They even achieved a Lighthouse score of 84 and an LCP of 2.5 seconds. How did they do that? Well, in the second half of 2020, they focused on improving LCP, CLS and FID. They found LCP to be the highest bottleneck for the top 6 pages throughout the conversion funnel. But how difficult would it have been to fix it? To be honest, not much. In fact, the key to success is to really fix the low-hanging fruits first. Let's quickly deep dive into what they did to pass the LCP threshold and subsequently create business impact. To begin with, they experimented with different rendering techniques and found out that server-side rendering just the LCP element which was the dynamic banner image at the top gave them the most benefit because it led to smaller HTML size and faster time to first bite. That was followed up by pre-loading the LCP element. As you can see on the bottom right, the image definitely loaded a couple of frames faster with pre-loading. And finally, some common image optimization techniques like compression and usage of next-gen formats like WebP. They also lazy-loaded the non-LCP images. As a result of adopting these best practices, some of which you'll see even in the Lighthouse recommendations, they saw a 55% better LCP. So, the key takeaway here is that even by adopting such well-known best practices, they managed to achieve some amazing results. Like 23% better average session duration and 15% more time spent. The key to their success was that they prioritized on improving the metrics and also focused on the top traffic pages within the conversion funnel. As a decision maker, you can also use lab and field tools to see which metric needs the most work. Like LCP with Tokopedia's case. But wait, I have a question. If someone is new to adopting performance as a KPI, how do you think they can validate the importance of their performance? That's a great question. And for that, let's talk about Vodafone. Vodafone is an interesting case of a company who pivoted from a more traditional performance metric to Core Web Vitals. They were historically measuring DOM content loaded as the primary metric for site performance. However, sometimes tasks that optimized for DOM content loaded could actually hurt rendering time. So, after Core Web Vitals came out, they decided to experiment with how it impacts their lower funnel user behavior. Lower funnel means closer to conversion. Their methodology was pretty notable. They conducted a really well-devised server-side AB testing on an important ads landing page where the user could also convert. They built two versions of the landing page, which were functionally and visually exactly the same, except that version A was optimized for 31% better LCP. And the better LCP was achieved by a couple of things. First, the server-side rendered the critical HTML including a heavy widget. This resulted in less render-blocking JavaScript on the client side. And second, the most common one, image optimization. They did a server-side AB testing as well and not the client-side one, which is very important to prevent additional rendering cost. That's a really good point. And in the end, they were surprised to see that the result trickled down the entire conversion funnel. They saw 15% more users converting as a successful lead, followed by 11% more users visiting the checkout cart and eventually 8% more sales. I can already imagine the smirk on all the execs out there. Well, looking back at the two examples, the main thing we can learn is that you can achieve a lot even by adopting best practices and fixing the low-hanging fruits. JD, for example, used a technique of using the fixed aspect ratio for elements which were affecting the CLS. This was again a very easy and straightforward fix. For LCP, they differed the third-party scripts and split the sedent keys to keep the time to first buy lower. As a result, they saw 8% lesser bounce rate on mobile article pages. Lazada leveraged Lighthouse as a development tool to identify quick wins such as remove render blocking JavaScript and CSS and image optimization techniques like using next-gen formats along with differing the non-critical images. Just by doing this, they are three times improvement of LCP across all of their pages translated into a nearly 17% better mobile conversion rate. For Yao, apart from fixes like using next-gen WebP images and pre-loading the hero images, what worked really well was a dynamic import to query only the above-the-fold content. This actually led to about three times better LCP and eventually 108% more ads clicked through rate. That's great. So far, we have seen some great examples of companies that have benefited from optimizing for co-web vitals. And there are many other brands globally who have done the same. Many of you might be aware that Google search also announced that co-web vitals would be adopted as part of a ranking signal called page experience. While search ranking could be an incentive for you to improve your website, adopting co-web vital has several other short and long-term business benefits beyond ranking. All of these companies didn't wait for the ranking signal to be enforced and adopted co-web vitals anyway. And this is because it's the right thing to do for your users. As they say, establishing a good performance well and early adds up to building a brand relationship with the user in the long term. So, how can you get started right now? The most important thing that you can do right now is to start measuring your site and please use field metrics to do so. There are many tools available for you. For example, the Google tools are great to start with because they're relatively easier to set up. That's a great first step. But if you want more flexibility, go the extra mile and integrate with any of the third party tools on the right which already offer co-web vitals built into their service. But what if you need a bit more experience in the correlation of co-web vitals with your business? Well, you can actually do a bit more research to gather some definitive data. And that's what Farfetch did. Before investing in co-web vitals, Farfetch wanted to see how it would impact their business in terms of exit and conversion rate. So, they captured the web vitals metrics across millions of sessions and over an extended period of time. What they found was that LCP showed a strong correlation to both exit and conversion rates. FID showed some patterns of correlation to exit rate. And CLS is work in progress. I do want to call out that this analysis focused on Chrome data only and on Farfetch it accounts for 34% of the web traffic. That's right, Saurabh. And looking at the overall findings, the team who did the research were convinced about the benefit of co-web vitals for their organization. Well, well, well. Doing the research is one thing, Shweta. But how could they convince the cross-functional teams to adopt it? For that, they actually had a very clever solution which was to build a business calculator for company-wide use. So, no matter whether they are a PM or in marketing, they could actually estimate the business impact of co-web vitals upfront. Another example is Blue Triangle, a digital experience monitoring company which wanted to understand how LCP impacts conversion rates for their customers. After measuring thousands of sessions of a product page from an anonymous online retailer, what they found out was that a much higher percentage of users go on to make the purchase when LCP is less than two seconds. So, the data speaks for itself. You can choose to follow some of these methods in the field tools we saw earlier. Before we wrap up, we want to share a few tips that we've learned from a lot of the companies mentioned earlier. Tip number one, prioritize. It's okay to start small by picking one metric or one page. Lab tools are your friend here. You can use them to prioritize your efforts. Also, if you want to pick one page to optimize first, try to pick a high traffic one to deliver meaningful results. Make your effort count. Tip number two, deploy properly planned A-B tests. Vodafone was a great example of a well-planned A-B testing. Similarly, Flipkart is a firm believer of that too. They wanted to see whether LCP optimization could further boost their already less bounce rate. Hence, they chose server-side A-B testing to measure the impact. I think using server-side was a great idea because although client-side A-B testing libraries could be easier to set up, it could badly hurt the rendering time. Last tip, invest in continuous monitoring to prevent regressions because, as they say, performance is a journey, not a destination. Just like how we saw Tokopedia investing heavily in monitoring tools, iCook uses periodic lab tests as pre-emptive monitoring and field data as the source of truths of how their users are actually experiencing their website as well as to validate the optimizations that were going into production. As a result, the most significant benefit was that the engineering teams successfully built a performance culture and now see Core Web Vitals as an important product feature. By using such comprehensive monitoring, iCook was able to identify and implement opportunities for improvement with some great results. What great results indeed and such an promising numbers to end on a high note. And with that, we come to the end of this presentation. Thanks for tuning in. We hope it resonated well with one and all across the teams and you are already thinking of adopting Core Web Vitals to see your business flourishing. Thank you.