Chrome 108 a introduit deux nouveaux modes, Économiseur de mémoire et Économiseur d'énergie, pour permettre aux utilisateurs de mieux contrôler la façon dont Chrome utilise leurs ressources système.
Bien que ces nouveaux modes soient principalement destinés aux utilisateurs, ils ont des implications dont il est important de tenir compte pour les développeurs Web, car elles peuvent avoir un impact sur l'expérience utilisateur sur votre site.
Cet article présente les effets potentiels de ces nouveaux modes et ce que les développeurs Web peuvent faire pour offrir la meilleure expérience possible.
Mode Économiseur de mémoire
Lorsque le mode Économiseur de mémoire est activé, Chrome supprime de manière proactive les onglets inutilisés en arrière-plan depuis un certain temps. Cela libère de la mémoire pour les onglets actifs ainsi que pour d'autres applications en cours d'exécution. Les utilisateurs peuvent demander à Chrome de ne pas supprimer les onglets de sites spécifiques. Toutefois, il s'agit d'une préférence utilisateur et non d'un contrôle que vous pouvez contrôler en tant que développeur.
Lorsqu'un onglet est supprimé, son titre et son favicon continuent d'apparaître dans la barre d'onglets, mais la page elle-même disparaît, comme si l'onglet avait été fermé normalement. Si l'utilisateur revient dans cet onglet, la page est automatiquement actualisée.
Pour les pages purement de contenu, le fait de supprimer et d'actualiser un onglet n'aura probablement pas d'impact sur l'expérience utilisateur. En revanche, pour les sites riches et interactifs associés à des flux utilisateur complexes, un rechargement au milieu de ce flux peut être extrêmement frustrant si le site ne parvient pas à restaurer la page exactement là où l'utilisateur s'était arrêté.
Chrome utilise cette méthode depuis des années pour supprimer des onglets pour préserver la mémoire, mais uniquement lorsque la mémoire du système était sollicitée. Étant donné que c'est relativement rare, les développeurs Web n'ont peut-être pas réalisé que c'était le cas.
À partir de Chrome 108, la suppression des onglets deviendra plus courante. Il est donc essentiel que les sites puissent gérer ces occurrences de manière optimale.
Bonnes pratiques pour gérer les suppressions d'onglets
La suppression d'onglets ne représente pas un nouveau défi pour les développeurs Web. Un utilisateur pouvait toujours actualiser une page, intentionnellement ou accidentellement, avant d'effectuer une tâche. Il a donc toujours été important pour les sites de stocker l'état de l'utilisateur afin de pouvoir le restaurer si l'utilisateur quitte et revient.
Le facteur le plus important n'est pas de savoir stocker l'état de l'utilisateur, mais de quand le stocker. C'est essentiel, car aucun événement ne se déclenche lorsqu'un onglet est supprimé. Les développeurs n'ont donc aucun moyen de réagir à cette action. Les développeurs doivent anticiper cette éventualité et se préparer à l'avance.
Les meilleurs moments pour stocker l'état d'un utilisateur sont les suivants:
- Régulièrement, au fur et à mesure que l'état change.
- Chaque fois qu'un onglet est mis en arrière-plan (événement
visibilitychange).
Voici les pires moments pour stocker l'état:
- Dans un rappel d'événement
beforeunload - Dans un rappel d'événement
unload
Il s'agit des pires moments pour stocker l'état, car ces événements ne sont pas du tout fiables et ne se déclenchent pas dans de nombreuses situations, y compris lorsqu'un onglet est supprimé.
Reportez-vous au diagramme des événements du cycle de vie de la page pour identifier les événements qui sont censés se déclencher lorsqu'une page est supprimée. Comme vous pouvez le voir sur ce diagramme, un onglet peut passer de l'état "masqué" à l'état "supprimé" sans qu'aucun événement ne se déclenche.
En fait, chaque fois que la page est à l'état "masqué", rien ne garantit que d'autres événements se déclencheront avant que la page soit supprimée par le navigateur ou arrêtée par l'utilisateur. C'est pourquoi il est important de toujours stocker tout état utilisateur non enregistré dans l'événement visibilitychange, car vous n'aurez aucune autre chance.
Le code suivant présente un exemple de logique permettant de mettre en file d'attente l'état actuel de l'utilisateur chaque fois qu'il change, ou immédiatement si l'utilisateur ouvre l'onglet en arrière-plan ou le quitte:
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();
}
});
Détecter qu'un onglet a été supprimé
Comme indiqué précédemment, il est impossible de détecter qu'un onglet est sur le point d'être supprimé, mais il est possible de détecter qu'un onglet a été supprimé lorsqu'un utilisateur y retourne et que la page a été rechargée. Dans ce cas, la propriété document.wasDiscarded a la valeur "true".
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Si vous souhaitez connaître la fréquence à laquelle vos utilisateurs rencontrent ce type de situation, vous pouvez configurer votre outil d'analyse de sorte qu'il recueille ces informations.
Par exemple, dans Google Analytics, vous pouvez configurer un paramètre d'événement personnalisé qui vous permettra de déterminer le pourcentage de pages vues provenant des suppressions de l'onglet:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Si vous êtes un fournisseur de solutions d'analyse, vous pouvez ajouter cette dimension par défaut à votre produit.
Tester votre site en mode Économiseur de mémoire
Pour tester la façon dont une page est supprimée, chargez-la, puis accédez à chrome://discards dans un onglet ou une fenêtre distincts.
Dans l'interface utilisateur de chrome://discards, vous pouvez localiser l'onglet que vous souhaitez supprimer dans la liste, puis cliquer sur Suppression urgente dans la colonne Actions.
Cette opération entraîne la suppression de l'onglet, ce qui vous permet de le consulter de nouveau et de vérifier que la page a bien été actualisée dans l'état où vous l'avez quittée.
Notez qu'il n'existe actuellement aucun moyen d'automatiser la suppression d'onglets à l'aide d'outils de test tels que Webdriver ou puppeteer. Toutefois, étant donné que les suppressions et les restaurations d'onglets sont presque identiques à l'actualisation des pages, si vous testez que l'état de l'utilisateur est restauré après une actualisation au milieu d'un parcours utilisateur, cela fonctionnera probablement également pour une suppression ou une restauration. La principale différence entre les deux est que les événements beforeunload, pagehide et unload ne se déclenchent pas lorsqu'un onglet est supprimé. Tant que vous n'utilisez pas ces événements pour conserver l'état de l'utilisateur, vous pouvez utiliser des actualisations pour tester le comportement de suppression ou de restauration.
Mode Économiseur d'énergie
Lorsque le mode Économiseur d'énergie est activé, Chrome économise la batterie en réduisant la fréquence d'actualisation de l'écran, ce qui affecte la fidélité du défilement et des animations, ainsi que la fréquence d'images vidéo.
En général, les développeurs n'ont rien à faire pour utiliser le mode Économiseur d'énergie. Les API CSS et JavaScript pour les animations, les transitions et les requestAnimationFrame() s'ajustent automatiquement à toute modification de la fréquence d'actualisation de l'affichage lorsque ce mode est activé.
Ce mode pourrait poser problème principalement si votre site utilise des animations JavaScript qui supposent une fréquence d'actualisation particulière pour tous les utilisateurs.
Par exemple, si votre site utilise des boucles requestAnimationFrame() et suppose que exactement 16,67 millisecondes se seront écoulées entre les rappels, vos animations s'exécuteront deux fois plus lentement lorsque le mode Économiseur d'énergie est activé.
Notez qu'il est toujours difficile pour les développeurs d'appliquer une fréquence d'actualisation par défaut de 60 Hz pour tous les utilisateurs, car ce n'est pas le cas pour de nombreux appareils actuels.
Mesurer la fréquence d'actualisation de l'écran
Il n'existe pas d'API Web dédiée pour mesurer la fréquence d'actualisation de l'affichage. Il est déconseillé d'essayer de le faire avec les API actuelles.
Le mieux que les développeurs puissent faire avec les API existantes est de comparer les horodatages entre les rappels requestAnimationFrame() successifs. Bien que cette méthode fonctionne dans la plupart des cas pour estimer la fréquence d'actualisation à un moment donné, elle ne vous indique pas quand la fréquence d'actualisation change. Pour ce faire, vous devez exécuter un sondage requestAnimationFrame() en permanence, ce qui va à l'encontre de l'objectif consistant à préserver l'énergie ou l'autonomie de la batterie pour vos utilisateurs.
Tester votre site en mode Économiseur d'énergie
Pour tester votre site en mode Économiseur d'énergie, vous pouvez activer ce mode dans les paramètres de Chrome et le configurer pour qu'il s'exécute lorsque votre appareil est débranché.
Si vous n'avez pas de périphérique débranché, vous pouvez également activer le mode manuellement en procédant comme suit:
- Activez l'indicateur
chrome://flags/#battery-saver-mode-available. - Accédez à
chrome://discards, puis cliquez sur le lien Activer/Désactiver le mode Économiseur de batterie (important:l'indicateur#battery-saver-mode-availabledoit être activé pour que le lien fonctionne).
Une fois la fonctionnalité activée, vous pouvez interagir avec votre site et vérifier que tout se présente comme prévu (par exemple, pour que les animations et les transitions s'exécutent à la vitesse souhaitée).
Résumé
Bien que les modes Économiseur de mémoire et Économiseur d'énergie de Chrome soient principalement des fonctionnalités présentées aux utilisateurs, ils ont un impact sur les développeurs, car ils peuvent nuire à l'expérience de navigation sur votre site s'ils ne sont pas gérés correctement.
En général, ces nouveaux modes ont été conçus en tenant compte des bonnes pratiques existantes des développeurs. Si les développeurs appliquent depuis longtemps les bonnes pratiques Web, leurs sites devraient continuer à fonctionner correctement avec ces nouveaux modes.
Toutefois, si votre site contient l'une des pratiques décrites dans cet article, il est probable que vos utilisateurs rencontrent des problèmes qui ne feront qu'augmenter lorsque ces deux modes seront activés.
Comme toujours, le meilleur moyen de vous assurer que vous offrez une expérience utilisateur optimale consiste à tester votre site en appliquant les conditions à celles de vos utilisateurs.