Tipos de navegación ahora disponibles en CrUX

Barry Pollard

Johannes Henkel

A partir del conjunto de datos de marzo de 2024, el Informe sobre la experiencia del usuario en Chrome (CrUX) incluye una métrica navigation_types. Proporciona estadísticas agregadas sobre los tipos de navegación de las cargas de página para la dimensión consultada.

Los diferentes tipos de navegación generan diferencias en las métricas de rendimiento. Por lo tanto, cuando observes el rendimiento de tu sitio, es útil comprender la frecuencia relativa de estos diferentes tipos. Por ejemplo, cuando en una navegación se utiliza la acción de retroceder (bfcache), por lo general, se genera una navegación casi instantánea, lo que se refleja en métricas de LCP y FCP muy pequeñas y en métricas de CLS e INP.

Con la exposición del desglose por tipo de navegación, esperamos motivar a los propietarios de los sitios para que estén más al tanto de los tipos de navegación que se usan en ellos y procuramos fomentar algunos de los tipos más rápidos observando la configuración del almacenamiento en caché, los bloqueadores de bfcache y la renderización previa.

La métrica navigation_types está disponible en la API diaria de CrUX, la API de CrUX History (con un historial de 3 semanas disponible inicialmente y con cobertura semanal mayor durante los próximos 6 meses), el conjunto de datos CrUX de BigQuery más reciente y el Panel de CrUX. Además, el historial permite que los propietarios de los sitios vean los cambios en el uso de los tipos de navegación a lo largo del tiempo. Esto puede permitir el seguimiento de las mejoras (por ejemplo, quitar el bloqueo de bfcache). También puede ayudar a explicar los cambios en las métricas, incluso cuando no se hayan realizado cambios en sus sitios.

¿Qué tipos de navegación están disponibles en CrUX?

CrUX distingue los siguientes tipos de navegación en la siguiente tabla:

En algunos casos, una carga de página puede ser una combinación de varios tipos de navegación. En ese caso, CrUX informa la primera coincidencia en el orden inverso de la tabla anterior (de abajo arriba).

Limitaciones de los tipos de navegación en CrUX

Dado que CrUX es un conjunto de datos públicos, su nivel de detalle para informar es limitado. Para muchos orígenes y URLs, la métrica navigation_types no está disponible debido a que no hay suficiente tráfico apto. Para obtener más información, consulta la metodología de CrUX.

Además, CrUX no puede proporcionar desgloses de otras métricas por tipo de navegación, ya que esto reduciría aún más la cantidad de orígenes y URLs disponibles en CrUX.

Recomendamos que los sitios implementen su propia supervisión de usuarios reales (RUM) para poder dividir el tráfico según criterios como los tipos de navegación. Ten en cuenta que es posible que veas diferencias en los tipos de navegación de estas soluciones según los tipos informados y las páginas vistas que se incluyan. Consulta el artículo ¿Por qué los datos de CrUX son diferentes de mis datos de RUM?

El RUM también puede brindar un mayor nivel de detalle sobre problemas específicos de rendimiento. Por ejemplo, aunque CrUX podría implicar que valdría la pena mejorar la elegibilidad de la bfcache, la API de bfcache notRestoredReasons puede informar con exactitud por qué no se pudo entregar una carga de página específica desde la bfcache.

Tipos de navegación en la API de CrUX

Para ver los tipos de navegación en la API, incluye la métrica navigation_types en la solicitud o no establezcas una métrica para que se incluyan todas las métricas:

export API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"origin": "https://example.com", metrics: ["navigation_types"]}'

El formato de solicitud se describe más detalladamente en la documentación de la API, incluida una explicación sobre cómo obtener tu clave de API y la guía de la API. Se mostrará un objeto como el siguiente:

{
  "record": {
    "key": {  "origin": "https://example.com" },
    "metrics": {
      "navigation_types": {
        "fractions": {
          "navigate": 0.5335,
          "navigate_cache": 0.2646,
          "reload": 0.0885,
          "restore": 0.0023,
          "back_forward": 0.0403,
          "back_forward_cache": 0.0677,
          "prerender": 0.0031
        }
      }
    },
    "collectionPeriod": {
      "firstDate": { "year": 2024, "month": 3, "day": 6 },
      "lastDate": { "year": 2024, "month": 4, "day": 2 }
    }
  }
}

En la respuesta, CrUX informa la métrica navigation_types como un objeto con las fracciones de cargas de páginas para cada uno de los tipos de navegación. Cada fracción es un valor entre 0.0 (que indica el 0% de las cargas de página) y 1.0 (que indica el 100% de las cargas de página) para la clave determinada.

En esta respuesta, puedes ver que para el período de recopilación que comenzó el 6 de marzo de 2024, hasta el 2 de abril de 2024 inclusive, el 6.77% de las navegaciones (cargas de página) se entregó desde la bfcache del navegador. Del mismo modo, algunas de las otras fracciones pueden ayudarte a identificar oportunidades para optimizar la carga de la página. Ten en cuenta que para cualquier clave determinada (incluida una combinación de una URL o un origen y un factor de forma), las fracciones de navigation_types suman aproximadamente 1.0.

Tipos de navegación en la API de CrUX History

La API de CrUX History puede proporcionar una serie temporal para los tipos de navegación con hasta 25 datos por fracción, lo que permite visualizar estas fracciones a lo largo del tiempo. Para cambiar tu solicitud de la API de CrUX a la API de CrUX History, ejecútala en el extremo queryHistoryRecord en lugar de en queryRecord. Por ejemplo, nuestro Colab del historial de CrUX traza la métrica navigation_types como barras apiladas:

En la captura de pantalla anterior, el historial solo está disponible para 3 períodos de recopilación (28 días cada uno, con 7 días de diferencia). Una vez que se complete, cubrirá los 25 períodos de recopilación. Si visualizas este historial, podrás confirmar si las optimizaciones se aplicaron o revirtieron. Esto es especialmente cierto para la configuración de caché HTTP, la optimización de una página para la bfcache y la renderización previa.

Tipos de navegación en CrUX de BigQuery

Las tablas de BigQuery de CrUX ahora incluyen un registro navigation_type, hecho de cada tipo, mientras que las vistas materializadas de resumen incluyen varias columnas navigation_types_*, una para cada tipo.

Tablas detalladas

El esquema de tabla detallado en CrUX BigQuery proporciona histogramas detallados de las métricas de rendimiento web, lo que nos permite mostrar en este análisis de ejemplo cómo determinados tipos de navegación pueden correlacionarse con un buen rendimiento de carga instantáneo o bueno.

Como ejemplo, analizamos la fracción de back_forward_cache y su correlación con la frecuencia con la que las páginas se cargan al instante (instant_lcp_density se define como LCP <= 200 ms) y la frecuencia con la que se observó un buen LCP (good_lcp_density definido como LCP <= 2,500 ms). Observamos una fuerte correlación estadística entre back_forward_cache y instant_lcp_density (wards=0.87), que se muestra en el siguiente gráfico, y una correlación moderada entre back_forward_cache y good_lcp_density (wards=0.29).

El Colab para este análisis está bien comentado. Aquí, solo analizamos la consulta que extrae las fracciones de navigation_types para los 10,000 orígenes más populares de las tablas detalladas en CrUX de BigQuery:

• Accedemos a la tabla all.202403 aquí (consulta la cláusula FROM), filtramos form_factor para phone y seleccionamos orígenes con clasificación de popularidad <= 10,000 para los 10,000 orígenes más populares principales (consulta la cláusula WHERE).
• Cuando se consulta la métrica navigation_types en BigQuery, es necesario dividir por el total de las fracciones de navigation_types, ya que solo se suman por origen, pero no por combinación (origen, factor de forma).
• No todos los orígenes tendrán navigation_types, por lo que se recomienda usar SAVE_DIVIDE.

WITH tmp AS (
  SELECT
    origin,
    SUM(navigation_types.navigate.fraction) AS navigate,
    SUM(navigation_types.navigate_cache.fraction) AS navigate_cache,
    SUM(navigation_types.reload.fraction) AS reload,
    SUM(navigation_types.restore AS restore,
    SUM(navigation_types.back_forward.fraction) AS back_forward,
    SUM(navigation_types.back_forward_cache.fraction) AS back_forward_cache,
    SUM(navigation_types.prerender.fraction) AS prerender,
    SUM(navigation_types.navigate.fraction
      + navigation_types.navigate_cache.fraction
      + navigation_types.reload.fraction
      + navigation_types.restore.fraction
      + navigation_types.back_forward.fraction
      + navigation_types.back_forward_cache.fraction
      + navigation_types.prerender.fraction) AS total
  FROM
    `chrome-ux-report.all.202403`
  WHERE
    experimental.popularity.rank <= 10000 AND
    form_factor.name = 'phone'
  GROUP BY
    origin
)

SELECT
  origin,
  ROUND(SAFE_DIVIDE(navigate, total), 4) AS navigate,
  ROUND(SAFE_DIVIDE(navigate_cache, total), 4) AS navigate_cache,
  ROUND(SAFE_DIVIDE(reload, total), 4) AS reload,
  ROUND(SAFE_DIVIDE(restore, total), 4) AS restore,
  ROUND(SAFE_DIVIDE(back_forward, total), 4) AS back_forward,
  ROUND(SAFE_DIVIDE(back_forward_cache, total), 4) AS back_forward_cache,
  ROUND(SAFE_DIVIDE(prerender, total), 4) AS prerender
FROM
  tmp

Tablas materializadas

Cuando un resumen es suficiente, suele ser más conveniente (y económico) consultar las tablas materializadas en su lugar. Por ejemplo, con la siguiente consulta, se extraen los datos de navigation_types disponibles de la tabla chrome-ux-report.materialized.device_summary. Esta tabla está vinculada por mes, origen y tipo de dispositivo.

SELECT
  yyyymm,
  device,
  navigation_types_navigate,
  navigation_types_navigate_cache,
  navigation_types_reload,
  navigation_types_restore,
  navigation_types_back_forward,
  navigation_types_back_forward_cache,
  navigation_types_prerender
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://example.com' AND
  navigation_types_navigate IS NOT NULL
ORDER BY
  yyyymm DESC,
  device DESC

Ten en cuenta que estas fracciones no suman 1.0 por fila, por lo que es necesario dividir cada fracción por la suma de los resultados sobre los que se interpretará la consulta.

Esto se debe a que las fracciones de navigation_type en chrome-ux-report.materialized.device_summary, como las densidades de histogramas, suman 1.0 por origen en lugar de por origen y dispositivo por fecha. Esto te permite ver la distribución de los tipos de navegación en diferentes dispositivos:

SELECT
  device,
  navigation_types_back_forward
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

En este resultado de la consulta, las fracciones reflejan el porcentaje de cargas de páginas para el origen https://www.google.com: el 6.63% de estas cargas de página tenían el tipo de navegación back_forward en el teléfono, el 1.79% en computadoras de escritorio y el 0.09% en tablets.

El porcentaje de back_forward considerablemente más alto en phone sugiere que podríamos optimizar estas cargas de páginas para que se puedan publicar desde la bfcache.

Sin embargo, también es importante considerar qué fracción de cargas de página ya entrega la bfcache, es decir, la tasa de aciertos de bfcache. La siguiente consulta sugiere que este origen en particular puede ya estar bien optimizado, dada su > Porcentaje de hits del 60% en teléfonos y computadoras de escritorio.

SELECT
  device,
  navigation_types_back_forward_cache /
    (navigation_types_back_forward + navigation_types_back_forward_cache)
    AS back_forward_cache_hit_rate
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

Por lo tanto, parece que la tasa alta de back_forward en los teléfonos no se debe a una menor utilización de la bfcache, sino más bien a un reflejo de cómo los usuarios navegan hacia atrás y adelante más en teléfonos.

Tipos de navegación en el panel de CrUX

La forma más fácil de ver los tipos de navegación es en el panel de CrUX, al que se puede acceder para un origen desde este vínculo. Como puedes ver en la siguiente captura de pantalla, solo hay un mes de datos disponible inicialmente, pero con el tiempo el historial se llenará, lo que te permitirá ver los cambios en los tipos mes a mes.

Como puedes ver también, en la parte superior de esta página del panel, destacamos los tipos de navegación más rápidas, que las atracciones deberían optimizar.

Conclusión

Esperamos que los desgloses por tipo de navegación en CrUX te resulten útiles y que te ayuden a comprender y optimizar el rendimiento de tu sitio. Al garantizar un uso eficiente del almacenamiento en caché HTTP, la bfcache y la renderización previa, los sitios pueden lograr cargas de páginas mucho más rápidas que las cargas que requieren viajes de regreso al servidor.

También nos complace que los datos estén disponibles en todos los diferentes puntos de acceso de CrUX para que los usuarios puedan consumir los datos como quieran y ver los desgloses de tipos por URL para aquellos que están expuestos en las APIs de CrUX.

Nos encantaría recibir comentarios sobre esta incorporación a CrUX en las redes sociales o en el grupo de discusión de CrUX.