Improving Core Web Vitals
Over the years, Google has provided web developers with numerous recommendations on ways to improve core web vitals and how to enhance performance. While each recommendation individually can improve performance, implementing the entire set can be overwhelming. It’s important to determine which recommendations will have the most significant impact on your site.
To address this, the Chrome team has spent the past year evaluating and auditing performance recommendations to identify the most crucial ones. This article outlines the top recommendations to improve performance for each of the Core Web Vitals metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures load performance and is a metric that many sites struggle with. To optimize LCP, it’s essential to ensure that the LCP resource, often an image, can load quickly.
However, developers often overlook the time it takes for an image to start loading. According to HTTP Archive, 39% of images that serve as the LCP element have source URLs that are not discoverable from the HTML document source. To address this issue, the image’s URL should always be discoverable from the HTML source.
Some tips to achieve this include:
- Load the image using an
<img>element with thesrcorsrcsetattribute. - Prefer server-side rendering (SSR) over client-side rendering (CSR).
- If the image needs to be referenced from an external CSS or JS file, include it in the HTML source via a
<link rel="preload">tag.
Additionally, it’s crucial to prioritize the loading of the LCP resource. Developers can achieve this by setting the fetchpriority="high" attribute on the <img> or <link> tag that loads the LCP image. This ensures that the image is loaded earlier, even before other less important resources. It’s also important to avoid using the loading="lazy" attribute on the LCP image and to defer non-critical resources when possible.
To optimize document and resource Time to First Byte (TTFB), it is recommended to use a Content Delivery Network (CDN) to serve content geographically close to users and cache recently-requested content. CDNs can distribute resources to edge servers, reducing the distance the resources have to travel and improving TTFB.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of web pages. To mitigate layout shifts, developers should set explicit sizes on any content loaded from the page, such as images. Without explicit sizes, browsers set a default height of 0px, resulting in layout shifts when the image dimensions are discovered.
It’s also important to avoid unnecessary layout shifts caused by other content, such as third-party ads or embedded videos. The aspect-ratio property can be used to explicitly provide an aspect ratio to images and non-image elements, reducing layout shifts.
Ensuring that pages are eligible for the back/forward cache (bfcache) is another crucial recommendation. The bfcache allows browsers to instantly load a page from earlier or later in the browser history. Eligible pages can significantly reduce layout shifts during page load. Developers should check if their pages are eligible for the bfcache and address any reasons why they are not.
Avoiding animations and transitions that use layout-inducing CSS properties is also essential to prevent layout shifts. Animating layout-inducing CSS properties will result in layout shifts, even if the elements are not pushing other content around. Instead, developers should prefer animations using the CSS transform property, as it does not cause layout shifts.
First Input Delay (FID)
First Input Delay (FID) measures a page’s responsiveness to user interactions. While most sites score well on FID, there is still room for improvement. To enhance responsiveness, developers should avoid or break up long tasks that block the main thread from responding quickly to user inputs.
Breaking up long tasks into smaller ones allows the browser to process user interactions and rendering updates more quickly. Developers can also use APIs like isInputPending and the Scheduler API to prioritize user-visible work and yield to the main thread when user input is pending.
Avoiding unnecessary JavaScript is another recommendation to improve FID. By reducing the amount of JavaScript shipped with the website, developers can ensure that tasks are not competing for the main thread’s attention during startup.
Using the coverage tool in Chrome DevTools can help identify unused code that can be removed or moved to separate bundles via code splitting. Additionally, optimizing rendering work by avoiding excessive use of requestAnimationFrame() and keeping the DOM size small can further improve responsiveness.
Conclusion
Improving Core Web Vitals performance is crucial for enhancing website performance and user experience. By following the top recommendations outlined in this article, web developers can focus on the most effective ways to optimize LCP, CLS, and FID.
These recommendations have been carefully analyzed and evaluated to ensure they provide the most significant impact on performance. For more detailed information, developers can refer to the optimization guides provided by Google.
By implementing these recommendations, web developers can contribute to a faster web for all users.