L'éventail des capacités des appareils qui peuvent se connecter au Web est élargi aujourd'hui qu'avant. La même application Web qui est utilisée par un un ordinateur de bureau peut également être servie à un téléphone, une montre ou une tablette à faible puissance, Il peut être très difficile de créer des expériences convaincantes qui fonctionnent facilement sur n'importe quel appareil.
L'API Device Memory est une nouvelle version
plate-forme conçue pour aider les développeurs Web à gérer l'appareil moderne
en mode paysage. Elle ajoute une propriété en lecture seule à l'objet navigator,
navigator.deviceMemory, qui renvoie la quantité de RAM de l'appareil
gigaoctets, arrondi à la
puissance la plus proche de deux. L'API comporte également
En-tête Client Hints
Device-Memory, qui indique la même valeur.
L'API Device Memory permet aux développeurs d'effectuer deux opérations principales:
- Prendre des décisions d'exécution concernant les ressources à diffuser en fonction des de la mémoire de l'appareil (par exemple, proposer une version allégée d'une application aux utilisateurs les appareils à faible capacité de mémoire).
- Transmettez cette valeur à un service d'analyse afin de mieux comprendre la mémoire de l'appareil est en corrélation avec le comportement des utilisateurs, les conversions ou d'autres métriques. importantes pour votre entreprise.
Adapter le contenu de façon dynamique en fonction de la mémoire de l'appareil
Si vous exécutez votre propre serveur Web et que
vous pouvez modifier la logique qui
diffuse des ressources, vous pouvez répondre de manière conditionnelle aux requêtes contenant le paramètre
Device-Memory En-tête des hints client.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Cette technique vous permet de créer une ou plusieurs versions de votre application
script(s) et répondre aux requêtes du client de manière conditionnelle en fonction
définie dans l'en-tête Device-Memory. Ces versions n'ont pas besoin de contenir
un code complètement différent (car c'est plus difficile à gérer). La plupart du temps,
"allégée" n'exclut que les fonctionnalités susceptibles d'être coûteuses et non essentielles
à l'expérience utilisateur.
Utiliser l'en-tête d'indicateurs client
Pour activer l'en-tête Device-Memory, ajoutez la balise <meta> des hints client
à la propriété <head> de votre document:
<meta http-equiv="Accept-CH" content="Device-Memory">
Ou ajoutez "Device-Memory" dans les en-têtes de réponse Accept-CH de votre serveur:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Cela indique au navigateur d'envoyer l'en-tête Device-Memory avec toutes les sous-ressources
pour la page actuelle.
En d'autres termes, une fois que vous avez mis en œuvre l'une des options ci-dessus pour votre
d'un site Web, si un utilisateur consulte un appareil avec 0, 5 Go de RAM, les images,
Les requêtes JavaScript provenant de cette page incluront l'en-tête Device-Memory avec
la valeur définie sur "0.5" pour que votre serveur puisse répondre à ces requêtes en fonction de vos besoins
comme il convient.
Par exemple, l'itinéraire Express suivant dessert une ligne
"allégée" d'un script si l'en-tête Device-Memory est défini et que sa valeur est
inférieur à 1, ou il affiche une "complet" si le navigateur n'est pas compatible avec
Device-Memory, ou si la valeur est égale ou supérieure à 1:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
Utiliser l'API JavaScript
Dans certains cas (comme avec un serveur de fichiers statiques ou un CDN), vous ne pourrez pas répondre de manière conditionnelle aux requêtes en fonction d'un en-tête HTTP. Dans ces cas, vous vous pouvez utiliser l'API JavaScript pour effectuer des requêtes conditionnelles dans votre code JavaScript.
La logique suivante est semblable à la route express ci-dessus, sauf qu'elle est dynamique détermine l'URL de script dans la logique côté client:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Différentes versions du même composant sont diffusées de manière conditionnelle en fonction les fonctionnalités des appareils est une bonne stratégie, mais il est parfois préférable de ne pas d'afficher un composant.
Dans de nombreux cas, les composants sont de simples améliorations. Ils apportent une touche personnelle l'expérience, mais ils ne sont pas nécessaires pour la fonctionnalité de base de l'application. Dans dans ce cas, il peut être judicieux de ne pas charger ces composants en premier lieu. Si un composant destiné à améliorer l'expérience utilisateur ralentit l'application ou qu’elle ne réagit pas, elle n’atteint pas son objectif.
Pour toute décision que vous prenez qui affecte l'expérience utilisateur, il est essentiel que mesurer son impact. Il est également essentiel que vous ayez une idée claire de la façon dont votre de votre application.
Comprendre la corrélation entre la mémoire de l'appareil et le comportement de l'utilisateur pour le de votre application permet de mieux identifier les mesures à prendre, vous donneront une base de référence par rapport à laquelle vous pourrez mesurer le succès des changements futurs.
Suivi de la mémoire de l'appareil avec Analytics
L'API Device Memory est nouvelle et la plupart des fournisseurs de solutions d'analyse n'en assurent pas le suivi. par défaut. Heureusement, la plupart des fournisseurs de solution d'analyse permettent d'effectuer le suivi (par exemple, Google Analytics dispose d'une fonctionnalité appelée Dimensions personnalisées), que vous pouvez utiliser pour suivre la mémoire de l'appareil pour les utilisateurs appareils.
Utiliser une dimension de mémoire personnalisée sur l'appareil
L'utilisation des dimensions personnalisées dans Google Analytics s'effectue en deux étapes.
- Configurez la dimension personnalisée dans Google Analytics.
- Remplacez votre code de suivi par
set. la valeur de mémoire de l'appareil pour la dimension personnalisée que vous venez de créer.
Lorsque vous créez la dimension personnalisée, nommez-la "Mémoire de l'appareil" et choisissez le champ d'application de "session" ; puisque cette valeur ne change pas au cours de la session de navigation de l'utilisateur:
Mettez ensuite à jour votre code de suivi. Voici un exemple. Notez que pour les navigateurs qui ne sont pas compatibles avec l'API Device Memory, la dimension sera "(not set)".
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Rapports sur les données de mémoire de l'appareil
Une fois que la dimension de mémoire de l'appareil est
set sur le
de suivi, toutes les données que vous envoyez à Google Analytics incluent cette valeur.
Vous pourrez ainsi ventiler les métriques de votre choix (par exemple, le temps de chargement des pages, le taux d'objectifs atteints, etc.) par appareil.
mémoire pour voir s'il existe des corrélations.
La mémoire de l'appareil étant une dimension personnalisée et non une dimension intégrée, vous n'apparaît dans aucun des rapports standards. Pour accéder à ces données, vous devrez créer un rapport personnalisé. Par exemple, la configuration d'un rapport personnalisé qui compare les temps de chargement la mémoire de l'appareil peut se présenter comme suit:
Le rapport généré peut se présenter comme suit:
Une fois que vous avez collecté les données de mémoire de l'appareil et que vous disposez d'une référence votre application sur toutes les plages du spectre de mémoire, vous pouvez de diffuser des ressources différentes en fonction des utilisateurs (à l'aide de la méthode techniques décrites dans la section ci-dessus). Ensuite, vous serez en mesure d’examiner les résultats et voir s'ils se sont améliorés.
Conclusion
Cet article explique comment utiliser l'API Device Memory afin de personnaliser votre application. aux capacités de vos utilisateurs et montre comment mesurer ces utilisateurs découvrent votre application.
Bien que cet article se concentre sur l'API Device Memory, la plupart des techniques décrit ici peuvent s'appliquer à toute API qui signale les fonctionnalités de l'appareil les conditions du réseau.
Alors que le nombre d'appareils ne cesse de s'élargir, il est plus important que jamais les développeurs Web prennent en compte l'ensemble des utilisateurs lorsqu'ils prennent des décisions affecter leur expérience.