Core Web Vitals are a set of metrics that assess the user experience on a website. These metrics focus on criteria such as load performance, responsiveness to user input, and layout stability. In this guide, we will explore a workflow for improving Core Web Vitals for your website.
The workflow for improving Core Web Vitals depends on whether you are collecting your own field data. If you are collecting field data, the workflow begins with evaluating your website’s performance using real user data. If you are not collecting field data, the workflow starts with analyzing data from Google’s tools to assess your website’s performance.
Collecting Field Data for Core Web Vitals
Core Web Vitals are best measured in the field using real user data. Lab-based tools like Lighthouse are helpful for diagnosing performance problems and identifying best practices, but they may not reflect the real-life Core Web Vitals experienced by your users.
Lab-based tools simulate certain conditions and may not capture the full range of network conditions and device capabilities that your users experience. Additionally, lab-based tools often perform a “cold load” of a webpage, which may not reflect the experience of returning visitors who have cached assets or encountered cookie banners.
To measure real-world performance, it is recommended to collect your own field data using JavaScript to monitor user experiences and report metrics to an analytics solution. This can be done using third-party solutions or by building your own metrics collection and reporting system. Google’s web-vitals library can help you gather all Web Vitals, but you will be responsible for reporting, storing, and analyzing the data.
If you are already using Google Analytics, you can use the web-vitals library to send Web Vitals data to Google Analytics and utilize the BigQuery exports of GA4 to report on the data. It is important to follow best practices when collecting and reporting field data to avoid common pitfalls.
Write faster and smarter, Try SurgeGraph Today!Google Tools for Analyzing Core Web Vitals
Regardless of whether you are collecting your own field data or relying on Google’s tools, there are several Google tools that can be useful in analyzing Core Web Vitals. Here is a high-level overview of each tool:
Chrome User Experience Report (CrUX)
CrUX is a public dataset collected from real Chrome users. It provides field data on Core Web Vitals and other metrics for websites with sufficient traffic. CrUX can be accessed through the monthly BigQuery dataset or the daily API.
It is helpful for comparing your website’s field data to see how it aligns with the data from real Chrome users. However, CrUX has limitations and may not always provide detailed insights into performance issues.
PageSpeed Insights (PSI)
PSI provides field data from CrUX as well as lab data from Lighthouse for a given page. It is useful for assessing overall Core Web Vitals performance at the page or origin level. PSI also provides recommendations for improving Core Web Vitals based on Lighthouse data.
However, PSI is only available for public URLs and may not be suitable for websites that are not represented in the CrUX dataset.
Search Console
Search Console measures a website’s search traffic and performance, including Core Web Vitals. It provides a Core Web Vitals report based on field data from CrUX. Search Console is useful for assessing both search and page performance and offers insights into how performance improvements impact entire categories of pages.
However, it may not be suitable for websites that use different third-party tools for page grouping or are not represented in the CrUX dataset.
Lighthouse
Lighthouse is a lab tool that provides specific opportunities for improving page performance. It offers recommendations and audits to identify performance issues and best practices. Lighthouse can be run from Chrome DevTools or used as part of continuous integration processes.
It is useful for finding performance improvement opportunities during development and testing code changes. However, Lighthouse is a lab tool and may not always reflect the real-life Core Web Vitals experienced by users.
Web Vitals Extension
The Web Vitals extension is a diagnostic tool that shows Core Web Vitals metrics in real time as you browse the web. It provides insights into performance issues and offers debugging information to identify performance problems. The Web Vitals extension is useful for assessing Core Web Vitals at all points of the page lifecycle and can be used by anyone in any role.
However, it should not be relied upon as the sole tool for performance analysis.
Chrome DevTools Performance Panel
The Performance panel in Chrome DevTools is a lab tool that profiles all page activity during page load or a recorded time period. It provides deep insights into network, rendering, painting, scripting activity, and Core Web Vitals.
The Performance panel is useful for debugging performance issues and testing code changes. However, it is a developer tool and may not be suitable for novice developers or non-developer roles.
A Workflow for Improving Core Web Vitals
Now that we have an understanding of the tools available, let’s explore a three-step workflow for improving Core Web Vitals:
Step 1: Evaluate Website Health and Identify Opportunities for Improvement
Start by evaluating your website’s health and identifying pages that require performance improvements. Use tools like PageSpeed Insights and Search Console to analyze field data and identify issues related to Core Web Vitals. Pay attention to the specific metrics that need improvement, such as LCP, CLS, FID, and INP.
Understand the relationships between these metrics and identify the root causes of performance issues.
Step 2: Debug and Optimize
Once you have identified performance issues, use tools like Lighthouse, the Web Vitals extension, and the Performance panel in Chrome DevTools to debug and optimize your website. Run Lighthouse audits to get page-level guidance and recommendations for improving Core Web Vitals.
Use the Web Vitals extension to analyze Core Web Vitals in real time and identify performance issues as you interact with the page. Use the Performance panel in Chrome DevTools to gain deep insights into page performance and debug responsiveness issues affecting FID and INP.
Step 3: Monitor for Changes
After optimizing your website’s Core Web Vitals, it is important to monitor for changes and prevent performance regressions. Use tools like Lighthouse-CI to monitor performance during continuous integration processes and prevent regressions from entering production.
Regularly monitor field data using RUM solutions or the CrUX Dashboard to ensure that your website’s Core Web Vitals stay within the desired thresholds. Continuously assess and improve your website’s performance to provide fast and delightful user experiences.
Final Thoughts – Core Web Vitals
Improving Core Web Vitals is essential for providing a great user experience on your website. By following a workflow that includes evaluating website health, debugging and optimizing, and monitoring for changes, you can ensure that your website’s Core Web Vitals stay healthy.
Use the available Google tools to analyze and optimize performance, and collect your own field data to get a comprehensive understanding of how your users experience your website.
With a performance-first mindset and the right tools and processes in place, you can build great user experiences and achieve good Core Web Vitals.
