In Chrome 108 sono state introdotte due nuove modalità, Risparmio memoria e Risparmio energetico, per offrire agli utenti un maggiore controllo sulla modalità di utilizzo delle risorse di sistema da parte di Chrome.
Queste nuove modalità sono principalmente rivolte agli utenti, ma hanno alcune implicazioni di cui gli sviluppatori web devono essere a conoscenza, in quanto possono potenzialmente influire sull'esperienza utente sul tuo sito.
In questo post parleremo dei potenziali effetti di queste nuove modalità e di cosa possono fare gli sviluppatori web per garantire la migliore esperienza possibile.
Modalità Risparmio memoria
Quando la modalità Risparmio memoria è attiva, Chrome elimina proattivamente le schede che non sono utilizzate in background da un po' di tempo. In questo modo viene liberata memoria per le schede attive e per altre applicazioni che potrebbero essere in esecuzione. Gli utenti possono indicare a Chrome di non eliminare le schede di siti specifici; tuttavia, si tratta di una preferenza dell'utente e non che puoi controllare in qualità di sviluppatore.
Quando una scheda viene ignorata, il titolo e la favicon vengono comunque visualizzati nella tabstrip ma la pagina stessa viene cancellata, esattamente come se fosse stata chiusa normalmente. Se l'utente accede di nuovo alla scheda, questa verrà ricaricata automaticamente.
Per le pagine puramente di contenuti, ignorare e ricaricare una scheda probabilmente non influisce sull'esperienza utente; tuttavia, per i siti ricchi e interattivi con flussi utente complessi, un ricaricamento durante questo flusso potrebbe essere estremamente frustrante se il sito non è in grado di ripristinare la pagina esattamente nel punto in cui l'utente l'aveva interrotta.
L'eliminazione delle schede per risparmiare memoria è una pratica che Chrome fa da anni, ma è possibile farlo solo in situazioni in cui il sistema era sotto pressione. Data la sua occorrenza relativamente rara, gli sviluppatori web potrebbero non aver capito che era successo.
A partire da Chrome 108, l'eliminazione delle schede diventerà più comune, quindi è fondamentale che i siti possano gestire queste occorrenze senza problemi.
Best practice per gestire le rimozioni di 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 accidentalmente, prima di completare l'attività. Per questo motivo è sempre importante che i siti memorizzino lo stato dell'utente, in modo da poterlo ripristinare quando l'utente abbandona il sito e torna.
La considerazione più importante non è se memorizzare lo stato dell'utente, ma quando archiviarlo. Questo è fondamentale perché non c'è nessun evento che si attiva quando una scheda viene eliminata, quindi gli sviluppatori non hanno modo di reagire all'accaduto. Gli sviluppatori devono invece prevedere questa possibilità e prepararsi in anticipo.
I momenti migliori per memorizzare lo stato degli utenti sono:
- Periodicamente, quando lo stato cambia.
- Ogni volta che una scheda viene messa in background (evento
visibilitychange).
I momenti peggiori per conservare lo stato sono:
- In un callback dell'evento
beforeunload. - In un callback dell'evento
unload.
Questi sono i momenti peggiori in cui archiviare lo stato, perché questi eventi sono completamente inaffidabili e non si attivano in molte situazioni, anche quando una scheda viene eliminata.
Puoi fare riferimento al Diagramma degli eventi del ciclo di vita delle pagine per sapere quali eventi dovrebbero attivarsi durante l'eliminazione di una pagina. Come puoi vedere dal diagramma, una scheda può passare dallo stato "nascosto" a quello "eliminato" senza attivare alcun evento.
Infatti, ogni volta che la pagina è nello stato "nascosto", non vi è alcuna garanzia che eventuali altri eventi vengano attivati prima che la pagina venga eliminata dal browser o terminata dall'utente, motivo per cui è importante memorizzare sempre lo stato dell'utente non salvato nell'evento visibilitychange, perché potresti non avere un'altra possibilità.
Il seguente codice illustra una logica di esempio per mettere in coda lo stato dell'utente corrente ogni volta che viene modificato o immediatamente se l'utente esegue lo sfondo della scheda o esce:
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();
}
});
Rilevare che una scheda è stata eliminata
Come accennato in precedenza, non è possibile rilevare che una scheda sta per essere eliminata, ma è possibile rilevare che è stata eliminata dopo che l'utente vi è tornato e la pagina è stata ricaricata. In queste situazioni, la proprietà document.wasDiscarded sarà vera.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Per conoscere la frequenza con cui i tuoi utenti riscontrano questo tipo di situazioni, puoi configurare il tuo strumento di analisi in modo che acquisisca queste informazioni.
Ad esempio, in Google Analytics puoi configurare un parametro evento personalizzato che ti consente di determinare la percentuale di visualizzazioni di pagina generata da rimozioni di schede:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Se sei un fornitore di dati di analisi, ti consigliamo di aggiungere questa dimensione al tuo prodotto per impostazione predefinita.
Test del sito in modalità Risparmio memoria
Puoi verificare in che modo una pagina gestisce l'eliminazione caricandola e visitando chrome://discards in una scheda o una finestra separata.
Nella UI di chrome://discards puoi individuare la scheda che vuoi eliminare dall'elenco e quindi fare clic su Elimina urgente nella colonna Azioni.
In questo modo la scheda verrà ignorata, in modo da aprirla di nuovo e verificare che la pagina sia stata ricaricata allo stato in cui si trovava al momento dell'uscita.
Tieni presente che al momento non esiste un modo per automatizzare l'eliminazione delle schede tramite strumenti di test come webdriver o puppeteer; tuttavia, poiché gli scarti e i ripristini delle schede sono quasi identici ai ricaricamenti di pagine, se verifichi che lo stato dell'utente viene ripristinato dopo un ricaricamento nel corso di un flusso utente, è probabile che funzionerà anche per un eliminazione/ripristino. La differenza principale tra i due è che gli eventi beforeunload, pagehide e unload non si attivano quando una scheda viene eliminata. Di conseguenza, se non fai affidamento su questi eventi per mantenere lo stato utente, puoi utilizzare i ricaricamenti per testare il comportamento di eliminazione/ripristino.
Modalità Risparmio energetico
Quando è attiva la modalità Risparmio energetico, Chrome risparmia carica della batteria riducendo la frequenza di aggiornamento del display, influisce sulla fedeltà dello scorrimento e dell'animazione e sulle frequenze di fotogrammi dei video.
In generale, gli sviluppatori non devono fare nulla per supportare la modalità Risparmio energetico. Le API CSS e JavaScript per animazioni, transizioni e requestAnimationFrame() si adattano automaticamente a qualsiasi modifica della frequenza di aggiornamento del display quando questa modalità è attiva.
Lo scenario principale in cui questa modalità potrebbe essere problematica è se il tuo sito utilizza animazioni basate su JavaScript che presuppongono una determinata 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 saranno due volte più lente quando è attiva la modalità Risparmio energetico.
Tieni presente che è sempre stato problematico per gli sviluppatori ipotizzare 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, cercare di farlo con le API attuali non è consigliato.
Il modo migliore che gli sviluppatori possono fare con le API esistenti è confrontare i timestamp tra i callback requestAnimationFrame() successivi. Anche se nella maggior parte dei casi questo funziona per approssimare la frequenza di aggiornamento in un determinato momento, non ti informa quando la frequenza di aggiornamento cambia. Per farlo, devi eseguire costantemente un sondaggio requestAnimationFrame(), che supera l'obiettivo di preservare l'energia o la durata della batteria degli utenti.
Test del sito in modalità Risparmio energetico
Un modo per testare il tuo sito in modalità Risparmio energetico consiste nell'attivare la modalità nelle impostazioni di Chrome e configurarla in modo che venga eseguita quando il dispositivo è scollegato.
Se non disponi di 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: il flag#battery-saver-mode-availabledeve essere attivato affinché il link funzioni).
Dopo averlo attivato, puoi interagire con il tuo sito e verificare che tutto funzioni come dovrebbe, ad esempio che le animazioni e le transizioni vengano eseguite alla velocità desiderata.
Riepilogo
Sebbene le modalità Risparmio memoria e Risparmio energetico di Chrome siano principalmente funzionalità rivolte agli utenti, hanno implicazioni per gli sviluppatori in quanto possono influire negativamente sull'esperienza di visita del tuo sito se non gestite correttamente.
In generale, queste nuove modalità sono state progettate tenendo conto delle best practice esistenti per gli sviluppatori. Se gli sviluppatori seguono da tempo best practice web, i loro siti dovrebbero continuare a funzionare bene con queste nuove modalità.
Tuttavia, se il tuo sito contiene una delle pratiche illustrate in questo post, è probabile che i tuoi utenti stiano riscontrando problemi che possono aumentare solo con queste due modalità attivate.
Come sempre, il modo migliore per verificare che l'esperienza offerta sia positiva è testare il sito con condizioni corrispondenti a quelle degli utenti.