Cómo compilar un panel de CrUX en Looker Studio

Looker Studio (anteriormente Data Studio) es una potente herramienta de visualización de datos que te permite crear paneles a partir de fuentes de macrodatos, como el Informe de UX de Chrome (CrUX). En esta guía, aprenderás a crear tu propio panel CrUX personalizado para realizar un seguimiento de las tendencias de la experiencia del usuario de un origen.

Panel de CrUX

El Panel de CrUX se diseñó con una función de Looker Studio llamada Conectores de la comunidad. Este conector es un vínculo preestablecido entre los datos de CrUX sin procesar en BigQuery y las visualizaciones de Looker Studio. Elimina la necesidad de que los usuarios del panel escriban consultas o generen gráficos. Todo está creado para ti; todo lo que necesitas es proporcionar un origen y se generará un panel personalizado para ti.

Cómo usar el panel de CrUX predeterminado

CrUX tiene un panel predeterminado, que lo mantiene el equipo de CrUX. El equipo agrega nuevas métricas (por ejemplo, INP), que estarán disponibles la próxima vez que se cargue el panel.

Se recomienda usar el panel predeterminado como una forma rápida y sin mantenimiento de los datos de CrUX de un sitio. Sin embargo, es posible que algunos usuarios deseen personalizar el panel.

Crea un panel personalizado

Para comenzar, ve a g.co/chromeuxdash. Esta acción te llevará a la página del conector de la comunidad de CrUX, en la que podrás proporcionar el origen para el que se generará el panel. Ten en cuenta que es posible que los usuarios nuevos deban completar los permisos o las instrucciones de preferencias de marketing.

Conector del panel de CrUX

El campo de entrada de texto solo acepta orígenes, no URL completas. Por ejemplo:

Origen (compatible)
https://web.dev
URL (no compatible)
https://developer.chrome.com/chrome-ux-report-looker-studio-dashboard/

Si omites el protocolo, se supone que es HTTPS. Los subdominios son importantes; por ejemplo, https://developers.google.com y https://www.google.com se consideran orígenes diferentes.

Algunos problemas habituales con los orígenes son proporcionar el protocolo incorrecto (por ejemplo, http:// en lugar de https://) y omitir el subdominio cuando es necesario. Algunos sitios web incluyen redireccionamientos, por lo que si http://example.com redirecciona a https://www.example.com, debes usar este último, que es la versión canónica del origen. Como regla general, utiliza el origen que los usuarios vean en la barra de URL.

Si tu origen no está incluido en el conjunto de datos de CrUX, es posible que recibas un mensaje de error como el que se muestra a continuación. Hay más de 4 millones de orígenes en el conjunto de datos, pero es posible que el que deseas no tenga suficientes datos para incluir.

Mensaje de error del panel de CrUX

Si el origen existe, se te dirigirá a la página del esquema del panel. Esto te muestra todos los campos que se incluyen: cada tipo de conexión efectiva, cada factor de forma, el mes de la actualización del conjunto de datos, la distribución del rendimiento de cada métrica y, por supuesto, el nombre del origen. No es necesario hacer ni cambiar nada en esta página. Solo haga clic en Crear informe para continuar.

Esquema del panel de CrUX

Usa el panel

Cada panel incluye tres tipos de páginas:

  1. Descripción general de las Métricas web esenciales
  2. Rendimiento de las métricas
  3. Datos demográficos de los usuarios

Cada página incluye un gráfico en el que se muestran las distribuciones a lo largo del tiempo para cada versión mensual disponible. A medida que se lanzan nuevos conjuntos de datos, simplemente puedes actualizar el panel para obtener los datos más recientes.

Los conjuntos de datos mensuales se publican el segundo martes de cada mes. Por ejemplo, el conjunto de datos compuesto por datos de la experiencia del usuario del mes de mayo se publica el segundo martes de junio.

Descripción general de las Métricas web esenciales

La primera página ofrece una descripción general del rendimiento mensual de las Métricas web esenciales del origen. Estas son las métricas de UX más importantes en las que Google recomienda que te enfoques.

Descripción general de las Métricas web esenciales del panel de CrUX

Usa la página Métricas web esenciales para comprender la experiencia del origen que experimentan los usuarios de computadoras de escritorio y teléfonos. De forma predeterminada, se selecciona el mes más reciente en el momento en que creaste el panel. Para alternar entre las versiones mensuales anteriores o más recientes, usa el filtro Mes que se encuentra en la parte superior de la página.

Ten en cuenta que la tablet se omite de estos gráficos de forma predeterminada, pero, si es necesario, puedes quitar el filtro No Tablet en la configuración del gráfico de barras, como se muestra a continuación.

Editar el panel de CrUX para mostrar tablets en la página de Métricas web esenciales

Rendimiento de las métricas

Después de la página de Métricas web esenciales, encontrarás páginas independientes para todas las metrics del conjunto de datos de CrUX.

Página de LCP del panel de CrUX

En la parte superior de cada página, se encuentra el filtro Dispositivo, que puedes usar para restringir los factores de forma que se incluyen en los datos de la experiencia. Por ejemplo, puedes desglosar específicamente las experiencias en teléfonos. Esta configuración persiste en todas las páginas.

Las visualizaciones principales en estas páginas son las distribuciones mensuales de experiencias clasificadas como "Buena", "Necesita mejoras" y "Deficiente". La leyenda codificada por colores debajo del gráfico indica el rango de experiencias incluidas en la categoría. Por ejemplo, en la captura de pantalla anterior, puedes ver que el porcentaje de experiencias "buenas" de Largest Contentful Paint (LCP) fluctúan y empeoran un poco en los últimos meses.

Los porcentajes de experiencias "buenas" y "deficientes" del mes más reciente se muestran sobre el gráfico junto con un indicador de la diferencia porcentual con respecto al mes anterior. Para este origen, las experiencias de LCP "buenas" disminuyeron un 3.2% a 56.04% mes a mes.

Además, para las métricas como el LCP y otras Métricas web esenciales que proporcionan recomendaciones explícitas de percentiles, encontrarás la métrica "P75" entre los porcentajes "bueno" y "malo". Este valor corresponde al percentil 75 de las experiencias del usuario del origen. En otras palabras, el 75% de las experiencias son mejores que este valor. Ten en cuenta que esto se aplica a la distribución general en todos los dispositivos del origen. Activar o desactivar dispositivos específicos con el filtro Dispositivo no volverá a calcular el percentil.

Advertencias técnicas aburridas sobre los percentiles

Ten en cuenta que las métricas del percentil se basan en los datos de histogramas de BigQuery, por lo que el nivel de detalle será aproximado: 1, 000 ms para LCP, 100 ms para FID y 0.05 para CLS. En otras palabras, un LCP de P75 de 3,800 ms indica que el verdadero percentil 75 se encuentra entre 3,800 ms y 3,900 ms.

Además, el conjunto de datos de BigQuery usa una técnica llamada “distribución de la discretización” en la que las densidades de las experiencias del usuario se agrupan intrínsecamente en discretizaciones muy poco comunes de menor nivel de detalle. Esto nos permite incluir densidades de minutos en la cola de la distribución sin tener que exceder los cuatro dígitos de precisión. Por ejemplo, los valores de LCP inferiores a 3 segundos se agrupan en discretizaciones de 200 ms de ancho. Entre 3 y 10 segundos, las discretizaciones tienen 500 ms de ancho. Después de los 10 segundos, los discretizaciones tienen 5,000 ms de ancho, etc. En lugar de tener discretizaciones de anchos variables, la distribución garantiza que todos los discretizaciones tengan un ancho constante de 100 ms (el máximo común divisor), y que la distribución se interpola de forma lineal en cada uno de ellos.

Los valores P75 correspondientes en herramientas como PageSpeed Insights no se basan en el conjunto de datos públicos de BigQuery y pueden proporcionar valores de precisión de milisegundos.

Datos demográficos de los usuarios

Hay dos dimensiones incluidas en las páginas de datos demográficos de los usuarios: dispositivos y tipos de conexión efectiva (ECTs). En estas páginas, se muestra la distribución de las vistas de página en todo el origen de los usuarios de cada segmento demográfico.

La página de distribución por dispositivo muestra el desglose de los usuarios de teléfonos, computadoras de escritorio y tablets a lo largo del tiempo. Muchos orígenes tienden a no tener datos de tabletas, o bien no tienen ninguno, por lo que a menudo verás un "0%" en el borde del gráfico.

Página del dispositivo del panel de CrUX

Del mismo modo, la página de distribución de ECT te muestra el desglose de las experiencias 4G, 3G, 2G, 2G lenta y sin conexión.

Las distribuciones de estas dimensiones se calculan con segmentos de los datos de histogramas de First Contentful Paint (FCP).

Preguntas frecuentes

¿Cuándo usaría el panel de CrUX en lugar de otras herramientas?

El panel de CrUX se basa en los mismos datos subyacentes disponibles en BigQuery, pero no es necesario que escribas una sola línea de SQL para extraer los datos ni tendrás que preocuparte por exceder las cuotas gratuitas. Configurar un panel es rápido y fácil, todas las visualizaciones se generan por ti y tienes el control de compartirlas con quien quieras.

¿Hay alguna limitación para usar el panel de CrUX?

El uso de BigQuery significa que el panel de CrUX también hereda todas sus limitaciones. Está restringido a los datos a nivel del origen con un nivel de detalle mensual.

El panel de CrUX también cambia parte de la versatilidad de los datos sin procesar en BigQuery por simplicidad y conveniencia. Por ejemplo, las distribuciones de métricas solo se proporcionan como “buena”, “necesita mejorar” y “deficiente”, a diferencia de los histogramas completos. El panel de CrUX también proporciona datos a nivel global, mientras que el conjunto de datos de BigQuery te permite acercar países en particular.

¿Dónde puedo obtener más información sobre Looker Studio?

Consulta la página de funciones de Looker Studio para obtener más información.