Combina las herramientas de Google para auditar, mejorar y supervisar tu sitio web de manera eficaz.
Fecha de publicación: 28 de mayo de 2020
Las Métricas web esenciales son un conjunto de métricas que evalúan la experiencia del usuario según 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 Métricas web esenciales de tu sitio web, pero el punto de partida de ese flujo de trabajo depende de si recopilas tus propios datos de campo. El punto final puede depender de las herramientas de Google que te resulten útiles para diagnosticar y corregir problemas de 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 el laboratorio, como Lighthouse, son herramientas de diagnóstico para destacar posibles problemas de rendimiento y prácticas recomendadas. Las herramientas basadas en el laboratorio se ejecutan en condiciones predefinidas y es posible que no reflejen las mediciones de las Métricas web esenciales en la vida real que experimentan tus usuarios.
LosPor ejemplo, Lighthouse es una herramienta basada en el laboratorio que ejecuta pruebas con simulación de limitación 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 para diagnosticar problemas de rendimiento, solo representan una pequeña 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 si se tratara de un visitante completamente 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 o cuando lo exploran. Los visitantes nuevos y las herramientas también pueden experimentar el sitio de manera diferente con los banners de cookies o algún otro contenido presente.
En resumen, si bien las herramientas basadas en el laboratorio pueden indicar 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 registran 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 indicarte 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 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 analizar 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 incluso de una que tenga los medios para pagar 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 registran, almacenan y analizan esos datos.
Si ya utilizas Google Analytics, pero no comenzaste a recopilar tus propios datos de campo, es posible que puedas usar la biblioteca de web-vitals para enviar las métricas web 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 las Métricas web esenciales. Antes de establecer un flujo de trabajo, una descripción general de cada herramienta puede ayudarte a comprender cuáles pueden 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 las métricas de Core Web Vitals y otras métricas para los sitios web con tráfico suficiente.
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 de 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 pueden usar los usuarios.
Cuándo usar CrUX
Incluso si recopilas tus propios datos de campo, CrUX sigue siendo útil. Si bien 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 una tiene sus 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 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 del país a menudo no están disponibles en otras herramientas, o bien para ver las métricas adicionales en CrUX, que tampoco 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 completa de RUM puede incluir más experiencias en Chrome y otros navegadores en los que se admiten 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 en el campo, ya que CrUX no será una opción. Como alternativa, deberás depender de los datos del lab, pero con las limitaciones de que pueden 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 un tiempo considerable en reflejarse en el conjunto de datos de CrUX.
Por último, como conjunto de datos públicos, CrUX tiene limitaciones en cuanto a la cantidad de información que puede poner a disposición y la forma en que se pueden consultar estos datos. Capturar tus propios datos de RUM te permite recopilar más detalles (por ejemplo, el elemento LCP) y segmentar los datos más para identificar problemas. ¿Los usuarios que accedieron a su cuenta experimentan mejores o peores Métricas web esenciales que los usuarios que no accedieron a su cuenta? ¿Los usuarios con un LCP lento tienen un elemento LCP en particular? ¿Qué interacciones generan valores altos de FID y INP?
PageSpeed Insights (PSI)
PSI es una herramienta que informa los 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 ideal para evaluar el rendimiento de CrUX a nivel de la página o del 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 las Métricas web esenciales de otros sitios, como los de la competencia.
PSI también proporciona datos de Lighthouse, que ofrece recomendaciones útiles para mejorar tus Métricas web esenciales si las métricas se alinean. Cuando no coinciden, las recomendaciones de Lighthouse pueden ser menos pertinentes.
Dado que Lighthouse se ejecuta desde el servidor, puede formar un modelo de referencia más coherente que si se ejecutara 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 accesibles públicamente.
Los datos de CrUX solo están disponibles cuando los sitios cumplen con ciertos criterios de elegibilidad, incluidos los límites 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 solo puede mostrar los datos de laboratorio de Lighthouse en estos casos.
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 la utilidad de 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 como resumen del rendimiento del sitio, y las auditorías de Lighthouse pueden ayudar, pero se debe tener especial 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 laboratorio de Lighthouse, es posible que las recomendaciones de Lighthouse tengan un valor limitado. Esto puede suceder, en particular, con los problemas de CLS posteriores a la carga y con las métricas web esenciales de interactividad (FID y INP), en las que las auditorías basadas en el laboratorio son menos útiles.
Search Console
Search Console mide el rendimiento de tu sitio y el tráfico a él proveniente de la Búsqueda, 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 las páginas similares (por ejemplo, las que usan la misma plantilla) en una sola evaluación del grupo. Search Console también incluye un informe de Métricas web esenciales basado en los datos de campo de CrUX.
Cuándo usar Search Console
Search Console es adecuado tanto para desarrolladores como para personas que no desempeñan ese rol, ya que permite evaluar el rendimiento de la búsqueda y de las páginas de formas que otras herramientas de Google no ofrecen. Su presentación de los datos de CrUX y la agrupación de páginas por similitud ofrecen una perspectiva 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 las páginas por similitud, o si un sitio web no está representado en el conjunto de datos de CrUX.
El agrupamiento de páginas también puede ser algo confuso cuando las páginas de ejemplo de un grupo tienen características diferentes al resto del grupo, por ejemplo, si el grupo no supera ciertas Métricas web esenciales en general, pero todas las páginas de ejemplo parecen superar las mismas Métricas web esenciales. Esto puede ocurrir cuando un grupo contiene una cola larga o páginas que se visitan con poca frecuencia y 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 las páginas. Los flujos de usuarios de Lighthouse también permiten a los desarrolladores crear secuencias de comandos de flujos de interacción para 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 del 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 pruebas. Lighthouse CI también es ú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 del rendimiento para conservar buenas experiencias del usuario.
Cuándo no usar Lighthouse
Lighthouse (o Lighthouse CI) no es un sustituto de 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 laboratorio que consta de dos "modos":
Cuando se abre el panel Rendimiento por primera vez, una pantalla de Métricas en vivo proporciona la métrica actual de Métricas web esenciales, 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, para 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 a los desarrolladores capturar un perfil (o un registro) 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 red, la renderización, la pintura y la actividad de secuencias de comandos, así como las Métricas web esenciales 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 estadísticas detalladas sobre el rendimiento de una página en particular.
La vista de métricas en vivo 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 respuesta que afectan al 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 cierto 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 aquellos que tienen roles que no son de desarrollador. Sin embargo, la vista de métricas en vivo con la que se abre el panel aborda este problema, ya que proporciona una interfaz más fácil de usar para quienes no requieren el detalle completo.
Flujo de trabajo de tres pasos para garantizar que las Métricas web esenciales de tu sitio web se mantengan en buen estado
Cuando trabajes para mejorar la experiencia del usuario, es mejor 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:
- Evalúa el estado del sitio web e identifica los puntos débiles.
- 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 experiencia de las Métricas web esenciales 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, suelen 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 tú mismo o los datos de 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 experiencia del usuario en el percentil 75. Esto significa que, si el 75% de las experiencias del usuario 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, úsala. 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.
Inicialmente, concéntrate en la sección Lo que 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. Compara estos dos tipos de informes y observa sus diferencias. Por lo general, el rendimiento de los dispositivos móviles es menor que el de las computadoras, ya que son dispositivos con más limitaciones de recursos que operan 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), por lo que pueden ser más lentas que el origen, ya que los usuarios reciben el impacto total de una caché del navegador sin inicializar. Es probable que las páginas posteriores se carguen más rápido, ya que se almacenarán en caché todos los recursos compartidos, 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. ¿Falla alguna de las Métricas web esenciales y en qué medida? Esto te indicará dónde concentrar tus esfuerzos.
Comprende las relaciones entre estas cifras, en especial, en el caso del LCP. Si el LCP es lento, como en este ejemplo, consulta el TTFB y el FCP, que son hitos de esa métrica. En este ejemplo, tenemos un TTFB de 1.8 s, lo que dificultará mucho cumplir con el umbral recomendado de 2.5 s para un buen LCP. Esto sugiere que hay un backend lento (problemas del servidor o falta de CDN), redes más lentas o redireccionamientos que retrasan los primeros bytes HTML. Consulta la guía para optimizar el TTFB para obtener más información. El FCP tarda un segundo más, lo que también puede ser un indicador de redes más lentas. En este ejemplo, el LCP no se demora 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 y las subpartes de recursos, lo que también te ayuda a diagnosticar problemas de LCP.
En el caso del CLS, consulta las puntuaciones de CLS de CrUX y Lighthouse para ver si se trata de un problema de CLS durante la carga (que Lighthouse detectará y sobre el que te brindará asesoramiento) o de un problema de CLS posterior a la carga que Lighthouse no detectará. Para obtener más información, consulta la guía para optimizar el CLS.
Para evaluar la responsividad, consulta las puntuaciones del INP. Consulta las auditorías de TBT en Lighthouse para ver si se produce mucho procesamiento de JavaScript durante la carga inicial de la página, lo que probablemente afecte al INP. El INP puede ser una métrica difícil de mejorar, por lo que te recomendamos que consultes la guía para optimizar el INP para obtener más información.
Cómo identificar las páginas con bajo rendimiento en Search Console
Si bien PSI es útil cuando tienes una URL específica que deseas probar o el sitio en su totalidad, Search Console puede ayudarte a enfocar tus esfuerzos en tipos de páginas particulares. Esto es especialmente útil si muchas páginas comparten temas o tecnologías comunes, y Search Console puede identificarlos correctamente.
El informe de Métricas web esenciales en Search Console muestra el panorama general del rendimiento de tu sitio web, pero también puedes analizar en detalle las páginas específicas que necesitan atención. Con Search Console, también puedes hacer lo siguiente:
- Identifica los grupos de páginas individuales que necesitan mejoras y los que brindan 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 del producto 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 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 las métricas de Métricas web esenciales que deseas mejorar. Puedes usar las herramientas de Google para obtener más información y comprender la causa raíz del problema.
- Las auditorías de Lighthouse brindan orientación general para 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 registro del panel de 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 correcciones de forma local, aunque el panel de rendimiento (que se explica a continuación) es una herramienta más integral 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 lento o CLS). 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 el 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 en sus auditorías puede ayudarte a identificar problemas y sugerir soluciones.
Puedes filtrar las auditorías para ver solo las métricas web esenciales que te interesan y enfocarte en las correcciones de los problemas relacionados con una métrica específica:
En el caso del 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 limitaciones en cuanto a la cantidad de diagnósticos que puede realizar.
Analiza en tiempo real con la pantalla de métricas en vivo 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 lo tanto, puede capturar el INP y los cambios de diseño que ocurren 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 hasta puede extraer información de campo de CrUX. Para obtener aún más información, puedes profundizar con un registro.
Analiza en detalle con el panel Rendimiento
El panel Rendimiento de las Herramientas para desarrolladores de Chrome te permite registrar un perfil (o registro) de todo el comportamiento de la página durante un período de tiempo 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.
El segmento 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 generar problemas de INP) también se destacan con triángulos rojos en el gráfico de llamas.
Estas funciones, así como la información que se encuentra 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 las Métricas web esenciales en el campo
Las herramientas de laboratorio no siempre pueden identificar la causa de todos los problemas de las 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 tienen en cuenta factores que los datos de laboratorio no pueden considerar.
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, asegúrate de que tengan el efecto requerido y de 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 se lancen problemas de rendimiento en producción, y supervisar los datos de campo con regularidad para garantizar que este sea el caso.
Supervisar las solicitudes de rendimiento en entornos de integración continua (CI)
Lighthouse CI te permite ejecutar automáticamente auditorías de Lighthouse en las confirmaciones de código para evitar que las regresiones de rendimiento ingresen al código. 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 la producción, supervisar tus datos de campo con RUM es fundamental para encontrar los que se te pasen. Existen muchos productos de RUM comerciales disponibles que pueden ayudarte con esto. La biblioteca de JavaScript de 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 que no tienen una solución de RUM, puedes usar las diversas herramientas de CrUX como un análisis básico de tendencias de los datos de campo.
Conclusión
Para garantizar experiencias del usuario rápidas y agradables, se requiere una mentalidad centrada en 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 experiencias de usuario excelentes y mantenerte dentro de los umbrales definidos para las buenas Métricas web esenciales.