Google is sharing an updated set of recommendations for optimizing Core Web Vitals to help you decide what to prioritize when time is limited.
Core Web Vitals are three metrics measuring loading time, interactivity, and visual stability.
Google considers these metrics essential to providing a positive experience and uses them to rank websites in its search results.
Throughout the years, Google has provided numerous suggestions for improving Core Web Vitals scores.
Although each of Google’s recommendations is worth implementing, the company realizes it’s unrealistic to expect anyone to do it all.
If you don’t have much experience with optimizing website performance, it can be challenging to figure out what will have the most significant impact.
You may not know where to start with limited time to dedicate to improving Core Web Vitals. That’s where Google’s revised list of recommendations comes in.
In a blog post, Google says the Chrome team spent a year trying to identify the most important advice it can give regarding Core Web Vitals.
The team put together a list of recommendations that are realistic for most developers, applicable to most websites, and have a meaningful real-world impact.
Here’s what Google’s Chrome team advises.
Optimizing Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) metric measures the time it takes for the primary content of a page to become visible to users.
Google states that only about half of all websites meet the recommended LCP threshold.
These are Google’s top recommendations for improving LCP.
Make Sure The LCP Resource Is Easily Found In The HTML Source
According to the 2022 Web Almanac by HTTP Archive, 72% of mobile webpages have an image as the main content. To improve LCP, websites must ensure images load quickly.
It may be impossible to meet Google’s LCP threshold if a page waits for CSS or JavaScript files to be fully downloaded, parsed, and processed before the image can start loading.
As a general rule, if the LCP element is an image, the image’s URL should always be discoverable from the HTML source.
Make Sure The LCP Resource Is Prioritized
In addition to having the LCP resource in the HTML code, Google recommends prioritizing it and not delaying behind other less critical resources.
Even if you have included your LCP image in the HTML source using a standard <img> tag, if there are several <script> tags in the <head> section of your webpage before the < img> tag, it can delay the loading time of your image resource.
It would be best if you also avoided any actions that may lower the priority of the LCP image, such as adding the loading=”lazy” attribute.
Be careful with using any image optimization tools that automatically apply lazy-loading to all images.
Use A Content Delivery Network (CDN) To Reduce Time To First Bite (TTFB)
A browser must receive the first byte of the initial HTML document response before loading any additional resources.
The measure of this time is called Time to First Byte (TTFB), and the faster this happens, the sooner other processes can begin.
To minimize TTFB, serve your content from a location near your users and utilize caching for frequently requested content.
The best way to do both things, Google says, is to use a content delivery network (CDN).
Optimizing Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a metric used to evaluate how stable the visual layout of a website is. According to Google, around 25% of websites do not meet the recommended standard for this metric.
These are Google’s top recommendations for improving CLS.
Set Explicit Sizes For On Page Content
Layout shifts can occur when content on a website changes position after it has finished loading. It’s important to reserve space in advance as much as possible to prevent this from happening.
One common cause of layout shifts is unsized images, which can be addressed by explicitly setting the width and height attributes or equivalent CSS properties.
Images aren’t the only factor that can cause layout shifts on webpages. Other content, such as third-party ads or embedded videos that load later can contribute to CLS.
One way to address this issue is by using the aspect-ratio property in CSS. This property is relatively new and allows developers to set an aspect ratio for images and non-image elements.
Providing this information allows the browser to automatically calculate the appropriate height when the width is based on the screen size, similar to how it does for images with defined dimensions.
Ensure Pages Are Eligible For Bfcache
Browsers use a feature called the back/forward cache, or bfcache for short, which allows pages to be loaded instantly from earlier or later in the browser history using a memory snapshot.
This feature can significantly improve performance by eliminating layout shifts during page load.
Google recommends checking whether your pages are eligible for the bfcache using Chrome DevTools and working on any reasons why they are not.
Avoid Animations/Transitions
A common cause of layout shifts is the animation of elements on the website, such as cookie banners or other notification banners, that slide in from the top or bottom.
These animations can push other content out of the way, impacting CLS. Even when they don’t, animating them can still impact CLS.
Google says pages that animate any CSS property that could affect layout are 15% less likely to have “good” CLS.
To mitigate this, it’s best to avoid animating or transitioning any CSS property that requires the browser to update the layout unless it’s in response to user input, such as a tap or key press.
Using the CSS transform property is recommended for transitions and animations when possible.
Optimizing First Input Delay (FID)
First Input Delay (FID) is a metric that measures how quickly a website responds to user interactions.
Although most websites perform well in this area, Google believes there’s room for improvement.
Google’s new metric, Interaction to Next Paint (INP), is a potential replacement for FID, and the recommendations provided below are relevant to both FID and INP.
Avoid Or Break Up Long Tasks
Tasks are any discrete work the browser performs, including rendering, layout, parsing, and compiling and executing scripts.
When tasks take a long time, more than 50 milliseconds, they block the main thread and make it difficult for the browser to respond quickly to user inputs.
To avoid this, it’s helpful to break up long tasks into smaller ones by giving the main thread more opportunities to process critical user-visible work.
This can be achieved by yielding to the main thread often so that rendering updates and other user interactions can occur more quickly.
Avoid Unnecessary JavaScript
A website with a large amount of JavaScript can lead to tasks competing for the main thread’s attention, which can negatively affect the website’s responsiveness.
To identify and remove unnecessary code from your website’s resources, you can use the coverage tool in Chrome DevTools.
By decreasing the size of the resources required during the loading process, the website will spend less time parsing and compiling code, resulting in a more seamless user experience.
Avoid Large Rendering Updates
JavaScript isn’t the only thing that can impact a website’s responsiveness. Rendering can be costly and interfere with the website’s ability to respond to user inputs.
Optimizing rendering work can be complex and depends on the specific goal. However, there are some ways to ensure that rendering updates are manageable and don’t turn into long tasks.
Google recommends the following:
- Avoid using requestAnimationFrame() for doing any non-visual work.
- Keep your DOM size small.
- Use CSS containment.
Conclusion
Core Web Vitals are an important metric for providing a positive user experience and ranking in Google search results.
Although all of Google’s recommendations are worth implementing, this condensed list is realistic, applicable to most websites, and can have a meaningful impact.
This includes using a CDN to lower TTFB, setting explicit sizes for on-page content to improve CLS, making pages eligible for bfcache, and avoiding unnecessary JavaScript and animations/transitions for FID.
By following these recommendations, you can make better use of your time and get the most out of your website.
Source: Web.dev
Featured Image: salarko/Shutterstock
