Chrome 108 presentó dos nuevos modos, Ahorro de memoria y Ahorro de energía, para brindar a los usuarios más control sobre el modo en que Chrome utiliza sus recursos del sistema.
Si bien estos nuevos modos se orientan principalmente a los usuarios, tienen algunas implicaciones que es importante que los desarrolladores web deben conocer, ya que pueden afectar la experiencia del usuario de 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 el modo Ahorro de memoria esté habilitado, Chrome descartará de forma proactiva las pestañas que no se hayan usado en segundo plano durante un tiempo. Esto 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 pestañas de sitios específicos. Sin embargo, esta es una preferencia del usuario y no algo que tú puedes controlar como desarrollador.
Cuando se descarta una pestaña, su título y su ícono de página aún aparecen en la barra de pestañas, pero la página 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 que solo tienen contenido, descartar y volver a cargar una pestaña probablemente no afectará la experiencia del usuario. Sin embargo, en el caso de los sitios interactivos y enriquecidos con flujos de usuarios complejos, volver a cargar la página en medio de ese flujo podría ser extremadamente frustrante si el sitio no puede restablecer la página exactamente donde la dejó el usuario.
Chrome lleva años descartar las pestañas para conservar la memoria, pero solo se lo hacía en situaciones en las que el sistema estaba bajo presión de memoria. Dada su situación relativamente infrecuente, es posible que los desarrolladores web no se hayan dado cuenta de que estaba ocurriendo.
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 controlar el descarte de pestañas
La opción para descartar pestañas no es un nuevo desafío para los desarrolladores web. Siempre ha sido posible que un usuario vuelva a cargar una página, ya sea de forma intencional o accidental, antes de completar una tarea. Por lo tanto, siempre fue importante que los sitios almacenen el estado del usuario para poder restablecerlo si el usuario sale y regresa.
La consideración más importante no es si se almacenará el estado del usuario, sino cuándo se debe almacenar. Y esto es clave, ya que no se activa ningún evento cuando se descarta una pestaña, por lo que no hay forma de que los desarrolladores reaccionen ante el hecho de que esto 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).
Los peores momentos para almacenar el estado son los siguientes:
- 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 completamente 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 mientras se descarta una página. Como se puede observar en ese diagrama, una pestaña puede pasar del estado "oculto" al estado "descartada" 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 la descarte o el usuario la cierre. Por eso, es importante que siempre guardes los estados de usuario no guardados en el evento visibilitychange, ya que es posible que no tengas otra oportunidad.
El siguiente código describe una lógica de ejemplo para poner en cola el estado actual del usuario cada vez que este cambia, o inmediatamente si el usuario deja en segundo plano la pestaña o sale de ella:
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();
}
});
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 es posible detectar que se haya descartado después de que el usuario vuelva a ella y se vuelva a cargar la página. En estos casos, 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 quieres comprender la frecuencia con la que los usuarios experimentan este tipo de situaciones, puedes configurar tu herramienta de estadísticas para captar esta información.
Por ejemplo, en Google Analytics, puedes configurar un parámetro del evento personalizado que te permitirá determinar qué porcentaje de vistas de página provinieron de los descartes de pestañas:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Si eres proveedor de servicios de analítica, te recomendamos que agregues esta dimensión a tu producto de forma predeterminada.
Cómo probar tu sitio en el modo de Ahorro de memoria
Para probar cómo una página se descarta, cárgala y visita chrome://discards en otra pestaña o ventana.
En la IU de chrome://discards, puedes encontrar 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 en el mismo estado en que estaba cuando la abandonaste.
Ten en cuenta que actualmente no hay una manera de automatizar el descarte de pestañas a través de herramientas de prueba como Webdriver o Tippeteer. Sin embargo, dado que los descarte y restablecimientos de pestañas son casi idénticos a las recargas de páginas, si pruebas que el estado del usuario se restablece después de una recarga en medio de un flujo de usuarios, es probable que también funcione para un descarte o 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 usar recargas para probar el comportamiento de descartar o restablecer.
Modo de ahorro de energía
Cuando el modo Ahorro de energía está habilitado, Chrome reduce la frecuencia de actualización de la pantalla para conservar la batería, lo que afecta la fidelidad del desplazamiento y la animación, y las velocidades de fotogramas de 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 pantalla cuando este modo esté habilitado.
El escenario principal en el que este modo podría ser problemático 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 lentas cuando esté habilitado el modo de Ahorro de energía.
Ten en cuenta que siempre ha sido problemático para los desarrolladores asumir una frecuencia de actualización predeterminada de 60 Hz para todos los usuarios, ya que no es así en muchos dispositivos actuales.
Cómo medir la frecuencia de actualización de 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 requestAnimationFrame() sucesivas. 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 cuando cambia la frecuencia. Para ello, debes ejecutar una encuesta de requestAnimationFrame() de forma constante, lo que anula el objetivo de ahorrar energía o duración de batería para los usuarios.
Prueba tu sitio en modo Ahorro de energía
Una forma de probar tu sitio en el modo de Ahorro de energía es habilitar el modo en la configuración de Chrome y configurarlo para que se ejecute cuando el dispositivo esté desconectado.
Si no tienes un dispositivo que se pueda desconectar, 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 el modo de ahorro de batería (importante: Se debe habilitar la marca#battery-saver-mode-availablepara que funcione el vínculo).
Una vez habilitada, puedes 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 Ahorro de memoria y Ahorro de energía de Chrome son funciones para los usuarios principalmente, tienen implicaciones para los desarrolladores, ya que pueden afectar negativamente la experiencia de visitar tu sitio si no se manejan correctamente.
En general, estos modos nuevos se diseñaron teniendo en cuenta las prácticas recomendadas para desarrolladores existentes. Si los desarrolladores han estado siguiendo las recomendaciones web desde hace mucho tiempo, sus sitios deberían seguir funcionando bien con estos nuevos modos.
Sin embargo, si tu sitio contiene alguna de las prácticas que se mencionan en esta publicación, es probable que tus usuarios tengan problemas que solo aumentarán con estos dos modos habilitados.
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.