Tools to measure Core Web Vitals

Sus herramientas de desarrollo favoritas ahora pueden medir los Core Web Vitals.

May 28, 2020

La iniciativa Web Vitals, recientemente anunciada, proporciona una guía unificada sobre las señales de calidad que son esenciales para que todos los sitios brinden una excelente user experience en la web. Estamos felices de anunciar que todas las herramientas populares de Google para desarrolladores web ahora admiten la medición de Core Web Vitals, ayudándole a diagnosticar y solucionar problemas de experiencia de Username más fácilmente. Esto incluye Lighthouse, PageSpeed ​​Insights, Chrome DevTools, Search Console, the measurement tool from web.dev, Chrome Web Vitals extension and a new (!) Chrome UX Report API.

Ahora que la Google search incluye Core Web Vitals como base para evaluar page experience, it is important that these metrics are available and as actionable as possible.

To start your journey optimizing the user experience with Core Web Vitals, try the following workflow:

• Utilice el nuevo informe Core Web Vitals de Search Console para identificar grupos de páginas que requieren atención (según los datos de campo).
• Una vez que haya identificado las páginas que necesitan trabajo, use PageSpeed ​​Insights (con tecnología de Lighthouse y Chrome UX Report) para diagnosticar problemas de laboratorio y de campo en una página. PageSpeed ​​Insights (PSI) está disponible a través de Search Console o puede ingresar una Url en PSI directamente.
• Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get a practical guide on exactly what to correct. The Web Vitals Chrome extension can give you a real-time view of the metrics on the desktop.
• Need a custom Core Web Vitals dashboard? Use the updated CrUX dashboard or the new Chrome UX Reporting API for field data or the PageSpeed ​​Insights API for lab data.
• Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and code labs for optimization, using data from PSI.
• Finally, use Lighthouse CI in pull requests to ensure there are no regressions in Core Web Vitals before implementing a change in production.

With that introduction, let's dive into the specific updates for each tool!

Lighthouse

Lighthouse es una herramienta automatizada de auditoría de sitios web que ayuda a los desarrolladores a diagnosticar problemas e identificar oportunidades para mejorar la experiencia del usuario de sus sitios. Mide varias dimensiones de la calidad de la experiencia del usuario en un entorno de laboratorio, incluido el rendimiento y la accessibility. La última versión de Lighthouse (6.0, lanzada a mediados de mayo de 2020) incluye auditorías adicionales, nuevas métricas y una puntuación de rendimiento recién compuesta.

Lighthouse 6.0 introduce tres nuevas métricas en el informe. Dos de estas nuevas métricas, la pintura de contents más grande (LCP) y el cambio de diseño acumulativo (CLS), son implementaciones de laboratorio de Core Web Vitals y brindan información de diagnóstico importante para optimizar la experiencia del usuario. Dada su importancia para evaluar la experiencia del usuario, las nuevas métricas no solo se miden e incluyen en el informe, sino que también se tienen en cuenta para calcular la puntuación de rendimiento.

The third new metric included in Lighthouse - Total Lock Time (TBT) - correlates well with the First Input Delay (FID) field metric, another Core Web Vitals metric. Following the recommendations provided in the Lighthouse report and optimizing for your scores prepares you to provide the best possible experience for your users.

All products powered by Lighthouse are updated to reflect the latest version, including CI headlight which allows you to easily measure your Core Web Vitals on pull requests before they are merged and deployed.

Para obtener más información sobre las últimas actualizaciones de Lighthouse, consulte nuestra publicación de Blog Novedades de Lighthouse 6.0.

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) reports on the lab and field performance of a page on desktop and mobile devices. The tool provides an overview of how real-world users experience the page (powered by Chrome UX Report) and a set of practical recommendations on how a site owner can improve the page experience (provided by Lighthouse).

PageSpeed ​​Insights and the PageSpeed ​​Insights API They have also been updated to use Lighthouse 6.0 under the hood and now support Core Web Vitals measurement in the lab and field sections of the report. Core Web Vitals are marked with a blue tape as shown below.

While Search Console provides site owners with a great overview of page groups that need attention, PSI helps identify opportunities per page to improve the page experience. In PSI, you can clearly see whether or not your page meets the thresholds for a good experience on all Core Web Vitals at the top of the report, indicated by passes the Core Web Vitals assessment or fails the Core Web Vitals assessment.

Crux

the Chrome UX Report (CrUX) is a public dataset of real data from user experience across millions of websites. Measure the field versions of all Core Web Vitals. Unlike laboratory data, CrUX data comes from registered users in the countryside. With this data, developers can understand the distribution of real-world user experiences on their own or even competitor's websites. Even if you don't have RUMs on your site, CrUX can provide a quick and easy way to evaluate your Core Web Vitals. the CrUX dataset in BigQuery includes detailed performance data for all Core Web Vitals and is available in monthly snapshots at the source level.

The only way to really know how your site is performing for your users is to measure its performance in the field as those users load and interact with it. This type of measurement is commonly known as Real User Monitoring, or RUM for short. Even if you don't have RUMs on your site, CrUX can provide a quick and easy way to evaluate your Core Web Vitals.

Introducing the CrUX API

Today we are pleased to announce the CrUX API, a fast and free way to easily integrate your development workflows with sourcing and quality measurement at the URL level for the following field metrics:

• Paint with larger content
• Cumulative design change
• First entry delay
• First painting with content

Developers can search for an origin or URL and segment the results by different form factors. The API is updated daily and summarizes the data for the previous 28 days (unlike the BigQuery dataset, which is aggregated monthly). The API also has the same relaxed public API quotas that we put in our other API, the PageSpeed ​​Insights API (25,000 requests per day).

Below is a manifestation using the CrUX API to visualize Core Web Vitals metrics with distributions for Okay, Needs improvementand poor:

In future releases, we plan to expand the API to allow access to additional dimensions and metrics from the CrUX dataset.

Revamped CrUX board

The newly redesigned CrUX board allows you to easily track the performance of a source over time, and now you can use it to monitor distributions of all Core Web Vitals metrics. To get started with the panel, check out our tutorial at web.dev.

Hemos introducido una nueva página de inicio de Core Web Vitals para que be aún más fácil ver el rendimiento de su sitio de un vistazo. Agradecemos sus comentarios sobre todas las herramientas de CrUX; para compartir sus pensamientos y preguntas, llámenos al @ChromeUXReport Cuenta de Twitter or Google Group.

Chrome DevTools Performance Dashboard

Debug design change events in the Experience section

Chrome's DevTools Performance the panel has a new Experience section that can help you spot unexpected design changes. This is useful for finding and fixing visual instability issues on your page that contribute to cumulative layout change.

Select a design change to view its details in the Summary tongue. To visualize where the actual change occurred, place the cursor over the Moved from and Moved to fields.

Preparing Debug Interaction with Total Lock Time in Footer

The Total Blocking Time (TBT) metric can be measured in lab tools and is an excellent proxy for first entry delay. TBT measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked long enough to prevent the input response. Performance optimizations that improve TBT in the laboratory should improve FID in the field.

TBT now shows in Chrome DevTools footer Performance dashboard when you measure page performance:

1. press Control + Shift + J (or Command + Option + J on Mac) to open DevTools.
2. Click on the Performance tongue.
3. Click Engrave.
4. Reload the page manually.
5. Wait for the page to load and then stop recording.

For more information, see What's new in DevTools (Chrome 84).

Search Console

The new Core Web Vitals Report in Search Console helps you identify groups of pages on your site that require attention, based on real-world (field) data from CrUX. URL performance is grouped by status, metric type, and URL group (groups of similar web pages).

The report is based on the three Core Web Vitals metrics: LCP, FID, and CLS. If a URL does not have a minimum amount of reporting data for these metrics, it is omitted from the report. Try the new report to get a comprehensive view of your source's performance.

Once you identify a page type that has Core Web Vitals-related issues, you can use PageSpeed ​​Insights to learn about specific optimization tips for representative pages.

web.dev

web.dev/measure allows you to measure your page performance over time, providing a prioritized list of guides and codelabs on how to improve. Your measurement is powered by PageSpeed ​​Insights. The measurement tool now also supports Core Web Vitals metrics, as shown below:

Vitals Web Extension

The Web Vitals extension measures the three Core Web Vitals metrics in real time for (desktop) Google Chrome. This is useful for detecting problems early on during the development workflow and as a diagnostic tool for evaluating the performance of Core Web Vitals while browsing the web.

The extension is now available to install from the Chrome virtual store! We hope you find it useful. We welcome any contribution to improve it, as well as comments on the project. GitHub repository.

Quick highlights

That's a wrap! What can you do next?

• Use Lighthouse on DevTools to optimize your user experience and ensure that you are setting yourself up for success with Core Web Vitals in the field.
• Use PageSpeed ​​Insights to compare the performance of Core Web Vitals in the lab and in the field.
• Try the new Chrome User Experience Report API to easily access your origin and URL performance with Core Web Vitals for the last 28 days.
• Use the Experience section and footer in DevTools Performance panel to drill down and debug against specific Core Web Vitals.
• Use Search Console Core Web Vitals Report for a summary of how your origins are performing in the field.
• Use the Vitals Web Extension to track a page's performance against Core Web Vitals in real time.

Cubriremos más sobre nuestras herramientas Core Web Vitals en web.dev Live en junio. ¡Regístrese para recibir actualizaciones sobre el event!

~ by Elizabeth and Addy, WebPerf Custodians