O Chrome 108 introduziu dois novos modos, Economia de memória e Economia de energia, para dar aos usuários mais controle sobre como o Chrome utiliza os recursos do sistema.
Embora esses novos modos sejam voltados principalmente ao usuário, eles têm algumas implicações importantes para os desenvolvedores Web, já que podem afetar a experiência do usuário no seu site.
Esta postagem aborda os possíveis efeitos desses novos modos e o que os desenvolvedores Web podem fazer para garantir que eles ofereçam a melhor experiência possível.
Modo Economia de memória
Quando o modo Economia de memória está ativado, o Chrome descarta proativamente as guias que não são usadas em segundo plano há algum tempo. Isso libera memória para guias ativas e para outros aplicativos que podem estar em execução. Os usuários podem instruir o Chrome a não descartar guias para sites específicos. No entanto, essa é uma preferência do usuário, e não algo que você possa controlar como desenvolvedor.
Quando uma guia é descartada, o título e o favicon dela ainda aparecem na barra de guias, mas a página é removida, exatamente como se a guia tivesse sido fechada normalmente. Se o usuário acessar novamente essa guia, a página será atualizada automaticamente.
Para páginas puramente de conteúdo, descartar e recarregar uma guia provavelmente não afetará a experiência do usuário, mas para sites avançados e interativos com fluxos de usuário complexos, uma atualização no meio desse fluxo poderá ser extremamente frustrante se o site não conseguir restaurar a página exatamente de onde o usuário parou.
O Chrome já vem fazendo há anos o descarte de guias para economizar memória, mas isso só era feito em situações em que o sistema estava sob pressão de memória. Devido à sua ocorrência relativamente rara, os desenvolvedores Web podem não ter percebido que isso estava acontecendo.
A partir do Chrome 108, o descarte de guias será mais comum. Por isso, é fundamental que os sites lidem com essas ocorrências sem problemas.
Práticas recomendadas para descarte de guias
O descarte de guias não é um novo desafio para os desenvolvedores Web. Um usuário sempre pode recarregar uma página, intencionalmente ou sem querer, antes de concluir a tarefa. Por isso, é importante que os sites armazenem o estado do usuário para que ele possa ser restaurado caso o usuário saia e volte.
A consideração mais importante não é se armazenar o estado do usuário, mas quando armazená-lo. Isso é fundamental, porque não há um evento que é acionado quando uma guia é descartada. Assim, os desenvolvedores não podem reagir ao que está acontecendo. Em vez disso, os desenvolvedores precisam antecipar essa possibilidade e se preparar com antecedência.
Os melhores momentos para armazenar o estado do usuário são:
- Periodicamente, à medida que o estado muda.
- Sempre que uma guia estiver em segundo plano (o evento
visibilitychange).
Os piores momentos para armazenar o estado são:
- Em um callback de evento
beforeunload. - Em um callback de evento
unload.
Esses são os piores momentos para armazenar o estado, porque esses eventos não são confiáveis e não são disparados em muitas situações, incluindo quando uma guia está sendo descartada.
Consulte o diagrama de eventos do ciclo de vida da página para ver quais eventos devem ser disparados quando uma página é descartada. Como é possível ver no diagrama, uma guia pode sair do ponto para o estado "descartado" estado sem disparar eventos.
Na verdade, sempre que a página
é ocultada não há garantia de que outros eventos serão disparados antes que a página seja descartada pelo navegador ou encerrada pelo usuário. Por isso, é importante sempre armazenar o estado do usuário não salvo no evento visibilitychange, já que talvez você não tenha outra chance.
O código a seguir descreve uma lógica de exemplo para enfileirar o estado atual do usuário sempre que ele mudar ou imediatamente se o usuário colocar a guia em segundo plano ou sair:
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();
}
});
Como detectar que uma guia foi descartada
Como mencionado anteriormente, não é possível detectar que uma guia está prestes a ser descartada, mas é possível detectar que uma guia foi descartada depois que um usuário retorna a ela e a página é atualizada. Nessas situações, a propriedade document.wasDiscarded será verdadeira.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Se quiser saber com que frequência os usuários enfrentam esses tipos de situações, configure sua ferramenta de análise para coletar essas informações.
Por exemplo, no Google Analytics, é possível configurar um parâmetro de evento personalizado para determinar qual porcentagem de visualizações de página veio de descartes de guias:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Se você é um provedor de análises, considere adicionar essa dimensão ao seu produto por padrão.
Testar seu site no modo Economia de memória
Para testar como uma página é descartada, carregue a página e acesse chrome://discards em outra guia ou janela.
Na interface do chrome://discards, localize a guia que você quer descartar na lista e clique em Descartar urgente na coluna Ações.
Isso descartará a guia, permitindo que você a acesse novamente e verifique se a página foi atualizada para o mesmo estado em que estava quando você a deixou.
No momento, não existe uma maneira de automatizar o descarte de guias usando ferramentas de teste como webdriver ou marionet. No entanto, como os descartes e as restaurações da guia são quase idênticos aos recarregamentos de página, se você testar se o estado do usuário é restaurado após uma recarga no meio do fluxo do usuário, provavelmente isso também funciona para o descarte/restauração. A principal diferença entre os dois é que os eventos beforeunload, pagehide e unload não são disparados quando uma guia está sendo descartada. Portanto, se você não depender desses eventos para manter o estado do usuário, poderá usar atualizações para testar o comportamento de descarte/restauração.
Modo Economia de energia
Quando o modo Economia de energia está ativado, o Chrome economiza energia da bateria reduzindo a taxa de atualização da tela, afetando a fidelidade da rolagem e da animação e as taxas de frames do vídeo.
Em geral, os desenvolvedores não precisam fazer nada para ativar o modo de Economia de energia. As APIs CSS e JavaScript para animações, transições e requestAnimationFrame() vão se ajustar automaticamente a qualquer mudança na taxa de atualização da tela quando esse modo estiver ativado.
O cenário principal em que esse modo poderia ser problemático é se o site usar animações baseadas em JavaScript que pressupõem uma taxa de atualização específica para todos os usuários.
Por exemplo, se o site usar repetições requestAnimationFrame() e presumir que exatamente 16,67 milissegundos terão se passado entre os callbacks, suas animações serão executadas duas vezes mais lentamente quando o modo de Economia de energia estiver ativado.
Observe que sempre foi problemático para os desenvolvedores assumir uma taxa de atualização padrão de 60 Hz para todos os usuários, já que isso não é verdade para muitos dispositivos atuais.
Como medir a taxa de atualização da tela
Não há uma API da Web dedicada para medir a taxa de atualização da tela e, em geral, não é recomendável tentar fazer isso com as APIs atuais.
O melhor que os desenvolvedores podem fazer com as APIs atuais é comparar os carimbos de data/hora entre callbacks requestAnimationFrame() sucessivos. Embora isso funcione na maioria dos casos para aproximar a taxa de atualização em um determinado momento, ele não informa quando a taxa de atualização muda. Para fazer isso, você teria que executar uma enquete do requestAnimationFrame() constantemente, o que invalida o objetivo de conservar energia ou a duração da bateria dos usuários.
Como testar seu site no modo de Economia de energia
Uma forma de testar o site no modo Economia de energia é ativar o modo nas configurações do Chrome e configurá-lo para ser executado quando o dispositivo estiver desconectado.
Se você não tiver um dispositivo que possa ser desconectado, também poderá ativar o modo manualmente seguindo estas etapas:
- Ative a sinalização
chrome://flags/#battery-saver-mode-available. - Acesse
chrome://discardse clique no link Alternar modo de economia de bateria (importante:a flag#battery-saver-mode-availableprecisa estar ativada para que o link funcione).
Depois de ativado, você pode interagir com seu site e verificar se tudo está como deveria: por exemplo, se as animações e transições são executadas na velocidade desejada.
Resumo
Embora os modos Economia de memória e Economia de energia do Chrome sejam recursos voltados principalmente ao usuário, eles têm implicações para os desenvolvedores, já que podem afetar negativamente a experiência de visita ao site se não forem processados corretamente.
Em geral, esses novos modos foram criados considerando as práticas recomendadas dos desenvolvedores. Se os desenvolvedores têm seguido as práticas recomendadas da Web de longa data, os sites devem continuar funcionando bem com esses novos modos.
No entanto, caso seu site tenha alguma das práticas mencionadas nesta postagem, é provável que os usuários estejam enfrentando problemas que só aumentarão com esses dois modos ativados.
Como sempre, a melhor maneira de confirmar se você está proporcionando uma ótima experiência é testar seu site com condições que correspondam às condições de seus usuários.