Experimentar con la medición de navegaciones suaves

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Desde su lanzamiento, la iniciativa de Métricas web esenciales busca medir la experiencia real del usuario de un sitio web, en lugar de los detalles técnicos detrás de cómo se crea o se carga. Las tres métricas de Core Web Vitals se crearon como métricas centradas en el usuario, una evolución de las métricas técnicas existentes, como DOMContentLoaded o load, que medían tiempos que, a menudo, no se relacionaban con la forma en que los usuarios percibían el rendimiento de la página. Por lo tanto, la tecnología que se usa para compilar el sitio no debería afectar la puntuación, siempre y cuando el sitio tenga un buen rendimiento.

La realidad siempre es un poco más complicada que lo ideal, y la popular arquitectura de aplicación de una sola página nunca fue totalmente compatible con las métricas de Métricas web esenciales. En lugar de cargar páginas web individuales y distintas a medida que el usuario navega por el sitio, estas aplicaciones web usan las llamadas "navegaciones suaves", en las que JavaScript cambia el contenido de la página. En estas aplicaciones, se mantiene la ilusión de una arquitectura de página web convencional alterando la URL y enviando URLs anteriores al historial del navegador para permitir que los botones Atrás y Adelante funcionen como el usuario espera.

Muchos frameworks de JavaScript usan este modelo, pero cada uno de una manera diferente. Dado que esto está fuera de lo que el navegador entiende tradicionalmente como una "página", medirlo siempre ha sido difícil: ¿dónde se debe trazar la línea entre una interacción en la página actual y considerarla como una página nueva?

El equipo de Chrome lleva tiempo considerando este desafío y busca estandarizar una definición de "navegación suave" y cómo se pueden medir las Métricas web esenciales para esto, de manera similar a como se miden los sitios web implementados en la arquitectura multipágina (MPA) convencional. Si bien aún se encuentra en las primeras etapas, el equipo ya está listo para que los sitios experimenten con lo que ya se implementó. Esto permitirá que los sitios proporcionen comentarios sobre el enfoque hasta el momento.

¿Qué es una navegación suave?

Llegamos a la siguiente definición de navegación suave:

  • La navegación se inicia con una acción del usuario.
  • La navegación genera un cambio de URL visible para el usuario y un cambio en el historial.
  • La navegación genera un cambio en el DOM.

En el caso de algunos sitios, estas heurísticas pueden generar falsos positivos (que los usuarios en realidad no considerarían que ocurrió una "navegación") o falsos negativos (donde el usuario considera que se produjo una "navegación" a pesar de no cumplir con estos criterios). Agradecemos los comentarios sobre las heurísticas en el repositorio de especificaciones de navegación suave.

¿Cómo implementa Chrome la navegación en software?

Una vez que se habiliten las heurísticas de navegación suave (obtén más información sobre esto en la siguiente sección), Chrome cambiará la forma en que informa algunas métricas de rendimiento:

Estos cambios permitirán que las Métricas web esenciales y algunas de las métricas de diagnóstico asociadas se midan por navegación de página, aunque se deben considerar algunos matices.

¿Cuáles son las implicaciones de habilitar las navegaciones suaves en Chrome?

Los siguientes son algunos de los cambios que los propietarios de sitios deben tener en cuenta después de habilitar esta función:

  • Es posible que se vuelvan a emitir eventos de FP, FCP y LCP adicionales para las navegaciones suaves. El Informe sobre la experiencia del usuario en Chrome (CrUX) ignorará estos valores adicionales, pero esto puede afectar cualquier supervisión de la medición de usuarios reales (RUM) en tu sitio. Consulta con tu proveedor de RUM si tienes alguna duda sobre si esto afectará las mediciones. Consulta la sección sobre cómo medir las métricas web esenciales para las navegaciones suaves.
  • Es posible que el nuevo atributo navigationID (y opcional) de tus entradas de rendimiento deba considerarse en el código de la aplicación mediante el uso de estas entradas.
  • Solo los navegadores basados en Chromium serán compatibles con este nuevo modo. Si bien muchas de las métricas más recientes solo están disponibles en navegadores basados en Chromium, algunas (FCP, LCP) sí lo están en otros navegadores, y es posible que no todos se hayan actualizado a la versión más reciente de los navegadores basados en Chromium. Por lo tanto, ten en cuenta que es posible que algunos usuarios no informen métricas de navegación táctil.
  • Como es una función nueva experimental que no está habilitada de forma predeterminada, los sitios deben probarla para asegurarse de que no haya otros efectos secundarios no deseados.

Para obtener más información sobre cómo medir las métricas de navegación táctil, consulta la sección Cómo medir las métricas web esenciales por navegación táctil.

¿Cómo habilito las navegaciones táctiles en Chrome?

Las navegaciones en software no están habilitadas de forma predeterminada en Chrome, pero están disponibles para la experimentación cuando se habilita esta función de forma explícita.

Los desarrolladores pueden habilitar esta función activando la marca Funciones experimentales de la plataforma web en chrome://flags/#enable-experimental-web-platform-features o usando el argumento de línea de comandos --enable-experimental-web-platform-features cuando se inicia Chrome.

¿Cómo puedo medir las navegaciones suaves?

Una vez que se habilite el experimento de navegación táctil, las métricas se informarán con la API de PerformanceObserver como de costumbre. Sin embargo, hay algunas consideraciones adicionales que se deben tener en cuenta para estas métricas.

Cómo informar navegaciones suaves

Puedes usar un PerformanceObserver para observar las navegaciones suaves. A continuación, se muestra un ejemplo de fragmento de código que registra las entradas de navegación táctil en la consola, incluidas las navegaciones táctiles anteriores en esta página con la opción buffered:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

Se puede usar para finalizar las métricas de toda la página para la navegación anterior.

Informa las métricas en relación con la URL adecuada

Dado que las navegaciones en software solo se pueden ver después de que ocurren, algunas métricas deberán finalizarse después de este evento y, luego, informarse para la URL anterior, ya que la URL actual ahora reflejará la URL actualizada de la página nueva.

El atributo navigationId del PerformanceEntry adecuado se puede usar para volver a vincular el evento a la URL correcta. Esto se puede buscar con la API de PerformanceEntry:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const pageUrl = navEntry?.name;

Este pageUrl debe usarse para informar las métricas en función de la URL correcta, en lugar de la URL actual que se pudo haber usado en el pasado.

Cómo obtener el startTime de las navegaciones suaves

La hora de inicio de la navegación se puede obtener de manera similar:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const startTime = navEntry?.startTime;

startTime es la hora de la interacción inicial (por ejemplo, un clic en un botón) que inició la navegación táctil.

Todos los tiempos de rendimiento, incluidos los de la navegación suave, se registran como un tiempo a partir del tiempo inicial de navegación "rígida" de la página. Por lo tanto, se necesita la hora de inicio de la navegación suave para establecer un modelo de referencia de los tiempos de métrica de carga de la navegación suave (por ejemplo, el LCP), en relación con este tiempo de navegación suave.

Mide las Métricas web esenciales por navegación táctil

Para incluir entradas de métricas de navegación táctil, debes incluir includeSoftNavigationObservations: true en la llamada observe de tu observador de rendimiento.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout Shift time:', entry);
  }
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});

Se necesita la marca includeSoftNavigationObservations adicional en el método observe, además de habilitar la función de navegación táctil en Chrome. Esta habilitación explícita a nivel del observador de rendimiento tiene como objetivo garantizar que los observadores de rendimiento existentes no se sorprendan con estas entradas adicionales, ya que se deben tener en cuenta algunas consideraciones adicionales cuando se intenta medir las métricas web esenciales para las navegaciones suaves.

Los tiempos se seguirán mostrando en función de la hora de inicio de la navegación "rígida" original. Por lo tanto, para calcular el LCP de una navegación integrada, por ejemplo, deberás tomar el tiempo del LCP y restar la hora de inicio de la navegación integrada adecuada, como se detalla anteriormente, para obtener un tiempo en relación con la navegación integrada. Por ejemplo, para el LCP:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const softNavEntry =
      performance.getEntriesByType('soft-navigation').filter(
        (navEntry) => navEntry.navigationId === entry.navigationId
      )[0];
    const hardNavEntry = performance.getEntriesByType('navigation')[0];
    const navEntry = softNavEntry || hardNavEntry;
    const startTime = navEntry?.startTime;
    console.log('LCP time:', entry.startTime - startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true, includeSoftNavigationObservations: true});

Tradicionalmente, algunas métricas se miden durante el ciclo de vida de la página: por ejemplo, el LCP puede cambiar hasta que se produce una interacción. El CLS y el INP pueden actualizarse hasta que salgas de la página. Por lo tanto, es posible que cada "navegación" (incluida la navegación original) deba finalizar las métricas de la página anterior a medida que se produce cada nueva navegación táctil. Esto significa que las métricas de navegación "duras" iniciales pueden finalizarse antes de lo habitual.

De manera similar, cuando comiences a medir las métricas de la nueva navegación táctil de estas métricas de larga duración, deberás "restablecerlas" o "reiniciarlas" y tratarlas como métricas nuevas, sin memoria de los valores que se establecieron para las "páginas" anteriores.

¿Cómo se debe tratar el contenido que permanece igual entre las navegaciones?

FP, FCP y LCP para las navegaciones suaves solo medirán las pinturas nuevas. Esto puede generar un LCP diferente, por ejemplo, de una carga en frío de esa navegación diferida a una carga diferida.

Por ejemplo, tomemos una página que incluye una imagen de banner grande que es el elemento LCP, pero el texto debajo cambia con cada navegación en pantalla. La carga inicial de la página marcará la imagen del banner como el elemento de LCP y basará el tiempo de LCP en eso. Para las navegaciones suaves posteriores, el texto debajo será el elemento más grande pintado después de la navegación suave y será el nuevo elemento LCP. Sin embargo, si se carga una página nueva con un vínculo directo en la URL de navegación suave, la imagen del banner será una pintura nueva y, por lo tanto, podrá considerarse como el elemento LCP.

Como se muestra en este ejemplo, el elemento LCP de la navegación suave se puede informar de manera diferente según cómo se cargue la página, de la misma manera que cargar una página con un vínculo de anclaje más abajo puede generar un elemento LCP diferente.

¿Cómo se mide el TTFB?

El tiempo hasta el primer byte (TTFB) de una carga de página convencional representa el tiempo que se devuelven los primeros bytes de la solicitud original.

Para una navegación suave, esta es una pregunta más complicada. ¿Debemos medir la primera solicitud de la nueva página? ¿Qué sucede si todo el contenido ya existe en la app y no hay solicitudes adicionales? ¿Qué sucede si esa solicitud se realiza con anticipación con un almacenamiento en caché anticipado? ¿Qué sucede si una solicitud no está relacionada con la navegación táctil desde la perspectiva del usuario (por ejemplo, es una solicitud de estadísticas)?

Un método más sencillo es informar un TTFB de 0 para las navegaciones suaves, de manera similar a como lo recomendamos para los restablecimientos de la Memoria caché atrás/adelante. Este es el método que usa la biblioteca web-vitals para las navegaciones suaves.

En el futuro, es posible que ofrezcamos formas más precisas de saber cuál es la "solicitud de navegación" de la navegación en pantalla y podremos tener mediciones del TTFB más precisas. Pero eso no forma parte del experimento actual.

¿Cómo medir lo nuevo y lo antiguo?

Durante este experimento, se recomienda seguir midiendo tus Métricas web esenciales de la forma actual, en función de las navegaciones de página "difíciles" para que coincidan con lo que CrUX medirá y registrará como el conjunto de datos oficial de la iniciativa de Métricas web esenciales.

Además de estas navegaciones en software, se deben medir las navegaciones en software para permitirte ver cómo se podrían medir en el futuro y darte la oportunidad de enviar comentarios al equipo de Chrome sobre cómo funciona esta implementación en la práctica. Esto te ayudará a ti y al equipo de Chrome a definir la API en el futuro.

Para medir ambas métricas, debes tener en cuenta los eventos nuevos que se pueden emitir mientras la app está en modo de navegación táctil (por ejemplo, varios eventos de FCP y eventos de LCP adicionales) y controlarlos de forma adecuada finalizando estas métricas en el momento adecuado, a la vez que ignoras los eventos futuros que solo se aplican a las navegaciones táctiles.

Usa la biblioteca web-vitals para medir las métricas web esenciales de las navegaciones suaves

La forma más sencilla de tener en cuenta todos los matices es usar la biblioteca de JavaScript web-vitals, que tiene compatibilidad experimental con las navegaciones suaves en un soft-navs branch independiente (que también está disponible en npm y unpkg). Esto se puede medir de la siguiente manera (reemplaza doTraditionalProcessing y doSoftNavProcessing según corresponda):

import {
  onTTFB,
  onFCP,
  onLCP,
  onCLS,
  onINP,
} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';

onTTFB(doTraditionalProcessing);
onFCP(doTraditionalProcessing);
onLCP(doTraditionalProcessing);
onCLS(doTraditionalProcessing);
onINP(doTraditionalProcessing);

onTTFB(doSoftNavProcessing, {reportSoftNavs: true});
onFCP(doSoftNavProcessing, {reportSoftNavs: true});
onLCP(doSoftNavProcessing, {reportSoftNavs: true});
onCLS(doSoftNavProcessing, {reportSoftNavs: true});
onINP(doSoftNavProcessing, {reportSoftNavs: true});

Asegúrate de que las métricas se registren en la URL correcta como se indicó anteriormente.

La biblioteca web-vitals informa las siguientes métricas para las navegaciones en software:

Métrica Detalles
TTFB Se informa como 0.
FCP Solo se informa el primer FCP de la página.
LCP Es la hora del siguiente procesamiento de imagen con contenido más grande, en relación con la hora de inicio de la navegación suave. No se consideran las pinturas existentes de la navegación anterior. Por lo tanto, el LCP será >= 0. Como de costumbre, esto se informará después de una interacción o cuando la página esté en segundo plano, ya que solo entonces se puede finalizar el LCP.
CLS La ventana de cambios más grande entre los tiempos de navegación. Como de costumbre, esto ocurre cuando la página se pone en segundo plano, ya que solo entonces se puede finalizar el CLS. Si no hay turnos, se informa un valor de 0.
INP El INP entre los tiempos de navegación. Como de costumbre, se informará esto después de una interacción o cuando la página esté en segundo plano, ya que solo entonces se puede finalizar la INP. No se informa un valor 0 si no hay interacciones.

¿Estos cambios formarán parte de las mediciones de Métricas web esenciales?

Este experimento de navegación suave es exactamente eso: un experimento. Queremos evaluar las heurísticas y ver si reflejan con mayor precisión la experiencia del usuario antes de tomar una decisión sobre si se integrarán en la iniciativa de métricas web esenciales. Nos entusiasma mucho la posibilidad de realizar este experimento, pero no podemos garantizar si reemplazará o cuándo reemplazará las mediciones actuales.

Valoramos los comentarios de los desarrolladores web sobre el experimento, la heurística utilizada y si consideras que refleja la experiencia con mayor precisión. El repositorio de GitHub de navegación suave es el mejor lugar para enviar esos comentarios, aunque los errores individuales con la implementación de Chrome de esta función deben informarse en la Herramienta de seguimiento de errores de Chrome.

¿Cómo se informarán las navegaciones táctiles en CrUX?

Aún se desconoce cómo se informará exactamente la navegación táctil en CrUX, si este experimento tiene éxito. No es necesariamente un hecho que se tratarán de la misma manera que se tratan las navegaciones "duras" actuales.

En algunas páginas web, las navegaciones suaves son casi idénticas a las cargas de página completas en lo que respecta al usuario, y el uso de la tecnología de aplicación de una sola página es solo un detalle de implementación. En otros casos, pueden ser más similares a una carga parcial de contenido adicional.

Por lo tanto, es posible que decidamos informar estas navegaciones suaves por separado en CrUX o darles un peso cuando calculemos las métricas web esenciales de una página o un grupo de páginas determinado. A medida que evoluciona la heurística, es posible que también se pueda excluir por completo la navegación de carga parcial.

El equipo se está concentrando en la implementación heurística y técnica, lo que nos permitirá juzgar el éxito de este experimento, por lo que no se ha tomado ninguna decisión en estos frentes.

Comentarios

Estamos buscando activamente comentarios sobre este experimento en los siguientes lugares:

Registro de cambios

Debido a que esta API es experimental, se le están produciendo varios cambios, más que con las APIs estables. Consulta el registro de cambios de las heurísticas de navegación suave para obtener más detalles.

Conclusión

El experimento de navegaciones suaves es un enfoque emocionante sobre cómo la iniciativa de Métricas web esenciales podría evolucionar para medir un patrón común en la Web moderna que falta en nuestras métricas. Si bien este experimento aún está en sus inicios y queda mucho por hacer, es un paso importante que el progreso hasta el momento esté disponible para que la comunidad web más amplia lo experimente. Recopilar los comentarios de este experimento es otra parte fundamental del experimento, por lo que recomendamos encarecidamente a aquellos interesados en este desarrollo que aprovechen esta oportunidad para ayudar a dar forma a la API y asegurarse de que represente lo que esperamos poder medir con esto.

Agradecimientos

Imagen en miniatura de Jordan Madrid en Unsplash