Chrome 108 presentó dos modos nuevos, Ahorro de memoria y Ahorro de energía, para brindarles a los usuarios más control sobre la forma en que Chrome usa sus recursos del sistema.
Si bien estos nuevos modos se orientan principalmente a los usuarios, tienen algunas implicaciones que los desarrolladores web deben tener en cuenta, ya que pueden afectar la experiencia del usuario en tu sitio.
En esta publicación, abordaremos los posibles efectos de estos nuevos modos y qué pueden hacer los desarrolladores web para asegurarse de ofrecer la mejor experiencia posible.
Modo de Ahorro de memoria
Cuando se habilita el modo de Ahorro de memoria, Chrome descarta de manera proactiva las pestañas que no se usan en segundo plano durante un tiempo. De esta manera, se libera memoria para las pestañas activas y para otras aplicaciones que puedan estar en ejecución. Los usuarios pueden indicar a Chrome que no descarte las pestañas de sitios específicos. Sin embargo, esta es una preferencia del usuario y no es algo que puedas controlar como desarrollador.
Cuando se descarta una pestaña, el título y el ícono de página aparecen en la barra de pestañas, pero la página en sí desaparece, como si la pestaña se hubiera cerrado normalmente. Si el usuario vuelve a visitar esa pestaña, la página se volverá a cargar automáticamente.
En el caso de las páginas puramente de contenido, es probable que descartar y volver a cargar una pestaña no afecte la experiencia del usuario, pero en el caso de los sitios interactivos e interactivos con flujos de usuario complejos, volver a cargar la página en medio de ese flujo podría ser muy frustrante si el sitio no puede restablecer la página exactamente donde el usuario la dejó.
Chrome hace años que se descartan las pestañas para conservar la memoria, pero solo se hacía cuando el sistema estaba bajo presión de memoria. Debido a su infrecuente caso, es posible que los desarrolladores web no se dieran cuenta de que estaba sucediendo.
A partir de Chrome 108, el descarte de pestañas será más común, por lo que es fundamental que los sitios puedan manejar estos casos correctamente.
Prácticas recomendadas para administrar los descartes de pestañas
La acción de descartar pestañas no es un nuevo desafío para los desarrolladores web. Siempre es posible que un usuario vuelva a cargar una página, ya sea de forma intencional o accidental, antes de completar su tarea. Por lo tanto, siempre ha sido importante que los sitios almacenen el estado del usuario para poder restablecerlo si el usuario se va y regresa.
La consideración más importante no es si se debe almacenar el estado del usuario, sino cuándo se debe almacenar. Esto es clave porque no se activa ningún evento cuando se descarta una pestaña, por lo que no hay forma de que los desarrolladores reaccionen al hecho de que está sucediendo. En cambio, los desarrolladores deben anticipar esta posibilidad y prepararse con anticipación.
Los mejores momentos para almacenar el estado del usuario son los siguientes:
- Periódicamente a medida que cambia el estado
- Cuando una pestaña pasa a segundo plano (el evento
visibilitychange).
Estos son los peores momentos para almacenar el estado:
- En una devolución de llamada de evento
beforeunload - En una devolución de llamada de evento
unload
Estos son los peores momentos para almacenar el estado porque estos eventos son poco confiables y no se activan en muchas situaciones, incluso cuando se descarta una pestaña.
Puedes consultar el diagrama de eventos del ciclo de vida de la página para ver qué eventos se espera que se activen cuando se descarta una página. Como puedes ver en ese diagrama, una pestaña puede ir desde los al estado "descartado" sin que se activen los eventos.
De hecho, cada vez que la página está "oculta" , no hay garantía de que se activen otros eventos antes de que el navegador descarte la página o la cierre el usuario. Por eso, es importante almacenar siempre el estado del usuario que no se haya guardado en el evento visibilitychange, ya que es posible que no tengas otra oportunidad.
En el siguiente código, se describe una lógica de ejemplo para poner en cola la persistencia del estado actual del usuario cada vez que cambia, o inmediatamente si el usuario deja la pestaña en segundo plano o se aleja:
let state = {};
let hasUnstoredState = false;
function storeState() {
if (hasUnstoredState) {
// Store `state` to localStorage or IndexedDB...
}
hasUnstoredState = false;
}
export function updateState(newState) {
state = newState;
hasUnstoredState = true;
requestIdleCallback(storeState);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
storeState();
}
});
Cómo detectar que se descartó una pestaña
Como se mencionó anteriormente, no es posible detectar que una pestaña está a punto de descartarse, pero sí que se descartó después de que un usuario regresa a ella y la página se vuelve a cargar. En estas situaciones, la propiedad document.wasDiscarded será verdadera.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Si deseas comprender con qué frecuencia tus usuarios experimentan este tipo de situaciones, puedes configurar tu herramienta de estadísticas para recopilar esta información.
Por ejemplo, en Google Analytics, puedes configurar un parámetro de evento personalizado que te permitirá determinar qué porcentaje de vistas de página provino de los descartes de pestañas:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Si es un proveedor de servicios de analítica, le recomendamos que agregue esta dimensión a su producto de forma predeterminada.
Cómo probar tu sitio en el modo Ahorro de memoria
Para probar cómo se descarta una página, cárgala y visita chrome://discards en una pestaña o ventana independiente.
En la IU de chrome://discards, puedes ubicar la pestaña que deseas descartar de la lista y, luego, hacer clic en Descartar urgente en la columna Acciones.
Esto descartará la pestaña, lo que te permitirá volver a visitarla y verificar que la página se haya vuelto a cargar al mismo estado que estaba cuando la abandonaste.
Ten en cuenta que actualmente no existe una forma de automatizar la descarte de pestañas a través de herramientas de prueba como webdriver o titiriter. Sin embargo, dado que los descartes y restablecimientos de pestañas son casi idénticos a las recargas de páginas, si pruebas que el estado del usuario se restablezca después de una recarga en medio de un flujo de usuario, es probable que también funcione para un proceso de descarte y restablecimiento. La diferencia principal entre ambos es que los eventos beforeunload, pagehide y unload no se activan cuando se descarta una pestaña. Por lo tanto, siempre que no dependas de esos eventos para conservar el estado del usuario, puedes volver a cargar la página para probar el comportamiento de descartar y restablecer.
Modo de Ahorro de energía
Cuando se habilita el modo de Ahorro de energía, Chrome conserva la batería, ya que reduce la frecuencia de actualización de la pantalla, lo que afecta la fidelidad del desplazamiento y la animación, y la velocidad de fotogramas del video.
En general, los desarrolladores no necesitan hacer nada para admitir el modo de Ahorro de energía. Las APIs de CSS y JavaScript para animaciones, transiciones y requestAnimationFrame() se ajustarán automáticamente a cualquier cambio en la frecuencia de actualización de la pantalla cuando este modo esté habilitado.
La situación principal en la que este modo podría causar problemas es si tu sitio usa animaciones basadas en JavaScript que suponen una frecuencia de actualización particular para todos los usuarios.
Por ejemplo, si tu sitio usa bucles requestAnimationFrame() y supone que transcurrieron exactamente 16.67 milisegundos entre devoluciones de llamada, tus animaciones se ejecutarán el doble de lento cuando se habilite el modo de Ahorro de energía.
Ten en cuenta que siempre ha sido problemático para los desarrolladores suponer una frecuencia de actualización predeterminada de 60 Hz para todos los usuarios, ya que no sucede lo mismo con muchos dispositivos actuales.
Cómo medir la frecuencia de actualización de la pantalla
No hay una API web dedicada para medir la frecuencia de actualización de la pantalla y, en general, no se recomienda intentar hacerlo con las APIs actuales.
Lo mejor que pueden hacer los desarrolladores con las APIs existentes es comparar las marcas de tiempo entre devoluciones de llamada sucesivas de requestAnimationFrame(). Si bien esto funciona en la mayoría de los casos para aproximar la frecuencia de actualización en un momento determinado, no te informa cuándo cambia la frecuencia de actualización. Para ello, tendrías que ejecutar constantemente una encuesta de requestAnimationFrame(), que contradice el objetivo de ahorrar energía o duración de batería para los usuarios.
Cómo probar tu sitio en el modo de Ahorro de energía
Una forma de probar tu sitio en el modo de Ahorro de energía es habilitarlo en la configuración de Chrome y configurarlo para que se ejecute cuando el dispositivo esté desenchufado.
Si no tienes un dispositivo que se pueda desenchufar, también puedes habilitar el modo manualmente siguiendo estos pasos:
- Habilita la marca
chrome://flags/#battery-saver-mode-available. - Visita
chrome://discardsy haz clic en el vínculo Activar o desactivar modo de ahorro de batería (importante: la marca#battery-saver-mode-availabledebe estar habilitada para que el vínculo funcione).
Una vez que lo hagas, podrás interactuar con tu sitio y verificar que todo se vea como debería; por ejemplo, que las animaciones y transiciones se ejecuten a la velocidad deseada.
Resumen
Si bien los modos de Ahorro de memoria y Ahorro de energía de Chrome son principalmente funciones para el usuario, tienen implicaciones para los desarrolladores, ya que pueden afectar negativamente la experiencia de visitar tu sitio si no se administran de forma adecuada.
En general, estos nuevos modos se diseñaron teniendo en cuenta las prácticas recomendadas para desarrolladores existentes. Si los desarrolladores siguen prácticas recomendadas de la Web de larga data, sus sitios deberían seguir funcionando bien con estos nuevos modos.
Sin embargo, si tu sitio contiene alguna de las prácticas mencionadas en esta publicación, es probable que los usuarios experimenten problemas que solo aumenten si se habilitan estos dos modos.
Como siempre, la mejor manera de confirmar que ofreces una experiencia excelente es probar tu sitio con condiciones que coincidan con las de tus usuarios.