Google has been a leading evangelist for the importance of performance on the web and the relationship between performance and engagement. As such, their Web Vitals initiative provides unified guidance for quality signals that are essential to delivering a great user experience on the web.
Core Web Vitals, a subset of the Web Vitals initiative, focuses on three aspects of the user experience – loading, interactivity, and visual stability.
Largest Contentful Paint (LCP) measures loading performance and marks the time of the paint of the largest visual object on the page.
First Input Delay (FID) measures interactivity and marks the time that the page is available for user input.
Cumulative Layout Shift (CLS) measures visual stability. It’s a calculated score that measures the amount of shift on the page that can impact the user experience.
These Core Web Vitals were introduced in 2020 and, as of May 2021, are being used by Google in the algorithm for search result rankings. So it’s important that we understand how to measure these signals so they can be improved upon as needed.
You can learn more about the Core Web Vitals by viewing the videos on the Akamai YouTube channel.
There are several ways to measure Core Web Vitals. We’ll review a few of them here.
- Chrome DevTools
Chrome 88 (Jan 2021) included powerful updates to support Core Web Vitals. This can be found in the Performance tab. To enable, select the Web Vitals check box (red circle) and run a performance audit (green circle).
Note the new Web Vitals lane (yellow box) that contains the new timings. Timings are colored green (good), yellow (needs improvement), and red (poor). The red diamonds represent layout shifts. The green circles are First Paint and Largest Contentful Paint. Hover over the LCP icon to reveal the name and location of the largest contentful paint image.
There is also a lane for Long Tasks, which are javascript executions that exceed 50ms. This is a primary cause of First Input Delay.
The solid blue section represents the component of the long task that is within 50ms. The striped blue section represents the component that exceeds 50ms.
Another feature of DevTools is the Lighthouse section.
Lighthouse runs a barrage of tests against the page and generates a report on how well the page did.
Results include scores for LCP and CLS.
- PageSpeed Insights
One of the quickest and easiest ways to measure CWV is using Google’s PageSpeed Insights. Simply enter the URL of the page of interest and a report will be generated with detailed CWV metrics as well as other performance metrics.
- WebPageTest
The new WebPageTest offers the option to run a Core Web Vitals test.
The resulting report starts with the summary of the three vital metrics.
Additional detail is available for the LCP event.
The filmstrip annotates any layout shifts (yellow highlights) and the LCP (red highlights) on a frame by frame basis.
- WebVitals (Chrome Extension)
A cool extension called “WebVitals” is available in the Chrome Web Store
It reveals metrics for the current page. This can be useful for developers that are making changes to the page and want a quick summary of the impact of the changes.
- Core Web Vitals Annotations (Chrome Extension)
Another extension is the Core Web Vitals Annotations. This extension will overlay annotations on the page to highlight page attributes that had an impact on FID, LCP, and CLS. It also reports the Core Web Vitals metrics for the page, using Google’s recommended color-coded thresholds.
- CLS Visualizer (Chrome Extension)
A final tool is the CLS Visualizer extension. As its name implies, it annotates elements of the page that are shifting, resulting in an increased CLS score.
- mPulse
The tools mentioned above are great for providing Core Web Vitals metrics from a synthetic or single user point of view. But wouldn’t it be great to have this information for all the users hitting your site? That is certainly possible with a real user monitoring tool like mPulse.
mPulse uses javascript injection to collect performance data from all the real users that hit the site and allows you to segment this data in meaningful ways. For example, you can view CWV data for all mobile or desktop users, or by geography, connection speed, browser, or page type. You can even compare CWV data across releases, going back 13 months.
This Core Web Vitals dashboard shows data for the three metrics at the 75th percentile over the past 7 days for all users. The middle section of widgets breaks down each metric by page type. The bottom level widgets show changes over time in a line graph.
Summary
Web Vitals metrics will play an increasingly important role in SEO rankings and should be at the top of the list of metrics to monitor and constantly seek to improve. The tools described above provide a good foundation for monitoring and improving these important metrics.