Chrome 108 ha introdotto due nuove modalità, Risparmio memoria e Risparmio energetico, per offrire agli utenti un maggiore controllo su come Chrome utilizza le risorse di sistema.
Anche se queste nuove modalità sono principalmente rivolte agli utenti, hanno alcune implicazioni importanti che gli sviluppatori web devono conoscere, in quanto possono potenzialmente influire sull'esperienza utente del tuo sito.
In questo post parleremo dei potenziali effetti di queste nuove modalità e di cosa possono fare gli sviluppatori web per assicurarsi di offrire la migliore esperienza possibile.
Modalità Risparmio memoria
Quando la modalità Risparmio memoria è attiva, Chrome elimina proattivamente le schede che non sono state utilizzate in background da un po' di tempo. In questo modo si libera memoria per le schede attive e per altre applicazioni che potrebbero essere in esecuzione. Gli utenti possono indicare a Chrome di non ignorare le schede di siti specifici. Tuttavia, si tratta di una preferenza dell'utente e non di qualcosa che puoi controllare in qualità di sviluppatore.
Quando una scheda viene eliminata, il suo titolo e la relativa favicon vengono ancora visualizzati nella tabstrip, ma la pagina stessa non è più disponibile, esattamente come se la scheda fosse stata chiusa normalmente. Se l'utente visita di nuovo la scheda, la pagina verrà ricaricata automaticamente.
Nel caso delle pagine di contenuti esclusivamente, ignorare e ricaricare una scheda probabilmente non inciderà sull'esperienza utente, ma nel caso di siti ricchi e interattivi con flussi utente complessi, un ricaricamento nel mezzo di quel flusso potrebbe essere estremamente frustrante se il sito non è in grado di ripristinare la pagina nel punto esatto in cui l'utente aveva interrotto.
L'eliminazione delle schede per risparmiare memoria è un'attività che Chrome ha fatto da anni, ma lo è stato solo nelle situazioni in cui il sistema era sottoposto a una pressione di memoria. Data la sua occorrenza relativamente rara, gli sviluppatori web potrebbero non rendersi conto della situazione.
A partire da Chrome 108, l'eliminazione delle schede diventerà più comune, quindi è fondamentale che i siti possano gestire agevolmente queste occorrenze.
Best practice per gestire gli scarti delle schede
L'eliminazione delle schede non rappresenta una nuova sfida per gli sviluppatori web. È sempre stato possibile per un utente ricaricare una pagina, intenzionalmente o per errore, prima di completare l'attività. Quindi è sempre importante che i siti memorizzino lo stato dell'utente in modo da poterlo ripristinare se l'utente esce e torna.
Il fattore più importante da considerare non è se archiviare lo stato dell'utente, ma quando farlo. Questo è fondamentale perché non c'è alcun evento che si attiva quando una scheda viene eliminata, quindi gli sviluppatori non possono reagire agli eventi. Gli sviluppatori devono invece anticipare questa possibilità e prepararsi in anticipo.
I momenti migliori per archiviare lo stato dell'utente sono:
- Periodicamente man mano che lo stato cambia.
- Ogni volta che una scheda viene riprodotta in background (evento
visibilitychange).
I momenti peggiori per archiviare lo stato sono:
- In un callback di evento
beforeunload. - In un callback di evento
unload.
Questi sono i momenti peggiori per archiviare lo stato perché questi eventi sono completamente inaffidabili e non si attivano in molte situazioni, tra cui quando una scheda viene eliminata.
Puoi fare riferimento al diagramma degli eventi del ciclo di vita della pagina per vedere quali eventi dovrebbero essere attivati quando una pagina viene eliminata. Come puoi vedere dal diagramma, una scheda può arrivare al "nascosto" lo stato "scartato" senza che venga attivato alcun evento.
Infatti, ogni volta che la pagina è "nascosta" non garantisce che eventuali altri eventi vengano attivati prima che la pagina venga eliminata dal browser o terminata dall'utente, motivo per cui è importante archiviare sempre gli stati di utenti non salvati nell'evento visibilitychange, in quanto potresti non avere un'altra possibilità.
Il seguente codice illustra alcune logiche di esempio per mettere in coda lo stato corrente dell'utente ogni volta che viene modificato oppure immediatamente se l'utente passa allo sfondo della scheda o esce dalla pagina:
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();
}
});
Rilevamento dell'eliminazione di una scheda
Come accennato in precedenza, non è possibile rilevare che una scheda sta per essere eliminata, ma è possibile rilevare che una scheda è stata eliminata dopo che un utente vi torna e la pagina è stata ricaricata. In queste situazioni, la proprietà document.wasDiscarded sarà true.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Se vuoi conoscere la frequenza con cui i tuoi utenti riscontrano questo tipo di situazioni, puoi configurare il tuo strumento di analisi in modo da acquisire queste informazioni.
Ad esempio, in Google Analytics puoi configurare un parametro evento personalizzato che ti consentirà di determinare quale percentuale di visualizzazioni di pagina proveniva dalle schede ignorate:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Se sei un fornitore di dati e analisi, ti consigliamo di aggiungere questa dimensione al tuo prodotto per impostazione predefinita.
Test del sito in modalità Risparmio memoria
Per verificare in che modo una pagina gestisce l'eliminazione dell'account, caricala e apri chrome://discards in una scheda o finestra separata.
Nell'interfaccia utente di chrome://discards, puoi individuare la scheda che desideri eliminare dall'elenco e poi fare clic su Elimina urgente nella colonna Azioni.
La scheda verrà eliminata, potrai rivederla e verificare che la pagina sia stata ricaricata nello stesso stato in cui l'avevi lasciata.
Tieni presente che al momento non è possibile automatizzare gli scarti delle schede tramite strumenti di test come webdriver o puppeteer; tuttavia, poiché gli annullamenti e i ripristini delle schede sono quasi identici ai ricaricamenti delle pagine, se verifichi che lo stato dell'utente viene ripristinato dopo un ricaricamento nel bel mezzo di un flusso utente, probabilmente funzionerà anche per un annullamento/un ripristino. La differenza principale tra i due è che gli eventi beforeunload, pagehide e unload non si attivano quando una scheda viene eliminata, quindi, a condizione che questi eventi non vengano utilizzati per mantenere lo stato dell'utente, puoi utilizzare i ricaricamenti per testare il comportamento di eliminazione/ripristino.
Modalità Risparmio energetico
Quando la modalità Risparmio energetico è attiva, Chrome risparmia batteria riducendo la frequenza di aggiornamento del display e influenzando lo scorrimento e la fedeltà dell'animazione e la frequenza dei fotogrammi video.
In generale, gli sviluppatori non devono fare nulla per supportare la modalità Risparmio energetico. Quando questa modalità è attivata, le API CSS e JavaScript per animazioni, transizioni e requestAnimationFrame() si adattano automaticamente a qualsiasi modifica della frequenza di aggiornamento del display.
Lo scenario principale in cui questa modalità potrebbe essere problematica è se il tuo sito utilizza animazioni basate su JavaScript che presuppongono una particolare frequenza di aggiornamento per tutti gli utenti.
Ad esempio, se il tuo sito utilizza i loop requestAnimationFrame() e presuppone che siano trascorsi esattamente 16,67 millisecondi tra un callback e l'altro, le animazioni verranno eseguite due volte più lentamente quando viene attivata la modalità Risparmio energetico.
Tieni presente che è sempre stato problematico per gli sviluppatori presumere una frequenza di aggiornamento predefinita di 60 Hz per tutti gli utenti, dato che questo non è vero per molti dispositivi attuali.
Misurazione della frequenza di aggiornamento del display
Non esiste un'API web dedicata per misurare la frequenza di aggiornamento del display e, in generale, non è consigliabile farlo con le API attuali è sconsigliato.
Il modo migliore che gli sviluppatori possono fare con le API esistenti è confrontare i timestamp tra callback requestAnimationFrame() successivi. Nella maggior parte dei casi questa opzione funziona per approssimare la frequenza di aggiornamento in un determinato momento, ma non ti consente di sapere quando cambia. Per farlo, è necessario eseguire costantemente un sondaggio su requestAnimationFrame(), che supera l'obiettivo di risparmiare energia o durata della batteria per i tuoi utenti.
Test del sito in modalità Risparmio energetico
Un modo per testare il tuo sito in modalità Risparmio energetico è attivare la modalità nelle impostazioni di Chrome e configurarla in modo che venga eseguita quando il dispositivo è scollegato dall'alimentazione.
Se non hai un dispositivo che può essere scollegato, puoi anche attivare la modalità manualmente seguendo questa procedura:
- Attiva il flag
chrome://flags/#battery-saver-mode-available. - Visita
chrome://discardse fai clic sul link Attiva/disattiva modalità di risparmio energetico (importante: affinché il link funzioni, il flag#battery-saver-mode-availabledeve essere abilitato).
Una volta attivato, puoi interagire con il tuo sito e verificare che tutto abbia l'aspetto previsto, ad esempio che animazioni e transizioni vengano eseguite alla velocità desiderata.
Riepilogo
Le modalità Risparmio memoria e Risparmio energetico di Chrome sono principalmente funzionalità rivolte agli utenti, ma hanno implicazioni per gli sviluppatori in quanto possono influire negativamente sull'esperienza di visita del tuo sito se non vengono gestite correttamente.
In generale, queste nuove modalità sono state progettate tenendo a mente le best practice per gli sviluppatori esistenti. Se gli sviluppatori seguono da tempo best practice per il web, i loro siti dovrebbero continuare a funzionare bene con queste nuove modalità.
Tuttavia, se il tuo sito contiene una qualsiasi delle pratiche illustrate in questo post, è probabile che i tuoi utenti stiano riscontrando problemi che aumenteranno solo con queste due modalità abilitate.
Come sempre, il modo migliore per verificare di offrire un'esperienza positiva è testare il tuo sito con condizioni corrispondenti a quelle dei tuoi utenti.