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. Esto 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 que cuando observes el rendimiento de tu sitio, es útil comprender la frecuencia relativa de cada uno de ellos. Por ejemplo, cuando una navegación usa el botón de retroceso (bfcache), por lo general, se genera una navegación casi instantánea, que se refleja en métricas de LCP y FCP muy pequeñas, y métricas de INP y CLS reducidas.

Exponiendo el desglose del tipo de navegación, esperamos incentivar a los propietarios de sitios a que conozcan mejor los tipos de navegación que se usan en sus sitios, y a fomentar algunos de los tipos más rápidos mediante 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 de CrUX diaria, la API de CrUX History (con un historial de 3 semanas disponible inicialmente y que aumenta de forma semanal a una cobertura completa durante los próximos 6 meses), el conjunto de datos de CrUX BigQuery más reciente y el Panel de CrUX. Tener el historial también permite a los propietarios del sitio ver los cambios en el uso de los tipos de navegación a lo largo del tiempo. Esto puede permitir el seguimiento de mejoras (por ejemplo, quitar el bloqueo de la bfcache). También puede ayudar a explicar los cambios en las métricas incluso cuando no se realizaron 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 hacia arriba).

Limitaciones de los tipos de navegación en CrUX

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

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 usuario real (RUM) para poder dividir el tráfico en función de criterios como los tipos de navegación. Ten en cuenta que es posible que veas diferencias en los tipos de navegación en estas soluciones según los tipos informados y las páginas vistas que se incluyen. Consulta el artículo ¿Por qué los datos de CrUX son diferentes de mis datos de RUM?

Los RUM también pueden proporcionar un mayor nivel de detalle sobre problemas específicos de rendimiento. Por ejemplo, si bien CrUX puede implicar que sería conveniente mejorar la elegibilidad de la bfcache, la API de bfcache notRestoredReasons puede informar exactamente 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 con más detalle 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ágina 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áginas) y 1.0 (que indica el 100% de las cargas de páginas) para la clave determinada.

Como puedes ver en esta respuesta, para el período de recopilación a partir del 6 de marzo de 2024, hasta el 2 de abril de 2024 inclusive, el 6.77% de las navegaciones (cargas de páginas) se publicaron desde la bfcache del navegador. Del mismo modo, algunas de las otras fracciones pueden ayudar a identificar oportunidades para optimizar la carga de páginas. 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 navigation_types sumarán 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 queryRecord. Por ejemplo, nuestro Colab de 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, 7 días de diferencia). Una vez que se complete la información, se cubrirán los 25 períodos de recopilación. La visualización de este historial permite confirmar si las optimizaciones entraron en vigor o retrocedieron. Esto es especialmente cierto para la configuración de la caché HTTP, la optimización de una página para la bfcache y la renderización previa.

Tipos de navegación en CrUX BigQuery

Las tablas de CrUX BigQuery 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 detallada en CrUX BigQuery proporciona histogramas detallados para 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 rendimiento de carga instantáneo o bueno.

Como ejemplo, observamos la fracción de back_forward_cache y su correlación con la frecuencia con la que las páginas se cargan de forma instantánea (instant_lcp_density definido como LCP <= 200 ms) y la frecuencia con la que se observó un LCP bueno (good_lcp_density se definió como LCP <= 2,500 ms). Observamos una fuerte correlación estadística entre back_forward_cache y instant_lcp_density (TensorFlow=0.87), que se muestra en el siguiente diagrama, y una correlación moderada entre back_forward_cache y good_lcp_density (r=0.29).

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 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 (consulta la cláusula WHERE).
• Cuando se consulta la métrica navigation_types en BigQuery, es necesario dividirla por el total de las fracciones navigation_types, ya que la suma es 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 más económico) consultar las tablas materializadas. Por ejemplo, en la siguiente consulta, se extraen los datos disponibles de navigation_types 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 sumarán 1.0 por fila, por lo que es necesario dividir cada fracción por la suma de los resultados sobre los que se debe interpretar la consulta.

El motivo es que las fracciones de navigation_type en chrome-ux-report.materialized.device_summary, como las densidades de histogramas, suman hasta 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 entre 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ágina 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 teléfonos, el 1.79% en computadoras de escritorio y el 0.09% en tablets.

El porcentaje considerablemente mayor de back_forward en phone sugiere que podríamos intentar optimizar estas cargas de página para que se puedan publicar desde bfcache.

Sin embargo, también es importante considerar qué fracción de las cargas de página ya entrega la bfcache, es decir, la tasa de aciertos de la bfcache. La siguiente consulta sugiere que este origen en particular puede ya estar bien optimizado, dadas las tasas de hits superiores al 60% para 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 un menor uso de la bfcache, sino que se trata más de un reflejo de cómo los usuarios navegan más atrás y adelante en los 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 están disponibles inicialmente los datos de un mes, pero, con el tiempo, el historial se llenará y te permitirá ver los cambios en los tipos mes a mes.

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

Conclusión

Esperamos que los desgloses por tipos de navegación en CrUX te resulten útiles y 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 cargar páginas mucho más rápidas que aquellas que requieren regresar al servidor.

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

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