Combina las herramientas de Google para auditar, mejorar y supervisar tu sitio web de forma eficaz.
Publicado: 28 de mayo de 2020
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 la entrada del usuario y la estabilidad del diseño.
En esta guía, se explorará un flujo de trabajo para mejorar las Core Web Vitals de tu sitio web, pero el punto de partida de ese flujo de trabajo dependerá de si recopilas tus propios datos de campo. El punto final puede depender de cuáles de las herramientas de Google te resulten útiles para diagnosticar y solucionar problemas de la experiencia del usuario.
Las Métricas web esenciales se miden mejor en el campo
Las Métricas web esenciales están diseñadas específicamente para medir cómo los usuarios experimentan tu sitio web: son métricas centradas en el usuario. Las herramientas basadas en labs, como Lighthouse, son herramientas de diagnóstico que destacan posibles problemas de rendimiento y prácticas recomendadas. Las herramientas de laboratorio se ejecutan en condiciones predefinidas y es posible que no reflejen las mediciones de Core Web Vitals que experimentan los usuarios en la vida real.
Por ejemplo, Lighthouse es una herramienta de laboratorio que ejecuta pruebas con una limitación simulada en un entorno simulado de escritorio o dispositivo móvil. Si bien estas simulaciones de condiciones de red y dispositivos más lentos son útiles cuando se intenta diagnosticar problemas de rendimiento, son solo una parte de la gran variedad de condiciones de red y capacidades de los dispositivos, por lo que es posible que no reflejen lo que experimentan los usuarios en tus sitios.
Las herramientas basadas en el laboratorio, como Lighthouse, también suelen realizar una "carga en frío" de una página web como un visitante totalmente nuevo. Esta suele ser la carga más lenta, pero, en la vida real, es posible que los visitantes tengan algunos recursos almacenados en caché si ya visitaron el sitio antes o cuando navegan por él. Los visitantes nuevos y las herramientas también pueden experimentar el sitio de manera diferente con los banners de cookies o con otro contenido que se les presente.
En resumen, si bien las herramientas basadas en el laboratorio pueden dar una indicación de los posibles problemas de rendimiento y ayudarte a depurar y realizar iteraciones, es posible que no representen la cantidad de visitantes que realmente experimentan tu sitio web. Usa datos de campo para medir el rendimiento en el mundo real y herramientas basadas en el laboratorio, como Lighthouse, para diagnosticar cómo mejorarlo. Consulta también la sección Cuándo usar Lighthouse.
Google mide las Métricas web esenciales a través del 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 base de muchas herramientas de Google y de terceros que informan las Métricas web esenciales de un sitio.
Sin embargo, el CrUX tiene sus limitaciones. A menudo, puede indicarte cuándo hay un problema, pero suele tener datos insuficientes para indicarte por qué.
Si es posible, recopila tus propios datos de campo
El mejor conjunto de datos para mejorar el rendimiento del sitio web en el campo es el que tú creas. Esto comienza con la recopilación de datos de campo de los visitantes de tu 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 la tuya propia.
Las soluciones pagadas casi con certeza medirán las Métricas web esenciales (y otras métricas de rendimiento) y, por lo general, proporcionarán 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 formes parte de una organización grande o que no tengas los medios para pagar una solución de terceros. En estos casos, la biblioteca web-vitals de Google te ayudará a recopilar todas las Web Vitals. Sin embargo, serás responsable de cómo se informan, almacenan y analizan 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 de web-vitals para enviar las Web Vitals recopiladas en el campo a Google Analytics y usar las exportaciones de BigQuery de GA4 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 Core Web Vitals. Antes de establecer un flujo de trabajo, una descripción general de alto nivel de cada herramienta puede ayudarte a comprender cuáles pueden ser las mejores para ti y cuáles no.
Informe sobre la experiencia del usuario en Chrome (CrUX)
Como se mencionó anteriormente, CrUX es un conjunto de datos públicos de campo recopilados de un segmento de usuarios reales de Google Chrome de millones de sitios web. Incluye las métricas de Core Web Vitals y otras métricas para sitios web con suficiente tráfico.
El CrUX está disponible como un conjunto de datos de BigQuery mensual a nivel del origen o como una API diaria a nivel de la URL o del origen, siempre que una URL o un origen tengan suficientes muestras en el conjunto de datos del CrUX. Los datos de CrUX están disponibles a través de varias herramientas de CrUX para el acceso programático y las herramientas visuales que usan los usuarios.
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 de campo de tu sitio web para ver cómo se alinean con sus datos de CrUX. Cada uno tiene ventajas y desventajas, lo que puede generar diferencias. Si no recopilas ningún dato de campo para tu sitio web, CrUX es especialmente valioso para proporcionar una descripción general de alto nivel, siempre que tu sitio web esté representado en su conjunto de datos.
Puedes usar el CrUX directamente o con 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 de país no suelen estar disponibles en otras herramientas, o para ver las métricas adicionales en CrUX que, de nuevo, no suelen aparecer en otras herramientas.
Cuándo no usar CrUX
CrUX solo representa a los usuarios de Chrome y, aun así, solo a un subconjunto de ellos. Una solución de RUM completa puede incluir más experiencias en Chrome y otros navegadores que admitan las métricas de Web Vitals.
Los sitios web que no reciben suficiente tráfico no se representan en el conjunto de datos de CrUX. Si este es tu caso, deberás recopilar tus propios datos de campo para comprender el rendimiento de tu sitio web, ya que CrUX no será una opción. Como alternativa, deberás depender de los datos de lab, pero con las limitaciones de que podrían no ser representativos, como se describió anteriormente.
Dado que los datos que proporciona CrUX son un promedio móvil de los últimos 28 días, no es una herramienta ideal durante el desarrollo, ya que las mejoras tardarán bastante tiempo en reflejarse en el conjunto de datos de CrUX.
Por último, como conjunto de datos público, el CrUX está limitado en cuanto 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 LCP) y segmentar más los datos para identificar problemas. ¿Los usuarios conectados experimentan mejores o peores Core Web Vitals que los que no accedieron? ¿Los usuarios con un LCP lento tienen un elemento de LCP en particular? ¿Qué interacciones causan valores altos de FID y de INP?
PageSpeed Insights (PSI)
PSI es una herramienta que informa datos de campo de CrUX y de laboratorio 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 página o de origen, tanto para usuarios de dispositivos móviles como de computadoras de escritorio. Es una buena opción para obtener una descripción general inicial de las Métricas web esenciales de una página o un sitio. También te permite ver los datos de Core Web Vitals de otros sitios, como los de la competencia.
PSI también proporciona datos de Lighthouse, que ofrece recomendaciones útiles para mejorar tus Core Web Vitals, si las métricas se alinean. Cuando no se alinean, las recomendaciones de Lighthouse pueden ser menos pertinentes.
Como Lighthouse se ejecuta desde el servidor, puede formar un modelo de referencia más coherente que si se ejecutara desde las 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 del sitio. PSI es menos útil cuando los datos de CrUX no están disponibles para una página o un origen, ya que, en estos casos, solo puede mostrar los datos de laboratorio de Lighthouse.
Del mismo modo, si solo tienes datos de CrUX a nivel del origen en lugar de la URL específica que se está probando, esto también limita su utilidad para correlacionar los datos de campo a nivel del origen con los diagnósticos de laboratorio a nivel de la página. Tener los datos de campo a nivel del origen sigue siendo información muy útil para tener un resumen del rendimiento del sitio, y las auditorías de Lighthouse pueden ayudar, pero en este caso se debe tener más precaución.
Por último, cuando los datos a nivel de la página están disponibles en CrUX, pero difieren de los datos de laboratorio de Lighthouse, las recomendaciones de Lighthouse pueden tener un valor limitado. Esto puede suceder, en particular, con los problemas de CLS posteriores a la carga y con las Core Web Vitals de interactividad (FID e INP), en las que las auditorías basadas en el lab son menos útiles.
Search Console
Search Console mide el tráfico de la Búsqueda y el rendimiento de tu sitio, incluidas las Métricas web esenciales. Solo está disponible para los propietarios de sitios que confirmaron su propiedad del sitio.
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 de grupo. 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 personas que no lo son, ya que permite evaluar el rendimiento de la búsqueda y de la página de formas que otras herramientas de Google no permiten. Su presentación de los datos de CrUX y la agrupación de páginas por similitud ofrece una nueva perspectiva de cómo las mejoras de rendimiento afectan a categorías enteras 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 similitud 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 de las del resto del grupo. Por ejemplo, si el grupo no cumple con las Core Web Vitals en general, pero las páginas de ejemplo parecen cumplir con las mismas Core Web Vitals. Esto puede suceder cuando un grupo contiene páginas de cola larga o que se visitan con poca frecuencia, que pueden tardar más en cargarse, ya que es menos probable que se almacenen en caché. Cuando hay volúmenes suficientes de estas páginas en la cola larga, pueden influir en el porcentaje de aprobación general del grupo.
Faro
Lighthouse es una herramienta de laboratorio que proporciona oportunidades específicas para mejorar el rendimiento de la página. Los flujos de usuarios de Lighthouse también permiten que los desarrolladores creen secuencias de comandos para los flujos de interacción con el objetivo de realizar pruebas de rendimiento más allá de la carga de la página.
Lighthouse-CI es una herramienta relacionada que ejecuta Lighthouse durante las compilaciones y las implementaciones 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 de mejora del 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 de los usuarios.
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 los posibles problemas y las 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 tus usuarios.
Si bien Lighthouse se puede usar para diagnosticar sitios de producción a través de herramientas como PageSpeed Insights, lo ideal sería usarlo en entornos de desarrollo y de integración continua para abordar los problemas de rendimiento antes de que lleguen a la producción.
Las auditorías que proporciona Lighthouse también están disponibles a través de las "estadísticas" en el panel Rendimiento de las Herramientas para desarrolladores de Chrome, que proporciona un análisis más detallado del rendimiento de una página.
El panel Rendimiento en 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 consta de dos "modos":
Cuando se abre el panel Rendimiento por primera vez, una pantalla de Métricas en tiempo real proporciona la métrica actual de Core Web Vitals, con la capacidad de importar datos de campo de CrUX. Es útil como una vista "en vivo" 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 de CLS y INP.
En segundo lugar, el panel Rendimiento permite que los desarrolladores capturen un perfil (o seguimiento) de toda la actividad de la página durante la carga de la página o un período registrado. Esta vista ofrece estadísticas detalladas sobre todo lo que observa en dimensiones como la actividad de red, renderización, pintura y secuencias de comandos, así como las Core Web Vitals de una página. También incluye estadísticas, similares a las que proporciona Lighthouse.
Cuándo usar el panel Rendimiento
Los desarrolladores deben usar el panel Rendimiento para obtener información detallada sobre el rendimiento de una página en particular.
La vista de métricas en tiempo real se puede usar para comprender rápidamente las características de rendimiento actuales de la página y, también, detectar posibles problemas a medida que se interactúa con ella.
La vista de seguimiento es particularmente útil para depurar problemas de capacidad de respuesta que afectan a la INP. Una vez que se identifica una interacción con una respuesta deficiente y se puede repetir, el panel 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 Rendimiento
El panel Rendimiento es una herramienta para desarrolladores que proporciona principalmente datos de laboratorio, aunque con un poco de contexto de campo de CrUX. No reemplaza los datos de campo.
La vista de seguimiento contiene mucha información de depuración, pero, por ese motivo, puede ser difícil de entender para los desarrolladores principiantes o para quienes no tienen roles de desarrollador. Sin embargo, la vista de métricas en tiempo real con la que se abre el panel soluciona este problema, ya que proporciona una interfaz más fácil de usar para quienes no necesitan todos los detalles.
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, un enfoque podría ser el siguiente:
- Evaluar el estado del sitio web y detectar puntos problemáticos
- Depura y optimiza.
- Supervisa con herramientas de integración continua para detectar y evitar regresiones.
Paso 1: Evalúa el estado del sitio web e identifica oportunidades de mejora
Lo mejor es comenzar con los datos de campo para evaluar el estado del sitio web.
- Usa PageSpeed Insights para ver las métricas generales de la experiencia de Core Web Vitals en el origen y la información específica de una URL individual.
- Search Console puede ser útil para identificar las páginas que necesitan mejoras, ya que su función de agrupación de páginas funciona bien para tu sitio.
- Si tienes datos de RUM, suele ser la mejor opción para identificar páginas o segmentos de tráfico específicos con problemas.
Ya sea que analices los datos de campo que recopilas o los datos del CrUX, este primer paso es fundamental. Si no recopilas 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.
Analiza el rendimiento del sitio con PageSpeed Insights
PageSpeed Insights muestra los datos de CrUX que abarcan los últimos 28 días de datos 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 analizar su rendimiento, utiliza esa. Para obtener una vista general de un sitio cuando comienzas a optimizarlo, te recomendamos que comiences con la página principal, ya que suele ser una de las páginas más populares en muchos sitios.
Al principio, concéntrate en la sección Qué experimentan tus usuarios reales de PSI. Verás hasta cuatro vistas de los datos: para dispositivos móviles y computadoras de escritorio de la URL ingresada y de todo el origen. Compáralas y observa en qué se diferencian. Por lo general, los dispositivos móviles tienen un rendimiento inferior al de las computadoras, ya que tienen más limitaciones de recursos y funcionan en condiciones de red potencialmente menos estables. Si los datos de la URL y del origen son significativamente diferentes, intenta comprender por qué: las páginas principales suelen ser las primeras páginas que se visitan (es decir, una página de destino), por lo que pueden ser más lentas que el origen, ya que los usuarios se ven afectados por una caché del navegador no preparada. Es probable que las páginas posteriores se carguen más rápido, ya que los recursos 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 INP), además de las métricas de diagnóstico TTFB y FCP. ¿Hay alguna de las Core Web Vitals que esté fallando? ¿Por cuánto? Esto te indicará dónde concentrar tus esfuerzos.
Comprende las relaciones entre estos números, en especial para el LCP. Si el LCP es lento, como en este ejemplo, observa el TTFB y el FCP, que son hitos para esa métrica. En este ejemplo, tenemos un TTFB de 1.8 segundos, lo que hará que sea muy difícil cumplir con 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 de HTML. Consulta la guía para optimizar el TTFB para obtener más información. El FCP tarda otro segundo más, lo que, de nuevo, puede ser un indicio de redes más lentas. En este ejemplo, el LCP no tarda mucho después del FCP, lo que sugiere que el recurso de LCP está bien optimizado una vez que se carga la página. CrUX ahora también muestra más información de diagnóstico en los tipos de recursos y las partes secundarias, lo que también te ayuda a diagnosticar problemas de LCP.
En el caso de CLS, observa las puntuaciones de CLS de CrUX y de Lighthouse para ver si se trata de un problema de CLS de carga (que Lighthouse detectará y sobre el que te aconsejará) o un problema de CLS posterior a la carga que Lighthouse no detectará. Para obtener más información, consulta la guía Optimiza el CLS.
Para conocer la capacidad de respuesta, consulta las puntuaciones de INP. Consulta las auditorías de TBT en Lighthouse para ver si se está produciendo mucho procesamiento de JavaScript durante la carga inicial de la página, lo que probablemente afecte la INP. La INP puede ser una métrica difícil de mejorar, por lo que te recomendamos consultar la guía para optimizar la INP para obtener más información.
Cómo identificar páginas con bajo rendimiento en Search Console
Si bien PSI es útil cuando tienes una URL específica que quieres probar o el sitio en su totalidad, Search Console puede ayudarte a dirigir tus esfuerzos a tipos de páginas específicos. Esto es particularmente útil si muchas páginas comparten temas o tecnologías comunes, y Search Console puede identificarlos correctamente.
El informe de Core Web Vitals de Search Console muestra el panorama general del rendimiento de tu sitio web, pero puedes desglosar 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 los que proporcionan una buena experiencia del usuario.
- Obtén datos detallados sobre el rendimiento por URL agrupados 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 agrupen las URLs en cada categoría de calidad de la experiencia del usuario para dispositivos móviles y computadoras.
Una vez que tengas algunas páginas específicas para analizar, 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 las páginas que requieren mejoras de rendimiento y también cuáles de las métricas de Core Web Vitals quieres mejorar. Puedes usar las herramientas de Google para obtener más información que te permita comprender la causa raíz y, así, identificar el problema.
- Consulta las auditorías de Lighthouse para obtener orientación de alto nivel sobre la página.
- Usa la vista de métricas en tiempo real del panel Rendimiento para analizar las Métricas web esenciales en tiempo real.
- Usa el seguimiento del panel Rendimiento para depurar problemas de rendimiento y probar 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. También es posible ejecutar Lighthouse desde las Herramientas para desarrolladores de Chrome, lo que resulta útil para validar las correcciones de forma local, aunque el panel de rendimiento (que se explica a continuación) es una herramienta más completa para identificar y corregir problemas de rendimiento de forma local.
Un punto clave es validar que la auditoría de Lighthouse replique los problemas que intentas resolver (por ejemplo, problemas de LCP o CLS lentos). De forma 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 la INP en favor del TBT.
Cuando las métricas de Lighthouse sugieren un problema similar al que intentas resolver, la gran cantidad de información de sus auditorías puede ayudar a identificar problemas y sugerir soluciones.
Puedes filtrar las auditorías para que solo se muestren las métricas de Core Web Vitals que te interesan y enfocarte en las correcciones de los problemas relacionados con una métrica específica:
Para INP, usa las auditorías de TBT para identificar problemas que puedan afectar esas métricas, pero ten en cuenta que, sin interacciones, Lighthouse tiene un límite en cuanto a lo que puede diagnosticar.
Analiza en tiempo real con la pantalla de métricas en tiempo real de las Herramientas para desarrolladores de Chrome
La pantalla de métricas en tiempo real de las Herramientas para desarrolladores de Chrome en el panel Rendimiento muestra las Métricas web esenciales en tiempo real durante la carga de la página y mientras se navega por ella. Por este motivo, puede capturar la INP y los cambios de diseño que se producen después de la carga. También es posible ver información más detallada sobre cada métrica:
Esta vista proporciona mucha información útil para identificar problemas de rendimiento y, además, puede extraer información de campo del CrUX. Para obtener aún más información, puedes desglosar los datos con un seguimiento.
Desglosa los datos con el panel Rendimiento
El panel Rendimiento de las Herramientas para desarrolladores de Chrome te permite registrar un perfil (o seguimiento) de todo el comportamiento de la página durante un período registrado.
Las estadísticas de rendimiento están disponibles en el panel lateral Estadísticas. También se muestran las métricas de Core Web Vitals junto con los valores de campo correspondientes, cuando están disponibles.
La pista Cambios de diseño destaca los cambios de diseño y, si haces clic en ellos, se proporcionan más detalles sobre los elementos que cambiaron para depurar el CLS.
Los tiempos clave, como el LCP, se muestran en la sección Tiempos disponible en la parte inferior del registro. Haz clic en ellos para obtener más detalles.
Las tareas largas (que pueden provocar problemas de INP) también se destacan con triángulos rojos en el gráfico tipo llama.
Estas funciones, así como la información de otras partes del panel Rendimiento, pueden ayudarte a determinar si las correcciones tienen algún efecto en las Core Web Vitals de una página.
Depura las Métricas web esenciales en el campo
Las herramientas de laboratorio no siempre pueden identificar la causa de todos los problemas de Core Web Vitals que afectan a tus usuarios. Esta es una de las razones por las que es tan importante recopilar tus propios datos de campo, ya que tiene en cuenta factores que los datos de laboratorio no pueden.
Consulta Cómo depurar el rendimiento en el campo para obtener más información.
Paso 3: Supervisa los cambios
Una vez que hayas corregido los problemas, debes asegurarte de que tengan el efecto deseado y de que los problemas nuevos no afecten tus Core Web Vitals. Esto requiere supervisar los problemas de rendimiento como parte del flujo de trabajo de los desarrolladores para evitar que se lancen a producción y supervisar los datos de campo con regularidad para garantizar que así sea.
Supervisa los requisitos de rendimiento en entornos de integración continua (CI).
Lighthouse-CI te permite ejecutar automáticamente auditorías de Lighthouse en confirmaciones de código para evitar que las regresiones de rendimiento ingresen al 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 malas prácticas en el código.
Consulta las tendencias de estado del sitio web con datos de campo
Si bien debes intentar detectar y corregir todos los problemas de rendimiento antes de que lleguen a producción, supervisar tus datos de campo con RUM es esencial para encontrar los que se pasen por alto. Existen 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 los paneles personalizados y los sistemas de alertas.
En el caso de los sitios sin una solución de RUM, puedes usar las diversas herramientas de CrUX como un análisis de tendencias básico de los datos de campo.
Conclusión
Para garantizar experiencias del usuario rápidas y agradables, se requiere una mentalidad que priorice el rendimiento y la adopción de un flujo de trabajo que garantice 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 obtener buenas Core Web Vitals.