 Hi. My name is Garima Mimani, and I'm a web ecosystems consultant at Google. Today, I will talk to you about a few UX patterns that you can implement to achieve good user experience while optimizing for core web vitals on your site. When I visit a website, I have certain expectations from the site. I want content that is useful and interactions that are smooth and predictable. Site owners and developers try different UI patterns to meet the customer expectations while also balancing business needs. But the big question is, what really makes for a good user experience? Well, there is no right answer to that question. User experience is different for everyone. Great user experience is intangible and can be difficult to measure. A way to measure the quality of user experience is by answering these three questions. Is it happening? Is it responsive? And is it delightful? And the metrics that correlate to those pillars are largest contentful paint, or LCP, corresponding to loading, the first input delay, or FID, corresponding to interactivity, and cumulative layout shift, or CLS, corresponding to visual stability. After research on millions of pages, we found that if a site meets the core web vitals thresholds, users are 24% less likely to abandon the page before the first content is painted. Raise your hands if you have had this experience. You navigate to a site, it takes a long time to load, and when it does, content jumps around. Even though I don't see you, I know you are with me. Such experiences are disruptive to the user, and while they may endure it a few times, but if it keeps repeating, the user may not come back to your site. So let's see how this experience unfolds. A user navigates to your site, the static content is rendered first, no layout shifts here. The promotional banner comes in next, and the layout shift is introduced. You think this is it, and you move on to the content, but no, an ad just popped up and added another layout shift. Nowadays, we are increasingly seeing the addition of informational banners related to COVID causing further layout shifts. The overall impact of each of these shifts is a poor CLS score and a poor first impression to the user. So what can you do to mitigate this? The golden rule is avoid any layout shifts in the active viewport, and that means setting the fixed width and height of the images are ad containers in the active viewports. So when the content comes in, it will not cause any layout shift. If you have dynamic content injected below the current viewport, you can go ahead and resize those elements, and it will not impact the CLS. A question that we get asked a lot is that these banners and ads are injected dynamically, and it is impossible to know beforehand what their sizes will be. This is indeed a tricky question, and I want to emphasize that providing good user experience is everyone's responsibility, and therefore requires a shift in business mindset. The website developers, the UX designers, and the marketing folks must align on standardizing the size of the most important content in the first viewport. So what would you do if you still cannot get the fixed size in advance? Well, you can set the min height attribute of the placeholder. With this in place, if the content returned is larger than the min height, you will see some layout shift, but it will not be drastic. To know what min height to use, look into your historical data and see what sizes have been rendered in this placeholders and adjust the min height based on that data. Another alternative for marketing banners that we often see are overlays. While they do not impact layout shifts, they could impact your LCP if they are too large. Overlays are also not necessarily fixed to the viewport. So for a smooth transition to the content, you can have overlay potentially scroll with the content, and the layout can be updated to insert the overlay inline at top as soon as it is scrolled out of view. Another way layout shifts can happen is when the ad slot collapses when no ad is returned, pushing the content up. The best practice here is to avoid collapsing of the reserve space. You can obtain the placeholder with a simple text, saying reserved for ads, replace it with another image, or even better, set up house ads in the ad server. This ensures that something is always returned for a given ad request. Prisma Media is a French publisher website. Using the techniques I mentioned, they were able to improve the CLS code dramatically. They used aspect ratio to determine the image placeholder size for responsive images, and also added textual content and small iconographies to help users easily identify the advertising spaces. We looked at some UX patterns for optimizing page load. Let's look into the user scroll behavior now. User scroll or infinite scrolls are scrolls using the load more button by itself to not initiate any layout shifts. The issue arises when you do not have placeholders for the new content that is being injected. So the experience may look like this. The user scrolls down. The footer becomes visible above the fold. New content is injected, causing the footer to get pushed down. These individual shifts in infinite scrolls can lead up to a poor user experience and a poor CLS code. So how can we mitigate the shift? One, reserve enough spaces for the content before the user scrolls to that part of the page. You can use skeletal UI placeholders for it. Two, remove the footer from the bottom of the page, especially for infinite scrolls. And three, prefetch data and images for below the fold content so that by the time the user scrolls that far, it is already there. Now let's see how the page interacts on button click. When the user interacts with your page, they expect the response to be instant. Users do not want to wait and keep guessing that did this click actually work. And if the response to the click results in a layout shift, it adds to an already poor experience. These interactions are very critical to your business because if your user has an intent to convert, your inability to provide timely feedback to the user click could result in losing them. So if you know beforehand that a given interaction will take time to respond and will cause some layout change, provide instant feedback to the user that you are processing the request. Put placeholders for the changed layout so that when the content actually comes in, it does not introduce any further layout shifts. It is important to note here that you have 500 milliseconds from the user input to make any layout change, and that will not affect the CLS score. If you are server rendering the HTML, consider making the initial stage render with all buttons on controls disabled if those buttons and controls will require JavaScript to work. When the JavaScript finishes downloading and executing, remove the disabled attribute and add the necessary event listeners to make it do something. If the user sees that the button is disabled while the page is loading, they will be less likely to interact with it, and this could help you with your FID metric. Apart from these UX patterns, there is so much more that you can do to optimize for the core web vital metrics. NDTV is the largest media company in India. They prioritized the largest content block by delaying third-party requests and saw an increased engagement and consumption of content directly proportional to increased revenue for their website. Yahoo! Japan is the largest site in Japan and has been working on optimizing for core web vital metrics through cross-functional efforts in their organizations. A direct result of these efforts in the news site resulted in strong return on investment and some great improvements in their business metrics. So before I go away, if you took three things from the stock, it would be, one, do not insert content above existing content unless it is in response to a user interaction. Provide a smooth and predictable experience to the user. Two, if content needs to shift in response to a user interaction, do so immediately. Do not wait for the network request to finish. For requests that may take more than 500 milliseconds to complete, use placeholders to reserve space as the content loads. And three, for all interactive elements on the page, ensure that if it looks interactive, it actually is interactive. If you use server-sized rendering, consider rendering your pages in a loading or disabled state and then uploading them to look interactive only after hydration. Thank you and enjoy the rest of your sessions today.