Measure And Optimize Core Web Vitals
The Core Web Vitals are a set of three website performance metrics that capture how users experience the speed and responsiveness website. They are used as a search result ranking factor by Google.
Whether you need to learn about, test, or fix your Core Web Vitals, this post explains it all.
Core Web Vitals Quick Start
Not sure where to start? We recommend following these steps in order:
And don't forget to download our free Core Web Vitals cheat sheet.
What are the three Core Web Vitals metrics?
There are three Core Web Vitals metrics that measure your website performance and affect your search engine rankings:
- 🖼️ Largest Contentful Paint (LCP): Measures how quickly the main page content renders
- 🖱️ Interaction to Next Paint (INP): Measures the latency for a user interaction
- ↕️ Cumulative Layout Shift (CLS): Measures the visual stability of the page
Google has defined scores for each metric of Core Web Vitals to rate them as "Good", "Needs Improvement", or "Poor", scoring is covered in more detail later.
Test Core Web Vitals on your website
We offer a free Core Web Vitals testing tool can show you how fast your website is for real users and what you can improve.
Open the Web Vitals tab after running the test to get an in-depth analysis. This will show you the real-user data Google CrUX data as well as a result from an on-demand test.
The result also shows a 25-week trendline for real user data.
Learn about Largest Contentful Paint (LCP)
LCP is one of the three Core Web Vitals metrics that measures how quickly the main content of a page renders.
What happens when you load a website? It first starts out with a blank page. Content then starts to appear on the screen - in the browser rendering world, this is known as a paint.
Browsers have the concept of paint milestones, these milestones can be used to measure a website's performance:
- The First Paint (FP) measures when the browser first starts rendering parts of the page. This includes empty boxes without any content.
- The First Contentful Paint (FCP) measures when content, like text or images, is first rendered by the browser.
- The Largest Contentful Paint (LCP) measures at what time the largest UI element was rendered on the page.
Load time milestones like this have been used as page speed metrics for a long time. Early on the Load Event was used to assess whether a page had loaded. However, the load event has no direct relationship to visual content appearing for the user, so new metrics like FCP and LCP were introduced over time to better reflect the user experience.
This filmstrip timeline shows how more and more content is rendered by the browser as it becomes available.
The previous screenshot shows how the product image (the bananas) is the LCP element. When that image appears in less than 2.5 seconds, the LCP score is considered "Good".
The Largest Contentful Paint tries to identify the single largest content element on the page and measures when it appears. A content element could be a piece of text, an image, or the first frame of a video.
To optimize the Largest Contentful Paint you should:
- Reduce server response time: For example, use a Content Delivery Network (CDN) to serve content closer to the user.
- Remove render-blocking resources: Use
async
anddefer
attributes for JavaScript files, so they don't block the rendering of the page. You should also consider inlining critical CSS. - Optimize your images and size them appropriately: Modern image formats like
.avif
and.webp
have good browser support and can reduce the size of your images. - Prioritize the LCP image with the
fetchpriority
attribute and lazy load less important images to reduce bandwidth competition. - Preload the main page image: Use the
rel="preload"
attribute to tell the browser to fetch the main image as soon as possible. - Use server-side rendering when building JavaScript applications: Instead of using client-side rendering, you should render the page on the server and send the full HTML to the browser.
Scoring the Largest Contentful Paint metric
Here's the current LCP scoring guide, as set by Google:
- 🟢 If your LCP is under 2.5 seconds, it's considered "Good".
- 🟡 If your LCP is between 2.5 and 4 seconds, it "Needs Improvement".
- 🔴 If your LCP is over 4 seconds, it's "Poor".
Understand Interaction to Next Paint (INP)
Interaction to Next Paint is another Core Web Vitals metric, and measures how quickly a page responds to user interactions.
For example, when a user clicks a button it might take half a second to process the event and update the user interface. If the user interaction takes half a second to process the INP score is 500 milliseconds.
But what is a "user interaction"? For the purposes of the INP metric, a user interaction is a click, tap, or keypress.
Optimizing your INP score can involve a number of tasks. If you're having issues with INP, we recommend going through the following steps to fix your INP scores:
- Profile user interactions in Chrome DevTools: Perform a user interaction on your website during a DevTools performance recording, then inspect the results to identify slow tasks.
- Minimize overall CPU time and blocking tasks that can delay event processing (measured by the Total Blocking Time metric).
- Remove unused JavaScript and CSS code to reduce the amount of work the browser has to do. Code coverage tools within DevTools can help you identify unused code.
- Start using DebugBear's real user monitoring service to track slow interactions experienced by real users.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data
Scoring the Interaction to Next Paint metric
Here's the current INP scoring guide, as set by Google: