News & Updates

Core Web Vitals Audit Strategy

August 14, 2021 02:35:41 AM

Core Web Vitals Audit Strategy

Google released important recommendations and tools to audit the Core Web Vitals successfully. These recommendations and tools should help the site owners understand how to measure, optimize, and report on these metrics (LCP, CLS, and FID).

The following approaches are essential for auditors to control the auditing processes of Core Web Vitals effectively:

  • Approach A: Evaluation and identification.
  • Approach B: Debugging and optimizing underperforming web pages.
  • Approach C: Monitoring and developing.

Each approach comes with recommended tools to help site owners and developers keep the process focused.

Approach A - Evaluation and identification

With this approach, developers need to ask themselves the following questions before starting the process:

  • What is the performance of the website?
  • What web pages, devices, and metrics should be prioritized during the auditing process?

Below are the tools Google recommends to handle this approach and perform the auditing for the best results.

CrUX Dashboard: This tool helps developers get an overview of their websites covering Core Web Vitals metrics. It also provides historical trends and user demographic analysis.

Google Search Console: This tool helps developers identify web pages that need their attention based on Core Web Vitals metrics.

Google PageSpeed Insights: This tool helps developers dive deeper into measuring UX metrics on specific web pages.

Approach B - Debugging and optimizing underperforming web pages

With this approach, developers need to ask themselves the following questions before starting the process:

  • What is the ideal way to optimize web pages?
  • What pages should be fixed first?
  • What pages need more planning to be optimized?

Recommended tools of this approach

Lighthouse: This tool is similar to Google PageSpeed Insights, but it is different because you can access it using Chrome DevTools.

Web Vitals Extension: This tool helps developers take measurements during the page interaction.

Chrome DevTools: This tool helps developers see in real-time the impact of web page layout shifts, removing unused code, and making a test for any code changes.

Approach C - Monitoring and developing

With this approach, developers need to monitor the auditing workflows to identify opportunities for improvements.

Recommended tools of this approach

  • CrUX via BigQuery
  • CrUX API
  • PageSpeed Insights API
  • Web-vitals.js
  • Lighthouse-CI

Automate Your Entire Marketing and Sales Processes

As a HubSpot solutions partner, we can work with you every step of the way to automate your entire marketing and sales processes.

Learn More »