What Are Core Web Vitals?

In this tutorial, we will discuss the three main Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) measures the loading performance of a webpage. It records the time it takes for the largest image or block of text visible within the viewport to load. LCP scores below 2.5 seconds are considered good. To improve LCP, developers can optimize images, use a content delivery network (CDN), and reduce the number of third-party scripts.

First Input Delay (FID) measures the interactivity of a webpage. It records the time it takes for a webpage to respond to a user’s first interaction, such as clicking a button or entering text into a form. FID scores of 100 milliseconds or less are considered good. To improve FID, developers can optimize the loading of critical resources, reduce the number of third-party scripts, and implement code-splitting.

Cumulative Layout Shift (CLS) records the amount of unexpected layout shifts that occur during the loading of a webpage. A good CLS score is 0.1 or less. To improve CLS, developers can use the CSS position: and size attributes to ensure that elements are properly positioned and sized before they are displayed, and avoid inserting new content above existing content.

To measure these Core Web Vitals, developers can use Google’s PageSpeed Insights, Lighthouse, Chrome DevTools, and other web performance tools. Developers can also use Google Search Console to view the performance of their website on Google Search and identify areas for improvement.

In addition, Google has announced that it will be using Core Web Vitals as ranking signals in search results, so it is important for developers to improve the performance of their websites to improve their search engine optimization(SEO).

Core Web Vitals are an important set of metrics that measure the performance and user experience of a webpage. By focusing on Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), developers can improve the speed and interactivity of their websites and provide a better user experience. By using web performance tools and search console, developers can measure and track these metrics, identify areas for improvement and optimize accordingly.