Since the launch of Core Web Vitals, it’s been a popular topic as people try to understand how to measure, optimize and report on these new metrics as well as whose responsibility it is to make the required optimizations.
Google’s Web.Dev site gives developers a helping hand by recommending a specific workflow to audit a site’s CWV and plan optimization strategies.
The advice comes with a list of tools to use and questions to ask to keep your approach as streamlined and effective as possible.
An ABC Approach To Core Web Vital Audit Workflows
Referred to as the ‘Web Vitals Loop’, auditors are recommended to take the following approaches, which are more advised processes:
- Approach A – Evaluate web health and identify pain points.
- Approach B – Debug and optimize underperforming pages.
- Approach C – Continuously monitor and develop.
Each approach comes with suggested tools and, in some cases, questions to answer:
An Overview of Approach A (Evaluation and Identification)
Developers carrying out the audit are advised to ask themselves the following questions at this point of the audit to keep the process focused:
- What is the performance of the site, and does it require attention?
- Have things gotten better or worse recently?
- What pages, devices, and metrics should be prioritized?
The following tools are recommended to help you perform the highest quality audit possible:
CrUX Dashboard
This tool provides a website overview covering CWV metrics. It also offers historical trends and user demographic reports.
This tool is a good starting point. Once you understand what pages may need optimizing, the next step in the audit involves digging deeper to establish a priority list of page optimizations.
Search Console
Google Search Console can help developers identify pages that require attention based on CWV metrics via the Core Web Vitals report.
The report can help you identify how many pages have a poor user experience, get really granular with performance metrics, understand if any page templates require improvements, and pull off reports focusing on desktop or mobile performance.
PageSpeed Insights
Google’s PageSpeed Insights tool is recommended to dive deeper into measuring UX metrics on specific pages.
Developers can compare individual scores to create a priority list of pages that require CWV optimizations.
Once you’ve completed your research, you can move on to the next phase of the audit.
Related: How to Perform an In-Depth Technical SEO Audit
An Overview of Approach B (Debug and Optimize)
Google recommends developers seek to answer the following questions during this phase of the audit:
- What is the best way for these pages to be optimized?
- Where are the low-hanging fruits that we can fix first?
- What fixes need more planning?
There are three recommended tools to assist with the second section of your Core Web Vitals audit:
Lighthouse
This is the same tool used for PageSpeed Insights, but you can also access it using Chrome DevTools or web.dev/measure.
Through Lighthouse, developers can identify load time optimizations to improve user experience.
Lighthouse is referred to as the tool to identify smaller fixes before moving on to more extravagant optimizations.
Web Vitals Extension
While Lighthouse measures metrics up to the point the page is loaded and doesn’t cover First Input Display (FID), the Web Vitals Extension takes measurements during page interaction.
The tool also covers FID and CLS.
Chrome DevTools
Some of the actions you can take using this tool include seeing in real-time the impact of layout shifts, removing unused code, and testing any code changes.
If any changes are made, you should run approach A again to measure the impact of these updates regularly.
Related: A Technical SEO Guide to Lighthouse Performance Metrics
An Overview of Approach C (Monitor and Develop)
Once you’ve put in the hard work and effort of identifying CWV optimization opportunities and implementing them it’s essential that you continue to monitor performance and carry out further updates where necessary.
Like most things within the digital space, it isn’t a case of performing a task once, ticking it off the list, and then forgetting about it.
According to research carried out by Google, the majority of websites that improve site performance see drops within six months.
Therefore, regression tracking should be reported as well so that you can take steps sooner rather than later to maintain performance and forward plan when additional work may need to be scheduled.
Recommended tools to assist with monitoring and development include:
- CrUX via BigQuery
- CrUX API
- PageSpeed Insights API
- Web-vitals.js
- Lighthouse-CI
Following a strategy like this not only helps with identifying and optimizing underperforming Core Web Vital metrics, it’s a great way to forward plan optimization strategies and ensure other people within your department and the wider company are on the same page.
