Flujos de trabajo de las Métricas web esenciales con las herramientas de Google

Combine las herramientas de Google para auditar, mejorar y supervisar su sitio web de manera eficaz.

Las Métricas web esenciales son un conjunto de métricas que evalúan la experiencia del usuario en función de criterios como el rendimiento de carga, la capacidad de respuesta a las entradas del usuario y la estabilidad del diseño.

En esta guía, se explorará un flujo de trabajo para mejorar las Métricas web esenciales de tu sitio web, pero el lugar de inicio dependerá de si recopilas tus propios datos de campo. La ubicación final puede depender de las herramientas de Google que puedas utilizar para diagnosticar y solucionar problemas relacionados con la experiencia del usuario.

Las Métricas web esenciales se miden mejor en el campo

Las Métricas web esenciales se diseñaron específicamente para medir la experiencia de los usuarios con tu sitio web; son métricas centradas en los usuarios. Las herramientas basadas en labs, como Lighthouse, son herramientas de diagnóstico diseñadas para destacar posibles problemas de rendimiento y prácticas recomendadas. Las herramientas basadas en labs se ejecutan en ciertas condiciones predefinidas y es posible que no reflejen las mediciones de las Métricas web esenciales de la vida real que experimentan tus usuarios.

Por ejemplo, Lighthouse es una herramienta basada en labs que ejecuta pruebas con limitación simulada en un entorno simulado de escritorio o móvil. Si bien estas simulaciones de condiciones de red y dispositivos más lentas son útiles para diagnosticar problemas de rendimiento, son solo una parte de la gran variedad de condiciones de red y capacidades de dispositivos, por lo que es posible que no reflejen lo que experimentan los usuarios en tus sitios.

Las herramientas de laboratorio, como Lighthouse, suelen hacer una "carga en frío" de una página web como un visitante totalmente nuevo. A menudo, esta es la carga más lenta, pero, en la vida real, los visitantes pueden tener algunos recursos en caché si ya visitaron el sitio o cuando están navegando por el sitio. Los nuevos visitantes y las herramientas también pueden experimentar el sitio de manera diferente con banners de cookies u otro contenido presente.

En resumen, si bien las herramientas basadas en labs pueden indicar los posibles problemas de rendimiento y ayudarte a depurar y repetir, es posible que no representen cuántos de tus visitantes realmente experimentan tu sitio web. Usa datos de campo para medir el rendimiento en el mundo real y herramientas basadas en labs, como Lighthouse, para diagnosticar cómo mejorarlo. Consulta también la sección Cuándo usar Lighthouse.

Google mide las Métricas web esenciales mediante el Informe sobre la experiencia del usuario en Chrome (CrUX). Este es un conjunto de datos públicos recopilados de usuarios reales de Chrome. Es la columna vertebral de muchas herramientas de Google y de terceros que informan las Métricas web esenciales de un sitio.

Sin embargo, CrUX tiene sus limitaciones. A menudo, puede indicarte cuándo hay un problema, pero suele tener datos insuficientes para decirte por qué.

Recopila tus propios datos de campo si es posible.

El mejor conjunto de datos para mejorar el rendimiento del sitio web en el campo es el que creas. Para comenzar, debes recopilar datos de campo de los visitantes del sitio web. La forma de hacerlo depende del tamaño de tu organización y de si quieres pagar por una solución de terceros o crear una propia.

Es casi seguro que las soluciones pagadas midan las Métricas web esenciales (y otras métricas de rendimiento) y, por lo general, brindan una variedad de herramientas para profundizar en los datos resultantes. En organizaciones grandes con recursos significativos, este puede ser el método preferido.

Sin embargo, es posible que no seas parte de una gran organización ni tengas los medios para costear una solución de terceros. En estos casos, la biblioteca web-vitals de Google te ayudará a recopilar todas las Métricas web. Sin embargo, serás responsable de cómo se informen, almacenen y analicen esos datos.

Si ya usas Google Analytics, pero aún no comenzaste a recopilar tus propios datos de campo, es posible que puedas usar la biblioteca web-vitals para enviar Métricas web recopiladas en el campo a Google Analytics y usar las exportaciones de GA4 de BigQuery para generar informes sobre los datos.

Comprende las herramientas de Google

Independientemente de si recopilas tus propios datos de campo, existen varias herramientas de Google que pueden ser útiles para analizar las Métricas web esenciales. Antes de establecer un flujo de trabajo, una descripción general resumida de cada herramienta puede ayudarte a comprender qué herramientas pueden (o no) ser las mejores para ti.

Informe sobre la experiencia del usuario en Chrome (CrUX)

Como se mencionó anteriormente, CrUX es un conjunto de datos públicos de datos de campo recopilados de un segmento de usuarios reales de Google Chrome de millones de sitios web. Incluye Métricas web esenciales y otras métricas para sitios web con suficiente tráfico.

CrUX está disponible como un conjunto de datos de BigQuery mensual a nivel de origen o como una API diaria a nivel de URL o de origen, siempre y cuando el origen o la URL tengan suficientes muestras en el conjunto de datos CrUX. Los datos de BigQuery también se pueden ver en el panel de CrUX, lo que permite a los sitios revisar las tendencias históricas de su sitio.

Cuándo usar CrUX

Incluso si recopilas tus propios datos de campo, CrUX sigue siendo útil. Aunque CrUX representa un subconjunto de usuarios de Chrome, es útil comparar los datos del campo de tu sitio web para ver cómo se alinea con sus datos de CrUX. Cada uno tiene ventajas y desventajas, que pueden generar diferencias. Si no recopilas ningún dato de campo de tu sitio web, CrUX es especialmente útil para proporcionar una descripción general de alto nivel, siempre que tu sitio web esté representado en su conjunto de datos.

Puedes usar CrUX directamente o usar otra herramienta (incluidas las que se mencionan a continuación). Usar el conjunto de datos de CrUX directamente, ya sea con BigQuery o la API, es útil para exponer datos que no se muestran en otras herramientas (por ejemplo, los datos a nivel del país suelen no estar disponibles en otras herramientas) o para ver las métricas adicionales en CrUX, que, a su vez, suelen no aparecer en otras herramientas.

Cuándo no usar CrUX

CrUX solo representa a los usuarios de Chrome e, incluso, a solo un subconjunto de usuarios de Chrome. Una solución de RUM completa puede incluir más experiencias en Chrome y otros navegadores compatibles con las Métricas web esenciales.

Los sitios web que no reciben suficiente tráfico no se representan en el conjunto de datos de CrUX. Si este es tu caso, tendrás que recopilar tus propios datos de campo para comprender el rendimiento de tu sitio web en el campo, ya que CrUX no será una opción. Como alternativa, tendrás que depender de los datos de lab, pero con las limitaciones de que no sean representativos como se describió anteriormente.

Dado que los datos que proporciona CrUX son un promedio móvil de los 28 días anteriores, no es una herramienta ideal durante el desarrollo, ya que las mejoras tardarán bastante tiempo en reflejarse en el conjunto de datos CrUX.

Por último, como conjunto de datos públicos, CrUX se limita a la cantidad de información que puede poner a disposición y cómo se pueden consultar estos datos. Capturar tus propios datos de RUM te permite recopilar más detalles (por ejemplo, el elemento de LCP) y segmentar más los datos para identificar problemas. ¿Los usuarios que accedieron a sus cuentas experimentan mejores o peores Métricas web esenciales que los usuarios que salieron de sus cuentas? ¿Los usuarios con un LCP lento tienen algún elemento de LCP en particular? ¿Qué interacciones causan valores altos de INP y FID?

PageSpeed Insights (PSI)

PSI es una herramienta que informa datos de campo de CrUX y lab de Lighthouse para una página determinada. Consulta esas secciones individuales para obtener más detalles.

Cuándo usar PSI

PSI es excelente para evaluar el rendimiento de CrUX a nivel de la página o del origen, tanto para los usuarios de dispositivos móviles como para los de computadoras de escritorio. Es una buena opción para una descripción general inicial de las Métricas web esenciales de una página o sitio. También te permite ver datos de Métricas web esenciales de otros sitios, como la competencia.

PSI también proporciona datos de Lighthouse, que brindan recomendaciones útiles para mejorar tus Métricas web esenciales, si las métricas se alinean. Cuando no se alinean estas opciones, es posible que las recomendaciones de Lighthouse sean menos relevantes.

Dado que Lighthouse se ejecuta desde el servidor, puede formar un modelo de referencia más coherente que ejecutar Lighthouse desde Herramientas para desarrolladores.

Cuándo no usar PSI

PSI solo está disponible para URLs públicas. No se puede usar en sitios de desarrollo que no sean de acceso público.

Los datos de CrUX solo están disponibles cuando los sitios cumplen con ciertos criterios de elegibilidad, incluidos los umbrales de popularidad de sitios. PSI es menos útil cuando los datos de CrUX no están disponibles para un origen o una página, ya que solo puede mostrar los datos del lab de Lighthouse en estos casos.

Del mismo modo, si solo tienes datos de CrUX a nivel de origen en lugar de la URL específica que se está probando, esto también limita la utilidad de correlacionar los datos del campo a nivel de origen con los diagnósticos del lab a nivel de la página. Tener los datos del campo a nivel de origen sigue siendo información muy útil como resumen del rendimiento del sitio, y las auditorías de Lighthouse pueden ayudar, pero se debe tener mucho cuidado en este caso.

Por último, cuando los datos a nivel de la página están disponibles en CrUX, pero difieren de los datos del lab de Lighthouse, las recomendaciones de Lighthouse pueden tener un valor limitado. Esto puede ocurrir, en especial, con problemas de CLS posteriores a la carga y con las Métricas web esenciales de interactividad (INP y FID) en las que las auditorías basadas en labs son menos útiles.

Search Console

Search Console mide el tráfico y rendimiento de búsqueda de tu sitio, incluidas las Métricas web esenciales. Solo está disponible para los propietarios de sitios que confirmaron su propiedad.

Una función valiosa de Search Console es que agrupa páginas similares (por ejemplo, páginas que usan la misma plantilla) en una sola evaluación grupal. Search Console también incluye un informe de Métricas web esenciales basado en datos de campo de CrUX.

Cuándo usar Search Console

Search Console es ideal tanto para desarrolladores como para quienes no son desarrolladores a fin de evaluar el rendimiento de las páginas y la búsqueda de formas que otras herramientas de Google no lo hacen. Su presentación de los datos de CrUX y la agrupación de páginas por similitud ofrece información novedosa sobre cómo las mejoras en el rendimiento afectan a categorías completas de páginas.

Cuándo no usar Search Console

Es posible que Search Console no sea adecuado para proyectos que usan diferentes herramientas de terceros que agrupan páginas por similitudes o si un sitio web no está representado en el conjunto de datos de CrUX.

La agrupación de páginas también puede ser un poco confusa cuando las páginas de ejemplo de un grupo tienen características diferentes a las del resto del grupo; por ejemplo, si el grupo falla en determinadas Métricas web esenciales en general, pero todas las páginas de ejemplo parecen aprobar las mismas Métricas web esenciales. Esto puede suceder cuando un grupo contiene páginas de cola larga o pocas visitas que pueden tardar más en cargarse, ya que es menos probable que se almacenen en caché. Cuando hay suficientes volúmenes de estas páginas en la cola larga, pueden influir en la tasa de aprobación general del grupo.

Faro

Lighthouse es una herramienta de lab que ofrece oportunidades específicas para mejorar el rendimiento de las páginas. Los flujos de usuarios de Lighthouse también permiten a los desarrolladores crear flujos de interacción de secuencias de comandos para probar el rendimiento más allá de la carga de la página.

Lighthouse-CI es una herramienta relacionada que ejecuta Lighthouse durante la compilación y la implementación de proyectos para ayudar con las pruebas de regresión de rendimiento. Presenta un informe de Lighthouse junto con las solicitudes de extracción y hace un seguimiento de las métricas de rendimiento a lo largo del tiempo.

Cuándo usar Lighthouse

Lighthouse es excelente para encontrar oportunidades para mejorar el rendimiento durante el desarrollo en entornos locales y de etapa de pruebas. Lighthouse CI es igualmente útil en las fases de compilación e implementación en entornos de etapa de pruebas y producción, en los que se necesitan pruebas de regresión de rendimiento para preservar las buenas experiencias del usuario.

Cuándo no usar Lighthouse

Lighthouse (o Lighthouse CI) no sustituye los datos de campo. Lighthouse es principalmente una herramienta de diagnóstico que enumera posibles problemas y prácticas recomendadas a partir de una carga de página predefinida. Es posible que las recomendaciones que muestra no siempre coincidan con el rendimiento que experimentan los usuarios.

Si bien Lighthouse se puede usar para diagnosticar sitios de producción a través de herramientas como PageSpeed Insights, es ideal usar Lighthouse en entornos de desarrollo y de integración continua para abordar problemas de rendimiento antes de que lleguen a producción.

Extensión de Métricas web

La extensión de Chrome de Métricas web es una herramienta de diagnóstico que muestra las métricas de Métricas web esenciales mientras navegas por la Web. También incluye datos de CrUX de la página actual (si están representados en el conjunto de datos CrUX) y proporciona información de depuración para ayudarte a identificar problemas de rendimiento de las Métricas web esenciales.

Cuándo usar la extensión de Métricas web

Cualquier persona puede usar la extensión de Métricas web esenciales para evaluar las Métricas web esenciales de una página en todos los puntos de su ciclo de vida. Es útil como una transmisión en vivo vista del rendimiento a medida que interactúas con la página para intentar descubrir problemas de rendimiento, en especial los problemas posteriores a la carga que podrías ver con las métricas CLS e INP.

Cuándo no usar la extensión de Métricas web

La extensión de Métricas web no es una evaluación integral del rendimiento de la página. Además, las métricas que informa dependen en gran medida del entorno en el que se ejecuta, y los desarrolladores suelen tener máquinas con mejor potencia o acceso a redes más rápidas.

El panel Performance de las Herramientas para desarrolladores de Chrome

Las herramientas para desarrolladores de Chrome son una colección de herramientas de desarrollo integradas en el navegador, incluido el panel Rendimiento. El panel Rendimiento es una herramienta de lab que genera un perfil de toda la actividad de la página durante la carga de la página o un período registrado. Ofrece estadísticas detalladas de todo lo que observa en todas las dimensiones, como la actividad de red, renderización, pintura y secuencia de comandos, además de las Métricas web esenciales de una página.

Cuándo usar el Panel de rendimiento

Los desarrolladores deben usar el panel Rendimiento durante el desarrollo para obtener estadísticas detalladas sobre el rendimiento de la página. Esto es particularmente útil para depurar problemas de capacidad de respuesta que afecten el FID o el INP. Una vez que se identifica una interacción de respuesta deficiente y se puede repetir, el Panel de rendimiento puede proporcionar una gran cantidad de datos sobre lo que sucede en el navegador para ayudar a comprender el problema, desde el bloqueo del subproceso principal hasta las pilas de llamadas de JavaScript y el trabajo de renderización.

Cuándo no usar el Panel de rendimiento

El panel Rendimiento es una herramienta para desarrolladores que solo proporciona datos de labs. No reemplaza los datos de campo. Contiene mucha información de depuración, pero, por eso, puede ser difícil de entender para los desarrolladores principiantes o quienes no usan roles de desarrollador.

Un flujo de trabajo de tres pasos para garantizar que las Métricas web esenciales de tu sitio web se mantengan en buen estado.

Cuando se trabaja para mejorar la experiencia del usuario, lo mejor es pensar en el proceso como un ciclo continuo. Para mejorar las Métricas web esenciales y otras métricas de rendimiento, podrías usar el siguiente enfoque:

  1. Evaluar el estado del sitio web e identificar las dificultades.
  2. Depurar y optimizar.
  3. Supervisa con herramientas de integración continua para detectar y evitar regresiones.
El proceso de tres pasos, representado como un ciclo continuo. El primer paso dice "Evaluar el estado del sitio web e identificar los puntos de pintura", el segundo "Depurar y optimizar" y el tercero, "Supervisar y continuar el desarrollo".
Flujo de trabajo de tres pasos
.

Paso 1: Evaluar el estado del sitio web e identificar oportunidades de mejora

Lo mejor es comenzar con datos de campo para evaluar el estado del sitio web.

  1. Usa PageSpeed Insights para ver las métricas generales de la experiencia en las Métricas web esenciales sobre el origen y la información específica de una URL individual.
  2. Search Console puede ser útil para identificar páginas que necesitan mejoras en caso de que su función de agrupación de páginas sea útil para tu sitio.
  3. Si tienes datos de RUM, entonces esa suele ser la mejor opción para poder identificar páginas o segmentos de tráfico específicos con problemas.

Ya sea que analices datos de campo que recopiles tú mismo o datos de CrUX, este primer paso es fundamental. Si no estás recopilando datos de campo, los datos de CrUX pueden ser suficientes para guiarte, siempre y cuando tu sitio web esté representado en el conjunto de datos.

Cómo analizar el rendimiento del sitio con PageSpeed Insights

Cómo PageSpeed Insights representa los datos de CrUX para las Métricas web esenciales de una URL. Cada una de las Métricas web esenciales se muestra por separado, a la vez que se agrupa cada Métrica web esencial en “Buena”, “Requiere mejoras” y “Deficiente”. umbrales de los últimos 28 días.
Cómo analizar el rendimiento del sitio con PageSpeed Insights

PageSpeed Insights muestra los datos de CrUX de los últimos 28 días de la experiencia del usuario en el percentil 75. Esto significa que, si el 75% de las experiencias de los usuarios cumplen con el umbral establecido para una métrica determinada, la experiencia se considera "buena".

Si tienes una página específica en mente para consultar el rendimiento, utilízala. Para obtener una vista general de un sitio cuando comiences a optimizarlo por primera vez, te recomendamos comenzar con la página principal, ya que suele ser una de las páginas más populares en muchos sitios.

Inicialmente, concéntrate en la sección sobre las experiencias de tus usuarios reales de PSI. Verás hasta cuatro vistas de los datos: en un dispositivo móvil y en una computadora de escritorio, para la URL ingresada y el origen completo. Compáralos y observa sus diferencias. Por lo general, los dispositivos móviles tienen menos rendimiento que las computadoras de escritorio, ya que son un dispositivo con recursos limitados que opera en condiciones de red potencialmente menos estables. Si los datos de la URL y el origen son significativamente diferentes, intenta comprender por qué: las páginas principales suelen ser las primeras que se visitan (es decir, una página de destino), de modo que pueden ser más lentas que el origen, en comparación con el hecho de que los usuarios de origen se encarguen de no tener una memoria caché del navegador preparada. Es probable que las páginas siguientes se carguen más rápido, ya que los elementos compartidos se almacenarán en caché, lo que reducirá los datos agregados a nivel del origen.

PSI también muestra las tres Métricas web esenciales (LCP, CLS y FID) y la métrica INP pendiente, además de las métricas de diagnóstico TTFB y FCP. ¿Alguna de las Métricas web esenciales está fallando? ¿En qué medida falla? Esto te indicará dónde debes concentrar tus esfuerzos.

Comprende la relación entre estos números, especialmente para el LCP. Si el LCP es lento, como en este ejemplo, analiza el TTFB y el FCP, que son eventos importantes de esa métrica. En este ejemplo, tenemos un TTFB de 1.8 segundos, lo que hará que sea muy difícil alcanzar el umbral recomendado de 2.5 segundos para un buen LCP. Esto sugiere un backend lento (problemas con el servidor o falta de CDN), redes más lentas o redireccionamientos que retrasan los primeros bytes HTML. Para obtener más información, consulta la guía sobre la optimización de TTFB. Además, el FCP tarda otro segundo, lo que puede indicar que las redes son más lentas. En este ejemplo, el LCP no es mucho después del FCP, lo que sugiere que el recurso de LCP está bien optimizado una vez que se carga la página.

Para CLS, observa las puntuaciones de CrUX CLS y Lighthouse CLS para ver si se trata de un problema de CLS de carga (que Lighthouse detectará y asesorará) o un problema de CLS posterior a la carga que Lighthouse no detectará. Para obtener más información, consulta la guía de CLS de Optimize.

Para la capacidad de respuesta, consulta las puntuaciones de INP y FID. Observa las auditorías TBT en Lighthouse para ver si se está procesando mucho procesamiento de JavaScript durante la carga inicial de la página, lo cual probablemente afecte a INP. INP puede ser una métrica difícil de mejorar, por lo que debes consultar la guía para optimizar INP para obtener más información.

Identifica las páginas con bajo rendimiento en Search Console

Informe de Métricas web esenciales de Search Console. El informe se divide en categorías de computadoras de escritorio y dispositivos móviles, con gráficos de líneas que detallan la distribución de páginas con Métricas web esenciales en "Buena", "Requiere mejoras" y "Deficiente". categorías a lo largo del tiempo.
Identifica las páginas con bajo rendimiento en Search Console

Si bien PSI es útil cuando quieres probar una URL específica o el sitio en su totalidad, Search Console puede ayudarte a orientar tus iniciativas hacia tipos de páginas específicos. Esto es particularmente útil si muchas páginas comparten temas o tecnologías en común y Search Console puede identificarlos correctamente.

En el informe de Métricas web esenciales de Search Console, se muestra el panorama general del rendimiento de tu sitio web, pero también puedes desglosar las páginas específicas que requieran atención. Con Search Console, también puedes hacer lo siguiente:

  • Identifica los grupos de páginas individuales que necesitan mejoras y aquellos que proporcionan una buena experiencia del usuario.
  • Obtén datos detallados sobre el rendimiento por URL agrupadas por estado, métrica y grupos de páginas web similares (como las páginas de detalles de productos en un sitio web de comercio electrónico).
  • Obtén informes detallados que agrupan las URLs en cada categoría de calidad de la experiencia del usuario para dispositivos móviles y computadoras.

Una vez que tengas que consultar algunas páginas específicas, puedes usar PSI como se explicó anteriormente para comprender mejor los problemas de esas páginas.

Paso 2: Depura y optimiza

En el paso 1, deberías haber identificado páginas que requieren mejoras de rendimiento y cuáles de las métricas web esenciales deseas mejorar. Puedes usar las herramientas de Google para obtener más información y comprender la causa raíz e identificar el problema.

  1. Ejecuta una auditoría de Lighthouse para obtener orientación a nivel de página.
  2. Usa la extensión de Métricas web para analizar las Métricas web esenciales en tiempo real.
  3. Usa el panel Performance de las Herramientas para desarrolladores de Chrome para depurar los problemas de rendimiento y probar los cambios en el código.

Para obtener orientación más detallada, consulta estas guías:

Descubre oportunidades con Lighthouse

PageSpeed Insights ejecuta Lighthouse por ti, pero para el desarrollo local también es posible ejecutar Lighthouse desde las Herramientas para desarrolladores de Chrome, lo que es útil para validar las correcciones de manera local.

Informe de Lighthouse en Herramientas para desarrolladores de Chrome. El informe desglosa las puntuaciones en cinco categorías y se centra en las métricas de rendimiento con los resultados en la parte inferior de la ventana del informe.
Informe de Lighthouse

Un punto clave es validar que la auditoría de Lighthouse replique los problemas que intentas resolver (por ejemplo, problemas lentos de LCP o CLS). De manera predeterminada, Lighthouse solo evalúa la experiencia del usuario durante la carga de la página. Como es una herramienta de lab, también excluye INP y FID a favor de TBT.

Cuando las métricas de Lighthouse sugieren un problema similar al que estás tratando de resolver, la gran cantidad de información en sus auditorías puede ayudar a identificar problemas y sugerir soluciones.

Puedes filtrar las auditorías para mostrar solo las Métricas web esenciales que te interesen y así enfocarte en las correcciones de problemas relacionados con una métrica específica:

Opciones de filtro de Lighthouse para métricas clave
Opciones de filtro de Lighthouse

Para el FID y el INP, usa las auditorías TBT para identificar problemas que podrían afectar esas métricas, pero ten en cuenta que, sin interacciones, Lighthouse tiene limitaciones en cuanto a la cantidad de diagnóstico que puede diagnosticar.

Realiza análisis en tiempo real con la extensión de Métricas web

La extensión de Chrome de Métricas web esenciales muestra las Métricas web esenciales en tiempo real durante la carga de la página y mientras navega por ella. Debido a esto, puede capturar el FID y el INP, así como los cambios de diseño que ocurren después de la carga. Las opciones de depuración muestran información más detallada sobre cada métrica:

Registro de la consola de la extensión de Métricas web que muestra el objetivo de INP, el tipo de evento y el desglose
Registro de la consola de la extensión de Métricas web

Es mejor pensar en la extensión de Métricas web como una herramienta de verificación en busca de problemas de rendimiento, no como una herramienta de depuración completa: es una tarea para el panel Rendimiento de las Herramientas para desarrolladores de Chrome.

Cómo desglosar los datos con el panel Rendimiento

El panel Performance de las Herramientas para desarrolladores de Chrome perfila el comportamiento de todas las páginas durante un período registrado.

Seguimiento del panel de rendimiento de Herramientas para desarrolladores de Chrome que muestra un gráfico tipo llama con una tarea larga destacada
Seguimiento del panel de rendimiento de las Herramientas para desarrolladores de Chrome

Los tiempos de teclas, como el LCP, se muestran en el segmento de Tiempos. Haz clic en estos botones para obtener más detalles.

El segmento Layout Shifts destaca los cambios de diseño y, si haces clic en ellos, se proporcionan más detalles sobre los elementos que cambiaron para depurar CLS.

Las tareas largas (que pueden provocar problemas de INP y FID) también se destacan con triángulos rojos.

Estas funciones, así como la información que se incluye en otras partes del panel Rendimiento, pueden ayudarte a determinar si las correcciones tienen algún efecto en las Métricas web esenciales de una página.

Depura Core Web Vitals en el campo

Las herramientas del lab no siempre pueden identificar la causa de todos los problemas de Métricas web esenciales que afectan a tus usuarios. Este es uno de los motivos por los que es tan importante recopilar tus propios datos de campo, ya que tiene en cuenta factores que no se pueden usar en los datos de lab.

Consulta Rendimiento de la depuración en el campo para obtener más información.

Paso 3: Supervisa los cambios

Una colección de íconos de herramientas de Google. De izquierda a derecha, los íconos representan “CrUX en BigQuery”, “API de CrUX”, “API de PSI”, “web-vitals.js”, con “Lighthouse CI” en el extremo derecho.
Herramientas de Google para supervisar los cambios

Una vez que hayas corregido los problemas, asegúrate de que tengan el efecto necesario y que los problemas nuevos no interrumpan tus Métricas web esenciales. Esto requiere supervisar los problemas de rendimiento como parte del flujo de trabajo del desarrollador para evitar que estos problemas se lancen a producción, y supervisar los datos de campo con regularidad para garantizar que así sea.

Supervisar las solicitudes de rendimiento en entornos de integración continua (CI)

Lighthouse-CI te permite ejecutar automáticamente auditorías de Lighthouse sobre confirmaciones de código para evitar que las regresiones de rendimiento ingresen código. Esto puede verificar los tiempos de rendimiento (que están sujetos a variabilidad) o solo las auditorías de rendimiento, como una herramienta de linting para evitar prácticas incorrectas en el código.

Si bien debes intentar detectar y solucionar todos los problemas de rendimiento antes de que lleguen a producción, es esencial supervisar tus datos de campo usando RUM para encontrar cualquier problema que se filtre. Hay muchos productos comerciales de RUM disponibles que pueden ayudarte con esto. La biblioteca de JavaScript web-vitals puede automatizar la recopilación de datos de campo de un sitio web y, de manera opcional, usar estos datos para potenciar paneles personalizados y sistemas de alertas.

En el caso de los sitios sin una solución de RUM, puedes usar el panel de CrUX como un análisis básico de tendencias de los datos de campo. Informa lo siguiente para los sitios en CrUX:

  • Descripción general del sitio, que segmenta las Métricas web esenciales en tipos de dispositivos móviles y computadoras de escritorio.
  • Tendencia histórica por tipo de métrica, que es una distribución de las métricas a lo largo del tiempo para cada versión mensual disponible de datos del informe de CrUX.
  • Datos demográficos del usuario, que muestran la distribución de las vistas de página en todo un origen para los usuarios de cada segmento demográfico, incluidos el dispositivo y los tipos de conexión efectiva
El panel de CrUX desglosa los LCP, FID y CLS en categorías para computadoras de escritorio y dispositivos móviles, y cada categoría muestra la distribución de los valores que se encuentran dentro de “Bueno”, “Requiere mejoras” y "Deficiente" umbrales del mes anterior.
Panel de CrUX
.

El panel de CrUX se basa en el conjunto de datos CrUX de BigQuery, que se actualiza una vez al mes. Este puede ser un buen recordatorio para que revises periódicamente tus Métricas web esenciales.

Conclusión

Garantizar experiencias del usuario rápidas y satisfactorias requiere una mentalidad centrada en el rendimiento y la adopción de un flujo de trabajo para garantizar el progreso. Con las herramientas y los procesos adecuados para auditar, depurar y supervisar, puedes crear excelentes experiencias del usuario y mantenerte dentro de los umbrales definidos para tener buenas Métricas web esenciales.