With the launch of Core Web Vitals, everyone within the orbit of digital experiences has been scrambling to understand what they are and how to optimize them.
To give these stakeholders a helping hand, Google – through its Web.Dev site – provides software developers support by pointing them towards specific workflows to audit a website’s Core Web Vitals as well as strategies for optimization.
Let’s take a look at it!
The ABC Approach
This is the strategy that Google recommends anyone invested in a website to take a look at. It is also referred to as the Web Vitals Loop.
Approach A: This involves evaluating the web health as well as identifying particular pain points.
Approach B: Then the focus goes into debugging underperforming pages as well as optimizing those pages.
Approach C: Afterwards, continuously monitor and develop with the focus on enhancing the Core Web Vitals, or looping back to Approach A.
This is a summary of the ABC Approach. But we can also zoom in on the approach and look at A, B, and C in greater detail.
Approach A
For those that are managing the audit, it is recommended that they first ask themselves a handful of questions in order to keep the process as focused as possible. These questions include “does the website performance need attention?”, “have the website’s metrics improved or worsened over the last few months?”, and “what webpages and metrics ought to be prioritized?”
To aid in the answering of these questions, there are a few online tools that developers can use to carry out a quality audit.
CrUX Dashboard: this website gives an overview of all the Core Web Vitals metrics, as well as providing historical trends and reports on user demographics.
Search Console: Google’s own Search Console helps devs to identify those pages that are desperate need of attention – based on the results of their Core Web Vitals.
PageSpeed Insights: this tool is ideal for diving deeper into the broader user experience metric landscape. Here devs can compare individual scores in order to create a list of priorities for pages that require Core Web Vital care.
Approach B
Once you’re done with the research stage, you can move on to approach B – debugging and optimizing. Approach B also comes with a bundle of questions to focus on what needs to be done. Questions such as “what’s the best way to optimize each page?”, “what are the easier issues we can fix first?”, and “Which pages need more planning to optimize?”
In terms of tools, there are good websites to aid you in the process of Approach B. Websites such as the following.
Lighthouse: this online tool can be utilized for the same purposes as PageSpeed Insights. Yet you can also access it through Chrome DevTools. Using Lighthouse, dev can discover optimizations for loading time in order to use the user experience. Also, Lighthouse is considered the tool to identify smaller issues.
Web Vitals Extension: this online tool actually measures First Input Delay, whereas most other tools don’t, as well as covers the other two Core Web Vitals.
Chrome DevTools: this tool is useful for viewing the real-time impact of layout shifts, as well as testing code changes and removing unused code. And if or when changes are implemented, simply revisit Approach A to measure their impact.
Approach C
After identifying the pain points and optimizing the performance of the Core Web Vitals of pages, it’s important to continue monitoring the performance of their pages and conduct further updates.
It’s easy to keep your eyes off the ball during Approach C, yet it’s so important to constantly analyze metric performance. That’s because research by Google found that the majority of websites that improve site performance see performance decreases within 6 months.
There are great tools to help in monitoring your page performances, such as: CrUX via BigQuery, CrUX API, PageSpeed Insights API, Web-vitals.js, and Lighthouse-CI.
PS: ArganoUV is one of the world’s leading Core Web Vitals agencies. Contact us to see how we can work together.
