L'en-tête de demande d'optimisation du client Save-Data
disponible dans les navigateurs Chrome, Opera et Yandex permet aux développeurs de proposer des applications plus légères et plus rapides aux utilisateurs qui activent le mode Économie de données dans leur navigateur.
Le besoin de pages allégées
Tout le monde s'accorde à dire que des pages Web plus rapides et plus légères offrent une expérience utilisateur plus satisfaisante, favorisent la compréhension et la fidélisation du contenu, et augmentent les conversions et les revenus. Une étude Google a montré que "... les pages optimisées se chargent quatre fois plus vite que la page d'origine et utilisent 80 % d'octets en moins. Comme ces pages se chargent beaucoup plus vite, le trafic vers ces pages a augmenté de 50 %."
Bien que le nombre de connexions 2G soit enfin en baisse, la 2G était toujours la technologie réseau dominante en 2015. La pénétration et la disponibilité des réseaux 3G et 4G augmentent rapidement, mais les coûts de possession et les contraintes réseau associés restent un facteur important pour des centaines de millions d'utilisateurs.
Ce sont de solides arguments en faveur de l'optimisation des pages.
Il existe d'autres méthodes pour améliorer la vitesse du site sans implication directe du développeur, telles que les navigateurs proxy et les services de transcodage. Bien que ces services soient très populaires, ils présentent des inconvénients importants : compression simple (et parfois inacceptable) des images et du texte, incapacité à traiter des pages sécurisées (HTTPS), n'optimisant que les pages consultées via un résultat de recherche, etc. La très popularité de ces services indique elle-même que les développeurs Web ne répondent pas correctement à la forte demande des utilisateurs en termes d'applications et de pages rapides et légères. Mais atteindre cet objectif est un chemin complexe et parfois difficile.
En-tête de requête Save-Data
Une technique assez simple consiste à laisser le navigateur vous aider à l'aide de l'en-tête de requête Save-Data
. En identifiant cet en-tête, une page Web peut personnaliser et offrir une expérience utilisateur optimisée aux utilisateurs dont les coûts et les performances sont limités.
Les navigateurs compatibles (ci-dessous) permettent à l'utilisateur d'activer un *mode d'économie de données qui autorise le navigateur à appliquer un ensemble d'optimisations afin de réduire la quantité de données requise pour afficher la page. Lorsque cette fonctionnalité est exposée ou annoncée, le navigateur peut demander des images de résolution inférieure, différer le chargement de certaines ressources ou acheminer les requêtes via un service qui applique d'autres optimisations spécifiques au contenu, telles que la compression des ressources d'images et de texte.
Prise en charge des navigateurs
- Chrome 49 et versions ultérieures annoncent
Save-Data
lorsque l'utilisateur active l'option "Économiseur de données" sur mobile, ou l'extension "Économiseur de données" sur les navigateurs pour ordinateur. - Opera 35+ annonce
Save-Data
lorsque l'utilisateur active le mode Opera Turbo sur ordinateur ou l'option Économies de données dans les navigateurs Android. - Yandex 16.2+ annonce
Save-Data
lorsque le mode turbo est activé sur les navigateurs pour ordinateur ou mobiles.
Détection du paramètre Save-Data
...
Pour déterminer quand proposer l'expérience "légère" à vos utilisateurs, votre application peut rechercher l'en-tête de requête d'optimisation du client Save-Data
. Cet en-tête de requête indique la préférence du client pour une consommation de données réduite en raison de coûts de transfert élevés, de vitesses de connexion lentes ou d'autres raisons.
Lorsque l'utilisateur active le mode Économie de données dans son navigateur, celui-ci ajoute l'en-tête de requête Save-Data
à toutes les requêtes sortantes (HTTP et HTTPS).
À l'heure où nous écrivons ces lignes, le navigateur n'annonce qu'un seul jeton *on- dans l'en-tête (Save-Data: on
), mais ce paramètre pourrait être étendu à l'avenir pour indiquer d'autres préférences utilisateur.
De plus, il est possible de détecter si Save-Data
est activé en JavaScript:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Il est essentiel de vérifier la présence de l'objet connection
dans l'objet navigator
, car il représente l'API Network Information, qui n'est implémentée que dans les navigateurs Chrome, Chrome pour Android et Samsung. Ensuite, il vous suffit de vérifier si navigator.connection.saveData
est égal à true
. Vous pouvez alors implémenter n'importe quelle opération d'économie de données dans cette condition.
Si votre application utilise un service worker, elle peut inspecter les en-têtes de requête et appliquer la logique appropriée pour optimiser l'expérience.
Le serveur peut également rechercher les préférences annoncées dans l'en-tête de requête Save-Data
et renvoyer une autre réponse (balisage différent, images et vidéos plus petites, etc.).
Conseils et bonnes pratiques pour l'implémentation
- Lorsque vous utilisez
Save-Data
, fournissez des appareils d'interface utilisateur compatibles et permettant aux utilisateurs de basculer facilement entre les expériences. Exemple :- Informez les utilisateurs que
Save-Data
est pris en charge et encouragez-les à l'utiliser. - Permettez aux utilisateurs d'identifier et de choisir le mode à l'aide d'invites appropriées et de boutons d'activation ou de désactivation intuitifs.
- Lorsque le mode Économie de données est sélectionné, annoncez-le et fournissez un moyen simple et évident de le désactiver et de revenir à l'expérience complète si vous le souhaitez.
- Informez les utilisateurs que
- N'oubliez pas que les applications légères ne sont pas des applications moins importantes. Ils n'omettent pas de fonctionnalités ni de données importantes, ils sont simplement plus conscients des coûts engendrés et de l'expérience utilisateur. Exemple :
- Une application de galerie photo peut fournir des aperçus de résolution inférieure ou utiliser un mécanisme de carrousel moins gourmand en code.
- Une application de recherche peut renvoyer moins de résultats à la fois, limiter le nombre de résultats multimédias ou réduire le nombre de dépendances requises pour afficher la page.
- Un site axé sur l'actualité peut afficher moins d'articles, omettre les catégories les moins populaires ou fournir des aperçus multimédias plus petits.
- Fournissez une logique serveur pour vérifier l'en-tête de requête
Save-Data
et envisagez de fournir une autre réponse de page plus légère lorsqu'il est activé (par exemple, réduisez le nombre de ressources et de dépendances requises, appliquez une compression plus agressive des ressources, etc.).- Si vous diffusez une autre réponse basée sur l'en-tête
Save-Data
, n'oubliez pas de l'ajouter à la liste "Vary" (Vary: Save-Data
) pour indiquer aux caches en amont qu'ils ne doivent mettre en cache et diffuser cette version que si l'en-tête de requêteSave-Data
est présent. Pour en savoir plus, consultez les bonnes pratiques concernant l'interaction avec les caches.
- Si vous diffusez une autre réponse basée sur l'en-tête
- Si vous utilisez un service worker, votre application peut détecter quand l'option d'enregistrement des données est activée en vérifiant la présence de l'en-tête de requête
Save-Data
ou la valeur de la propriéténavigator.connection.saveData
. Si cette option est activée, déterminez si vous pouvez réécrire la requête pour récupérer moins d'octets ou utiliser une réponse déjà récupérée. - Envisagez d'augmenter
Save-Data
avec d'autres signaux, tels que des informations sur le type de connexion et la technologie de l'utilisateur (voir API NetInfo). Par exemple, vous pouvez proposer cette expérience légère à n'importe quel utilisateur utilisant une connexion 2G, même siSave-Data
n'est pas activé. À l'inverse, le fait que l'utilisateur dispose d'une connexion 4G "rapide" ne signifie pas qu'il ne souhaite pas enregistrer ses données (en itinérance, par exemple). En outre, vous pouvez augmenter la présence deSave-Data
avec l'indice clientDevice-Memory
pour vous adapter davantage aux utilisateurs d'appareils dont la mémoire est limitée. La mémoire de l'appareil de l'utilisateur est également annoncée dans l'indicateur clientnavigator.deviceMemory
.
Recettes
Les résultats que vous pouvez obtenir via Save-Data
sont limités aux résultats que vous pouvez proposer. Pour vous donner une idée des possibilités, passons en revue quelques cas d'utilisation. En lisant cet article, vous pourriez trouver d'autres cas d'utilisation, alors n'hésitez pas à expérimenter et à voir les possibilités.
Recherche de Save-Data
dans le code côté serveur
Bien que l'état Save-Data
soit quelque chose que vous pouvez détecter en JavaScript via la propriété navigator.connection.saveData
, il est parfois préférable de le détecter côté serveur. L'exécution de JavaScript peut échouer dans certains cas. De plus, la détection côté serveur est le seul moyen de modifier le balisage avant son envoi au client, qui est impliquée dans certains des cas d'utilisation Save-Data
les plus avantageux.
La syntaxe spécifique permettant de détecter l'en-tête Save-Data
dans le code côté serveur dépend du langage utilisé, mais l'idée de base doit être la même pour tout backend d'application. En PHP, par exemple, les en-têtes de requête sont stockés dans le tableau superglobal $_SERVER
au niveau des index commençant par HTTP_
. Cela signifie que vous pouvez détecter l'en-tête Save-Data
en vérifiant l'existence et la valeur de la variable $_SERVER["HTTP_SAVE_DATA"]
comme suit:
// false by default.
$saveData = false;
// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
// `Save-Data` detected!
$saveData = true;
}
Si vous effectuez cette vérification avant qu'un balisage ne soit envoyé au client, la variable $saveData
contiendra l'état Save-Data
et sera disponible n'importe où sur la page. Voici quelques exemples d'utilisation de ce mécanisme pour limiter la quantité de données que nous envoyons à l'utilisateur.
Diffuser des images basse résolution pour les écrans haute résolution
Un cas d'utilisation courant des images sur le Web consiste à diffuser des images par ensembles de deux : une image pour les écrans"standards" (1x) et une autre image deux fois plus grande (2x) pour les écrans haute résolution (par exemple, Écran Retina). Cette catégorie d'écrans haute résolution ne se limite pas nécessairement aux appareils haut de gamme et devient de plus en plus courante. Dans les cas où une expérience d'application plus légère est préférable, il peut être prudent d'envoyer des images de résolution inférieure (1x) à ces écrans, plutôt que des variantes plus grandes (2x). Pour ce faire, lorsque l'en-tête Save-Data
est présent, il suffit de modifier le balisage que nous envoyons au client:
if ($saveData === true) {
// Send a low-resolution version of the image for clients specifying `Save-Data`.
?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
// Send the usual assets for everyone else.
?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}
Ce cas d'utilisation illustre parfaitement le faible effort nécessaire pour répondre aux besoins d'une personne qui vous demande spécifiquement de lui envoyer moins de données. Si vous n'aimez pas modifier le balisage sur le backend, vous pouvez obtenir le même résultat en utilisant un module de réécriture d'URL tel que mod_rewrite
d'Apache. Consultez cette page à titre d'exemple avec une configuration relativement faible.
Vous pouvez également étendre ce concept aux propriétés CSS background-image
en ajoutant simplement une classe à l'élément <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
À partir de là, vous pouvez cibler la classe save-data
sur l'élément <html>
de votre code CSS pour modifier la façon dont les images sont diffusées. Vous pouvez envoyer des images de fond basse résolution à des écrans haute résolution, comme illustré dans l'exemple HTML ci-dessus, ou omettre certaines ressources.
Omettre les images non essentielles
Certains contenus d'images sur le Web ne sont tout simplement pas essentiels. Bien que ces images puissent apporter de bons côtés au contenu, elles ne sont pas souhaitables pour ceux qui essaient de tirer le meilleur parti des forfaits de données facturés à l'usage. Dans ce qui est peut-être le cas d'utilisation le plus simple de Save-Data
, nous pouvons utiliser le code de détection PHP précédent et omettre complètement le balisage d'image non essentiel:
<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
// Only send this image if `Save-Data` hasn't been detected.
?><img src="meme.jpg" alt="One does not simply consume data."><?php
}
Cette technique peut certainement avoir un effet prononcé, comme vous pouvez le voir dans la figure ci-dessous:
Bien entendu, l'omission d'images n'est pas la seule possibilité. Vous pouvez également agir sur Save-Data
pour renoncer à envoyer d'autres ressources non critiques, telles que certaines polices de caractères.
Omettre les polices Web non essentielles
Bien que les polices Web ne représentent généralement pas presque autant de la charge utile totale d'une page donnée que les images, elles restent très populaires. De plus, ils ne consomment pas une quantité insignifiante de données. De plus, la façon dont les navigateurs extraient et affiche les polices est plus compliquée que vous ne le pensez, avec des concepts tels que FOIT, FOUT et les heuristiques de navigateur rendant le rendu une opération nuancée.
Il peut sembler évident que vous devriez omettre les polices Web non essentielles pour les utilisateurs qui souhaitent une expérience utilisateur plus simple. Avec Save-Data
, cette opération est relativement simple.
Par exemple, supposons que vous ayez inclus Fira Sans de Google Fonts sur votre site. Fira Sans est une excellente police d’écriture de corps, mais elle n’est peut-être pas si cruciale pour les utilisateurs qui essaient d’économiser des données. En ajoutant une classe save-data
à l'élément <html>
lorsque l'en-tête Save-Data
est présent, nous pouvons écrire des styles qui appellent la police de caractères non essentielle au début, puis la désactive lorsque l'en-tête Save-Data
est présent:
/* Opt into web fonts by default. */
p,
li {
font-family: 'Fira Sans', 'Arial', sans-serif;
}
/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
font-family: 'Arial', sans-serif;
}
Avec cette approche, vous pouvez conserver l'extrait <link>
de Google Fonts en place, car le navigateur charge de manière spéculative les ressources CSS (y compris les polices Web) en appliquant d'abord des styles au DOM, puis en vérifiant si des éléments HTML appellent l'une des ressources de la feuille de style. Si quelqu'un passe à l'aide de Save-Data
, Fira Sans ne se chargera jamais, car le DOM stylisé ne l'appelle jamais. Arial s'active, à la place. Ce n'est pas aussi agréable que Fira Sans, mais il peut être préférable aux utilisateurs qui essaient d'étendre leurs forfaits de données.
Résumé
L'en-tête Save-Data
n'a pas beaucoup de nuances. Il est activé ou désactivé, et l'application a la charge de fournir des expériences appropriées en fonction de sa configuration, quel que soit le motif.
Par exemple, certains utilisateurs peuvent ne pas autoriser le mode Économie de données s'ils pensent qu'il y aura une perte de contenu ou de fonction de l'application, même en cas de mauvaise connectivité. À l'inverse, certains utilisateurs peuvent l'activer naturellement pour que les pages soient aussi petites et simples que possible, même dans une situation de connectivité satisfaisante. Il est préférable que votre application part du principe que l'utilisateur souhaite bénéficier d'une expérience complète et illimitée, jusqu'à ce que vous ayez une indication claire du contraire via une action explicite de l'utilisateur.
En tant que propriétaires de sites et développeurs Web, nous prenons la responsabilité de gérer notre contenu afin d'améliorer l'expérience des utilisateurs ayant des contraintes de données et des coûts limités.
Pour en savoir plus sur Save-Data
et obtenir d'excellents exemples pratiques, consultez Aider vos utilisateurs Save Data
.