optimize Core Web Vitals

Core Web Vitals: Google’s method for optimising web performance

Google recommends a method and tools to audit, improve, and monitor your web performance.

For several years, Google has been encouraging developers to offer fast websites that provide a fluid user experience that is appreciated by Internet users. This desire has been translated into the Page Experience update on June 16, 2021. The goal is to integrate web performance criteria into the algorithms that rank search results. To help developers get good scores over time, Google offers tools and a clear method in three steps.

Step 1: Evaluate the health of the site and identify the critical points.

Google reminds us that the Core Web Vitals Indicators (LCP, FID, and CLS) are built from data recorded from real users of your website. Before optimising these KPIs, you should perform an audit of their performance.

  • Use the CrUX dashboard to assess the health of your site.
  • Use the Search Console to identify pages that need attention.
  • Use PageSpeed Insights to drill down into specific pages.

You can get a snapshot of your site’s performance with the Chrome UX Report (CrUX) data-driven dashboard. It displays Core Web Vitals (LCP, FID, and CLS) on desktop and mobile, as well as other performance KPIs (FCP, TTFB, etc.). Historical data are available to visualise the evolution of scores.

The Search Console also offers a web performance report. Discover the number of web pages to improve on mobile and desktop and identify the types of pages (templates) that require optimization.

PageSpeed Insights goes further, using CrUX and lab data obtained via Lighthouse. The tool designed by Google is useful to identify and understand the technical elements that are causing problems and degrading your Core Web Vitals score.

Step 2: Debug and optimise core web vitals metrics.

The audit is complete; you now have an overview of the health of your site and have identified the types of pages that need your attention.

  • Use Lighthouse to perform an audit at the page or template level.
  • Use the Web Vitals extension to see Core Web Vitals in real time.
  • Use Chrome DevTools (F12) to test the impact of technical changes.

Google recommends separating quick optimizations, which should be done immediately to see immediate results, from those that require more substantial work.

With Lighthouse, you’ll discover interesting opportunities. The tool is able to identify elements that block loading and degrade Core Web Vitals indicators. For each issue identified, technical documentation is provided to help developers improve their code.

The Chrome extension allows you to quickly test a web page, but beware: the tool performs a desktop analysis. To get mobile data, you need to switch to mobile emulation mode. The analysis is not as fine as with CrUX data.

Finally, Chrome’s developer tools help developers on several levels. The Performance tab displays a waterfall graph representing the loading of your page. It helps identify problems and understand CWV scores. You can test the technical changes you make before putting them into production to ensure that they improve the indicators. Also, it is advisable to activate the Layout Shift Regions feature (search for it from the command menu, accessible with the DevTools shortcut Ctrl+Shift+P). This will allow you to view screenshots taken during loading and identify the elements that increment your CLS.

Step 3: Monitor your performance and avoid regressions.

You have audited your site and made technical optimizations to improve your score. Now you need to make sure they have had an impact and put tools in place to avoid regressions in your next deployments.

  • Automate data collection from real users, design dashboards, and set up alerts with CrUX tools (API, Big Query), the PSI API, and web-vitals.js.
  • Use Ligthouse-CI to automate lab testing and prevent regressions on Core Web Vitals caused by other developments.

Google notices that after optimising their performance, most websites experience regression within six months. It is important to implement tools to avoid the degradation of core web resources and maintain a high level of performance.

Peter
Latest posts by Peter (see all)