The Google Chrome Team Shared Advice for Improving Core Web Vitals

The Google Chrome Team Shared Advice for Improving Core Web Vitals

The Google team has released new guidelines for Core Web Vitals that are both practical for most developers and relevant to most websites.

The Google team has released new guidelines for Core Web Vitals that are both practical for most developers and relevant to most websites.

Highlights

  • Core Web Vitals comprise three key metrics: loading time, interactivity, and visual stability.
  • The Google Chrome team has spent a year determining the essential advice for improving these metrics.
  • The recommendations provided by the team should be prioritized when time constraints are present.

Google is releasing an updated set of guidelines for optimizing Core Web Vitals, which can assist in determining priorities when time is limited. The company has consistently recommended enhancing Core Web Vitals scores over time. These metrics, which include loading time, interactivity, and visual stability, are considered crucial for delivering a positive user experience and are used by Google in its search engine rankings.

Google acknowledges that while all of its recommendations for improving Core Web Vitals are valuable, it is unrealistic to expect that every single one can be implemented. It can be difficult for those with limited experience in website optimization to determine which changes will have the most significant impact. The revised list of recommendations provided by Google can serve as a starting point for those with limited time to focus on enhancing Core Web Vitals.

In a recent blog post, the Google Chrome team announced that they had spent a year researching and identifying the most crucial advice for improving Core Web Vitals. The result is a list of practical recommendations for most developers that are relevant to most websites and have a significant real-world impact. The team advises referring to these recommendations to optimize Core Web Vitals.

Improving Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric estimates the duration required for the primary content of a webpage to become visible to users. According to Google, only approximately half of all websites meet the recommended LCP threshold. To address this, Google has provided top recommendations for enhancing LCP scores.

Ensure That The Resource for LCP Is Easily Located Within The HTML Source Code

As reported in the 2022 Web Almanac by HTTP Archive, most mobile webpages (72%) have an image as the primary content. To optimize LCP scores, websites need to ensure that images load quickly. If a page waits for CSS or JavaScript files to be fully processed, downloaded, and parsed before the image can start loading, it may not be possible to meet Google’s LCP threshold. To avoid this, it is recommended to have the LCP element’s image URL easily discoverable from the HTML source code as a general rule.

Ensure That The LCP Resource Is Given Priority

In addition to including the LCP resource in the HTML code, it is important to prioritize it and not delay its loading behind other non-critical resources. To achieve this, it is essential to place the <img> tag for the LCP resource as high as possible in the HTML code, ideally above any <script> tags in the <head> section. Google recommends this approach to ensure optimal performance.

Additionally, it is important to avoid any actions that could lower the priority of the LCP image, such as adding the loading= “lazy” attribute or using image optimization tools that apply lazy loading to all images. It is necessary to be mindful when using such tools and ensure that they do not negatively impact the loading of the LCP resource.

Implementing a Content Delivery Network (CDN) can help decrease Time To First Bite (TTFB)

The Time to First Byte (TTFB) measures the time it takes for a browser to obtain the first byte of the initial HTML document response. The faster this occurs, the sooner other processes, such as loading resources, can begin. Minimizing TTFB is crucial for providing a seamless user experience.

One effective way to decrease TTFB is to serve your content from a location that is geographically close to your users. Additionally, caching for frequently requested content can also aid in reducing TTFB.

Google recommends using a Content Delivery Network (CDN) as the best way to achieve both goals. A CDN allows you to distribute your content across multiple servers in different locations, making it easier to deliver content to users quickly and efficiently. CDNs often include caching functionality that can improve performance and reduce TTFB.

Optimizing Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a metric that measures the stability of the visual layout of a website. Google reports that approximately 25% of websites need to meet the recommended standard for this metric.

To improve CLS, Google suggests the following best practices:

Define Explicit Dimensions for the Content on the Page –

Layout shifts can occur when the position of content on a website changes after it has finished loading, which can negatively impact the user experience. To stop this from occurring, it is necessary to reserve space as much as possible for the content in advance. One common cause of layout shifts is un-sized images. To address this, it is essential to explicitly set the width and height attributes or equivalent CSS properties for images.

It is important to note that images are not the only factor that can cause layout shifts on web pages. Other types of content, such as third-party ads or embedded videos that load later, can also contribute to Cumulative Layout Shift (CLS). Therefore, it is essential to consider all types of content on the webpage when working to improve CLS.

One effective solution to addressing un-sized images and other elements that cause layout shifts is utilizing CSS’s aspect-ratio property. This relatively new property enables developers to set an aspect ratio for images and non-image elements.

By providing this information, the browser can automatically calculate the appropriate height based on the width, identical to how it does for images with specified dimensions. This allows for a more stable layout, as the browser can reserve space in advance for the content, reducing the likelihood of layout shifts. This approach can be particularly useful for responsive design, where the layout of a webpage may change based on the screen size.

Make Sure Your Pages Are Eligible for Bfcache –

Browsers keep a memory snapshot of pages used to speed up page loading by instantly retrieving them from the back/forward cache. This feature eliminates layout shifts during page load. You can check whether your pages are eligible for bfcache using Chrome Developer Tools and correct any reasons why they are not if they are not.

Avoid Transitions/Animations –

Significantly altering the layout of a website through animation is a frequent cause of layout changes. In addition to sliding cookies down or cookies up, other notification banners might also move down or up. Even when they do not, these banners can still impact customer satisfaction. Google claims that pages that animate any CSS property that could impact layout are 15% less probable to have “good” customer satisfaction. To mitigate this, the best approach is to avoid animating or transitioning any CSS property that needs the browser to update the layout unless it is in response to user input, such as a tap or key press.

For best results, use the CSS transform property for animations and transitions.

Optimizing First Input Delay (FID) –

The First Input Delay (FID) measures how fast a website responds to user actions. Google thinks most websites perform well in this area, but Google wants to improve things. The Interaction to Next Paint (INP) metric, which replaces FID and the recommendations below are relevant to both FID and INP, is a potential alternative.

Bypass Or Break Up Long Tasks –

Tasks include rendering, laying out, parsing, compiling, and executing scripts. When tasks take longer than 50 milliseconds, they block the main thread and make it difficult for the browser to respond quickly to user inputs. To prevent this, it’s important to break up long tasks into smaller tasks so that the main thread can process critical user-visible work more frequently. Rendering updates and other user interactions can happen more quickly this way. You may improve the responsiveness of the main thread by yielding to it frequently, thereby allowing rendering updates and other user interactions to occur more quickly.

Avoid Excessive JavaScript –

A website loaded with JavaScript might suffer from slowed-down performance as tasks compete for the main thread’s attention. Reducing the size of resources required during loading will ensure a more seamless user experience by avoiding the website’s parse and compile code processes. To find and remove unnecessary code from your website’s resources, you can use the coverage tool in Chrome Developer Tools.

Make Small Rendering Updates Infrequently –

When dealing with a JavaScript-heavy website, rendering can slow down the user experience and block necessary data from arriving. Rendering optimization, however, can take time and effort to achieve. There are several ways to make rendering updates manageable and not turn into long chores.

Google recommends the following:

  • Don’t run non-visual tasks using requestAnimationFrame()
  • Keep your DOM size small.
  • Use CSS containment.

In Conclusion

Getting ranked well in Google search results and providing a positive user experience is crucial to the success of a website. This list addresses the needs most commonly seen by website administrators, and it can have a substantial impact.

By implementing techniques such as utilizing a CDN to decrease TTFB, specifying dimensions for on-page elements to enhance CLS, enabling bfcache, and minimizing unnecessary JavaScript and animations/transitions for FID, you can optimize your website and make the most efficient use of your time.

Read Next: Google Search Essentials is Replacing the Google Webmaster Guidelines

CLICK HERE to schedule your FREE consultation TODAY!

What’s Your SEO Score?

Enter the URL of any landing page or blog article and see how optimized it is for one keyword or phrase.

Share this post