O Chrome 108 lançou dois novos modos, Economia de memória e Economia de energia, para dar aos usuários mais controle sobre como o Chrome usa os recursos do sistema.
Embora esses novos modos sejam voltados principalmente para o usuário, eles têm algumas implicações que são importantes para os desenvolvedores da Web, pois 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 da Web podem fazer para garantir a melhor experiência possível.
Modo de 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 de 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 desaparece, exatamente como se a guia tivesse sido fechada normalmente. Se o usuário acessar novamente a guia, a página será recarregada automaticamente.
Para páginas exclusivamente de conteúdo, descartar e recarregar uma guia provavelmente não afetará a experiência do usuário. No entanto, para sites avançados e interativos com fluxos de usuários complexos, uma atualização no meio desse fluxo pode ser extremamente frustrante se o site não conseguir restaurar a página exatamente de onde o usuário parou.
Descartar guias para economizar memória é algo que o Chrome faz há anos, mas só foi feito em situações em que o sistema estava sob pressão de memória. Devido à sua ocorrência relativamente rara, os desenvolvedores da web podem não ter percebido que isso estava acontecendo.
A partir do Chrome 108, o descarte de guias se tornará mais comum. Portanto, é fundamental que os sites possam lidar com essas ocorrências corretamente.
Práticas recomendadas para lidar com o descarte de guias
O descarte de guias não é um novo desafio para os desenvolvedores da Web. Um usuário sempre pôde atualizar uma página, intencionalmente ou sem querer, antes de concluir a tarefa. Por isso, sempre foi importante que os sites armazenem o estado do usuário para que possam restaurá-lo se o usuário sair e voltar.
A consideração mais importante não é se armazenar o estado do usuário, mas quando. Isso é fundamental, porque nenhum evento é acionado quando uma guia é descartada. Portanto, não há como os desenvolvedores reagirem à situação. 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, conforme o estado muda.
- Sempre que uma guia está 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.
Estes são os piores momentos para armazenar o estado porque esses eventos não são totalmente confiáveis e não são acionados em muitas situações, inclusive 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 à medida que uma página é descartada. Como é possível ver no diagrama, uma guia pode passar do estado "oculto" para o "descartado" sem que nenhum evento seja disparado.
Na verdade, sempre que a página está no estado "oculta", não há garantia de que outros eventos serão disparados antes que ela seja descartada pelo navegador ou encerrada pelo usuário. Por isso, é importante armazenar sempre o estado de usuário não salvo no evento visibilitychange, porque você não terá outra chance.
O código a seguir descreve uma lógica de exemplo para enfileirar a persistência do 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 é recarregada. 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 entender com que frequência os usuários passam por esses tipos de situação, configure sua ferramenta de análise para capturar essas informações.
Por exemplo, no Google Analytics, é possível configurar um parâmetro de evento personalizado que permite determinar qual porcentagem de visualizações de página vieram dos descartes de guias:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Se você é um fornecedor de análise, convém adicionar essa dimensão ao seu produto por padrão.
Como 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 da lista e clique em Descartar urgentemente na coluna Ações.
Isso descartará a guia, permitindo que você a revisite e verifique se a página foi recarregada para o mesmo estado em que estava quando você a saiu.
Atualmente, não há uma maneira de automatizar o descarte de guias por meio de ferramentas de teste, como webdriver ou marionete. No entanto, como os descartes e as restaurações de guias são quase idênticos aos recarregamentos de páginas, se você testar se o estado do usuário é restaurado após um recarregamento no meio de um fluxo de usuários, isso provavelmente também funcionará para um descarte/restauração. A principal diferença entre os dois é que os eventos beforeunload, pagehide e unload não são acionados quando uma guia está sendo descartada. Portanto, desde que você não dependa desses eventos para manter o estado do usuário, use atualizações para testar o comportamento de descarte/restauração.
Modo de 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 rolagem, a fidelidade da animação e os frame rates do vídeo.
Em geral, os desenvolvedores não precisam fazer nada para oferecer suporte ao 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 principal cenário em que esse modo pode ser problemático é seu 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 decorridos entre os callbacks, as animações serão executadas duas vezes mais lentas quando o modo de Economia de energia estiver ativado.
Sempre foi problemático para os desenvolvedores presumir 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.
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. Além disso, em geral, tentar fazer isso com as APIs atuais não é recomendado.
O melhor que os desenvolvedores podem fazer com as APIs existentes é 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, não informa quando a taxa de atualização muda. Para isso, você precisaria fazer uma enquete do tipo requestAnimationFrame() constantemente, o que vai contra o objetivo de conservar energia ou duração da bateria para os usuários.
Como testar seu site no modo de Economia de energia
Uma maneira de testar seu site no modo de 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 tem um dispositivo que possa ser desconectado, ative 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 sinalização#battery-saver-mode-availableprecisa estar ativada para que o link funcione).
Depois de ativados, 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, porque podem afetar negativamente a experiência de acesso ao site se não forem tratados corretamente.
Em geral, esses novos modos foram criados considerando as práticas recomendadas para desenvolvedores. Se os desenvolvedores têm seguido as práticas recomendadas da Web há muito tempo, os sites devem continuar funcionando bem com esses novos modos.
No entanto, se o site tiver 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 que você está oferecendo uma ótima experiência é testar seu site com condições que correspondam às dos seus usuários.