 |
| The Google Chrome team shares tips for improving Core Web Vitals |
The Google Chrome team shares tips for improving Core Web Vitals
Google shares new Core Web Vitals recommendations that are realistic for most developers and applicable to most websites.
- Core Web Vitals are three metrics that measure loading time, interactivity, and visual stability.
- Google’s Chrome team spent a year uncovering the most important tips regarding Core Web Vitals.
- These are the recommendations that you should prioritize when time is limited.
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 that measure 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.
Over the years, Google has provided a number of tips for improving Core Web Vitals scores.
While each of Google’s recommendations is worth implementing, the company realizes that it’s unrealistic to expect anyone to do it all.
If you don’t have much experience with improving website performance, it can be difficult to know what will have the most significant impact.
You may not know where to start with limited time to improve 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 tips regarding Core Web Vitals.
The team has put together a list of recommendations that are realistic for most developers, apply to most websites, and have a meaningful impact on the real world.
Here’s what Google’s Chrome team advises.
- Optimizing Largest Content Paint (LCP)
- Make sure the LCP resource is easily found in the HTML source.
- Ensure that LCP resources are prioritized.
- Use a Content Delivery Network (CDN) to reduce time to first bite (TTFB)
- Optimizing the overall layout shift (CLS).
- Set the apparent size for the content on the page.
- Make sure the pages are eligible for Bfcache.
- Avoid animations/transitions.
- Optimizing First Input Delay (FID)
- Avoid long tasks or break them up.
- Avoid unnecessary JavaScript.
- Avoid major rendering updates.
- Optimizing Largest Content Paint (LCP)
The largest content paint (LCP) metric measures the time it takes for the primary content of a page to become visible to users.
Google says that only half of all websites meet the recommended LCP threshold.
These are Google’s top tips for optimizing LCP.
- Make sure the LCP resource is easily found in the HTML source.
According to the HTTP Archive’s 2022 Web Almanac, 72% of mobile web pages have an image as the main content. To optimize LCP, websites should ensure that images load quickly.
It may be impossible to meet Google’s LCP limit if a page waits for CSS or JavaScript files to be fully downloaded, parsed, and processed before the image begins to load.
As a general rule, if the LCP element is an image, the image URL must always be discoverable from the HTML source.
- Ensure that LCP resources are prioritized.
In addition to placing the LCP resource in the HTML code, Google recommends that it be prioritized and not delayed behind other less important resources.
Even if you have included your LCP image in the HTML source using the standard <img> tag, if your web page’s <head> section contains several <script> tags before the <img> tag. , so it may delay the loading time. of your image resources.
It is best if you also avoid any actions that lower the priority of the LCP image, such as adding the loading=”slow” attribute.
Be careful using any image optimization tools that automatically apply slow loading to all images.
- Use a Content Delivery Network (CDN) to reduce time to first bite (TTFB)
The browser must receive the first byte of the initial HTML document response before loading any additional resources.
This time measurement is called time-to-first-byte (TTFB), and the faster it is, the sooner other processes can start.
To minimize TTFB, serve your content closer to your users and use caching for frequently requested content.
Google says the best way to do both is to use a content delivery network (CDN).
- Optimizing the overall layout shift (CLS).
Cumulative Layout Shift (CLS) is a metric used to measure how stable a website’s visual layout is. According to Google, about 25% of websites do not meet the recommended criteria for this metric.
These are Google’s top tips for improving CLS.
- Set the apparent size for the content on the page.
A layout shift can occur when content on a website changes its position after it is loaded. To prevent this from happening it is important to reserve space as far in advance as possible.
A common cause of layout changes is out-of-size images, which can be solved by explicitly setting the width and height properties or equivalent CSS properties.
Images aren’t the only factor that can cause layout changes on web pages. Other content, such as third-party advertisements or embedded videos that are loaded later, may contribute to CLS.
One way to solve this problem is to use 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, as it does for images with fixed dimensions.
- Make sure the pages are eligible for Bfcache.
Browsers use a feature called back/forward cache, or bfcache for short, which allows pages to be loaded earlier or later in the browser’s history immediately using a memory snapshot.
This feature can significantly improve performance by eliminating layout changes during page load.
Google recommends whether or not your pages are bfcache-eligible using Chrome DevTools and working on those reasons.
- Avoid animations/transitions.
A common reason for a layout shift is the animation of elements on the website, such as cookie banners or other notification banners, that come in from the top or bottom.
These animations can move other content out of the way, affecting CLS. Even when they don’t, triggering them can still affect CLS.
Google says that pages that activate any CSS property that can affect layout have a 15% lower chance of a “good” CLS.
To minimize this, it’s best to avoid animating or moving any CSS properties that require the browser to update the layout unless it’s in response to user input. , such as tap or key press.
It is recommended to use the CSS transform property 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.
While most websites perform well in this area, Google believes there is room for improvement.
Google’s new metric, Interaction to Next Paint (INP), is a potential alternative to FID, and the recommendations provided below are relevant to both FID and INP.
- Avoid long tasks or break them up.
Tasks are any discrete tasks that 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 is helpful to break up long tasks into smaller tasks, giving the main thread more opportunities to process the most important task visible to the user.
This can often be achieved by having a main thread 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 reducing the size of resources required during the loading process, the website will spend less time parsing and compiling code, resulting in a smoother user experience.
- Avoid major rendering updates.
JavaScript isn’t the only thing that can affect a website’s responsiveness. Rendering can be expensive and interfere with a website’s ability to respond to user input.
Optimizing the rendering function 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() to do anything non-visual.
- Keep your DOM size small.
- Use CSS containment.
Result
Core web vitals are an important metric for providing a positive user experience and ranking in Google search results.
While all of Google’s recommendations are applicable, this condensed list is realistic, applies to most websites, and can have a meaningful impact.
This includes using a CDN to reduce 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. Includes doing.
By following these recommendations, you can make better use of your time and get the most out of your website.