Tips for Optimizing Core Web Vitals

Google has released an updated set of recommendations for optimizing Core Web Vitals to assist you in deciding what to prioritize when time is of the essence.

The three Core Web Vitals metrics are loading time, interactivity, and visual stability.

Google believes that these metrics are critical to providing a positive experience and uses them to rank websites in its search results.

Google has provided numerous suggestions for improving Core Web Vitals scores over the years.

Although each of Google's recommendations is worthwhile, the company recognizes that expecting everyone to do everything is unrealistic.

If you don't have much experience optimizing website performance, determining what will have the greatest impact can be difficult.

With limited time to devote to improving Core Web Vitals, you may be unsure where to begin. That's where Google's updated list of suggestions comes in.

Google says in a blog post that the Chrome team spent a year trying to identify the most important advice it can give about Core Web Vitals.

The team compiled a list of recommendations that are feasible for most developers, applicable to the majority of websites, and have a significant real-world impact.

Here's what the Chrome team recommends.

Optimizing the Most Contented Paint (LCP)

The Largest Contentful Paint (LCP) metric tracks how long it takes for a page's primary content to become visible to users. According to Google, only about half of all websites meet the recommended LCP threshold. These are Google's top tips for improving LCP.

Check that the LCP resource can be easily found in the HTML source.

According to the HTTP Archive's 2022 Web Almanac, 72% of mobile webpages have an image as the primary content. Websites must ensure that images load quickly in order to improve LCP.

If a page waits for CSS or JavaScript files to be fully downloaded, parsed, and processed before the image can begin loading, it may be impossible to meet Google's LCP threshold. If the LCP element is an image, the image's URL should always be accessible from the HTML source.

Ensure that the LCP resource is prioritized

In addition to including the LCP resource in the HTML code, Google suggests prioritizing it and not delaying it in favor of less important resources. Even if you used a standard img> tag to include your LCP image in the HTML source, having several script> tags in the head> section of your webpage before the img> tag can cause your image resource to take longer to load.

It would also be preferable if you avoided any actions that could reduce the priority of the LCP image, such as adding the loading="lazy" attribute. Use caution when using image optimization tools that apply lazy-loading to all images automatically.

To reduce the time to first bite, use a content delivery network (CDN) (TTFB)

Before loading any additional resources, a browser must receive the first byte of the initial HTML document response. This time is measured as Time to First Byte (TTFB), and the faster this occurs, the sooner other processes can begin.

To reduce TTFB, serve your content from a location close to your users and cache frequently requested content. According to Google, the best way to do both is to use a content delivery network (CDN).

Cumulative Layout Shift Optimization (CLS)

Cumulative Layout Shift (CLS) is a metric used to assess how stable a website's visual layout is. Google estimates that approximately 25% of websites do not meet the recommended standard for this metric. These are Google's top tips for improving CLS.

Specify Exact Sizes for On-Page Content

When the content on a website changes position after it has finished loading, this can cause layout shifts. To avoid this, it is critical to reserve as much space as possible ahead of time. Unsized images are a common cause of layout shifts, which can be remedied by explicitly setting the width and height attributes or equivalent CSS properties.

Images aren't the only thing that can cause page layout changes. Third-party ads or embedded videos that load later can also contribute to CLS. One solution is to use CSS's aspect-ratio property to address this issue. This is a new property that allows developers to specify an aspect ratio for images and non-image elements.

When this information is provided, the browser can automatically calculate the appropriate height when the width is determined by the screen size, just as it does for images with defined dimensions.

Check that the pages are eligible for Bfcache

Back/forward cache, or bfcache for short, is a feature in browsers that allows pages to be loaded instantly from earlier or later in the browser history using a memory snapshot. By eliminating layout shifts during page load, this feature can significantly improve performance.

Google recommends using Chrome DevTools to determine whether your pages are eligible for the bfcache and address any issues that prevent them from being so.

Avoid transitions and animations

The animation of elements on the website, such as cookie banners or other notification banners that slide in from the top or bottom, is a common cause of layout shifts. Other content may be pushed out of the way by these animations, affecting CLS. Even if they don't, animating them can have an effect on CLS.

Pages that animate any CSS property that could affect layout are 15% less likely to have "good" CLS, according to Google. To avoid this, avoid animating or transitioning any CSS property that requires the browser to update the layout unless in response to user input, such as a tap or key press.

When possible, use the CSS transform property for transitions and animations.

Improving First Input Delay (FID)

The first input delay (FID) of a website is a metric that measures how quickly it responds to user interactions. Despite the fact that most websites perform well in this category, Google believes there is room for improvement.

Google's new metric, Interaction to Next Paint (INP), is a possible replacement for FID, and the recommendations below apply to both.

Long tasks should be avoided or broken up

Tasks are any discrete operations performed by the browser, such as rendering, layout, parsing, and compiling and executing scripts. When tasks take more than 50 milliseconds to complete, they block the main thread and make it difficult for the browser to respond to user inputs quickly.

To avoid this, it's a good idea to divide large tasks into smaller ones, giving the main thread more chances to process critical user-visible work. This can be accomplished by frequently yielding to the main thread so that rendering updates and other user interactions can happen more quickly.

Avoid Using Extraneous JavaScript

A website with a lot of JavaScript can cause tasks to compete for the main thread's attention, which can hurt the website's responsiveness. You can use the coverage tool in Chrome DevTools to identify and remove unnecessary code from your website's resources.

The website will spend less time parsing and compiling code if the size of the resources required during the loading process is reduced, resulting in a more seamless user experience.

Avoid Making Huge Rendering Updates

JavaScript isn't the only factor that can affect the responsiveness of a website. Rendering can be expensive and impair the website's ability to respond to user inputs.

Optimizing rendering work can be difficult, and it is dependent on the specific goal. There are, however, some ways to ensure that rendering updates are manageable and do not become lengthy tasks.

Google suggests the following:

• RequestAnimationFrame() should not be used for any non-visual work.
• Maintain a small DOM size.
• Make use of CSS containment.

Conclusion

Core Web Vitals are a critical metric for delivering a positive user experience and ranking high in Google search results. Although all of Google's recommendations are worthwhile, this condensed list is realistic, applicable to most websites, and has the potential to have a significant impact.

Using a CDN to reduce TTFB, specifying explicit sizes for on-page content to improve CLS, making pages bfcache-eligible, and avoiding unnecessary JavaScript and animations/transitions for FID are all examples. Following these suggestions will allow you to make better use of your time and get the most out of your website.

To keep up with the Google Update cycle for its search engine, Hocalwire CMS features a carefully curated collection of settings that are automatically updated. We provide mobile SEO implementation as part of our standard packages as a service to our clients. To learn how Hocalwire may assist in transforming your current codebase into a beautiful mobile experience, schedule a demo right away.