La demande d'optimisation client Save-Data
titre
disponibles dans les navigateurs Chrome, Opera et Yandex permettent aux développeurs de fournir des
des applications 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 améliorer la compréhension et la fidélisation des contenus, d'augmentation des conversions et des revenus Google des études ont 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, nous avons également constaté une augmentation de 50 % sur le trafic vers ces pages."
Et bien que le nombre de connexions 2G soit enfin atteint, refuser, La 2G restait toujours le réseau dominant. d'assistance 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 est 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 l'intervention directe d'un développeur comme des navigateurs proxy et des services de transcodage. Bien que ces sont très populaires, mais ils présentent des inconvénients considérables : (et parfois inacceptable) la compression d'images et de texte, les pages sécurisées (HTTPS), ce qui permet d'optimiser uniquement les pages consultées via un résultat de recherche ; plus encore. La très popularité de ces services est elle-même un indicateur de l'efficacité les développeurs ne répondent pas correctement à la forte demande des utilisateurs applications et pages. Mais atteindre cet objectif est une tâche est difficile.
En-tête de requête Save-Data
Une technique assez simple consiste à laisser le navigateur vous aider, à l'aide de la
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 pour les clients aux
utilisateurs.
Les navigateurs compatibles (ci-dessous) permettent à l'utilisateur d'activer un *mode d'économie de données qui permet au navigateur d'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 le navigateur peut demander des images de résolution inférieure, différer le chargement certaines ressources, ou acheminer les requêtes via un service qui applique d'autres des optimisations propres au contenu, comme la compression des ressources d'image et de texte.
Prise en charge des navigateurs
- Chrome 49 et versions ultérieures annoncent
Save-Data
lorsque l'utilisateur active l'économiseur de données sur un appareil mobile, ou "Économiseur de données", sur les navigateurs pour ordinateur. - Opera 35+ annonce
Save-Data
lorsque l'utilisateur active "Opera" Turbo sur ordinateur, ou "Économies de données" option sur les navigateurs Android. - Yandex 16.2+ annonce
Save-Data
lorsque Turbo est activé sur ordinateur ou mobile des navigateurs.
Détection du paramètre Save-Data
...
Pour déterminer quand déclencher le "lumière" pour vos utilisateurs, votre
l'application peut vérifier l'en-tête de requête d'optimisation du client Save-Data
. Ce
l'en-tête de requête indique la préférence du client pour une consommation de données réduite en raison de
des coûts de transfert élevés, des vitesses
de connexion lentes ou pour 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 il est possible que ce délai soit prolongé à l'avenir pour indiquer d'autres utilisateurs
préférences.
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.
}
}
Vérification de la présence de l'objet connection
dans navigator
est essentiel, car il représente l'API Network Information, qui n'est
implémentée dans les navigateurs Internet Chrome, Chrome pour Android et Samsung. De
il vous suffit de vérifier si navigator.connection.saveData
est égal à
true
. Vous pouvez implémenter n'importe quelle opération d'économie de données dans cette condition.
![La
L'en-tête Save-Data apparaît dans les outils pour les développeurs Chrome avec l'icône
Extension Économiseur de données.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=8&hl=fr)
Si votre application utilise un service
un nœud de calcul, il 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 le
En-tête de requête Save-Data
et renvoie une réponse différente (différente)
le balisage, les 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 autorisez les utilisateurs pour passer facilement d'une expérience à l'autre. 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 avec les invites et les des boutons Marche/Arrêt ou des cases à cocher intuitifs.
- Lorsque le mode Économie de données est sélectionné, annoncez et fournissez une de la 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 ne doivent pas
omettre des fonctionnalités ou des données importantes, ils sont tout simplement plus conscients des
les coûts impliqués
et l’expérience utilisateur. Exemple :
- Une application de galerie photo peut fournir des aperçus de résolution inférieure ou utiliser un format mécanisme de carrousel gourmand en code.
- Une application de recherche peut renvoyer moins de résultats à la fois, limiter le nombre de ou de réduire le nombre de dépendances requises pour l'affichage la page.
- Un site axé sur l'information peut présenter moins d'articles, omettre les catégories les moins populaires, ou fournir des aperçus multimédias plus petits.
- Fournir la logique du serveur pour vérifier l'en-tête de requête
Save-Data
et envisager d'utiliser fournir une réponse de page alternative plus légère lorsqu'elle est activée (par exemple, le nombre de ressources et de dépendances requises, la compression des ressources, etc.- Si vous diffusez une réponse alternative basée sur l'en-tête
Save-Data
, n'oubliez pas de l'ajouter à la liste "Vary" (Vary: Save-Data
) pour indiquer 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 pour l'interaction avec les caches.
- Si vous diffusez une réponse alternative basée sur l'en-tête
- Si vous utilisez un service worker, votre application peut détecter à quel moment l'enregistrement des données
est activée en vérifiant la présence de la requête
Save-Data
ou en vérifiant la valeur de l'en-têtenavigator.connection.saveData
. Si cette option est activée, déterminez si vous pouvez réécrire la requête pour récupérer d'octets en moins, ou utiliser une réponse déjà récupérée. - Pensez à ajouter d'autres signaux à
Save-Data
, comme des informations sur le type de connexion et la technologie de l'utilisateur (voir NetInfo API). Par exemple, vous pouvez veulent offrir une expérience légère à n'importe quel utilisateur avec une connexion 2G, même siSave-Data
n'est pas activé. À l'inverse, ce n'est pas parce que l'utilisateur est en mode "rapide" 4G ne veut pas dire qu'il ne souhaite pas économiser des données. en itinérance. De plus, vous pourriez accroître la présenceSave-Data
avec l'indice clientDevice-Memory
pour s'adapter davantage aux utilisateurs de appareils dont la mémoire est limitée. La mémoire de l'appareil de l'utilisateur est également annoncée dans Indice clientnavigator.deviceMemory
.
Recettes
Les résultats que vous pouvez obtenir avec les Save-Data
sont limités à ceux que vous pouvez proposer.
. Pour vous donner une idée de ce qui est possible, passons en revue quelques
cas d'utilisation. En lisant cet article, vous pourriez trouver d'autres cas d'utilisation
n'hésitez pas à faire des tests et à voir ce qui est possible !
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
navigator.connection.saveData
. Sa détection côté serveur est
parfois préférable. 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
qui est impliqué dans certains des cas d'utilisation Save-Data
les plus avantageux.
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 est la même pour tous
et le backend d'application. En PHP, par exemple, les en-têtes de requête sont stockés
$_SERVER
super-mondial
tableau aux index
en commençant par HTTP_
. Cela signifie que vous pouvez détecter l'en-tête Save-Data
en
vérifier 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'aucun balisage ne soit envoyé au client, la $saveData
contiendra l'état Save-Data
et sera disponible n'importe où pour
utiliser sur la page. Avec ce mécanisme illustré, examinons quelques exemples
comment nous pouvons l'utiliser 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 "standard" écrans (1x) et une autre image deux fois plus grande
(x 2) pour les écrans haute résolution (par exemple, Retina
Display). Cette catégorie
n'est pas nécessairement limitée
aux appareils haut de gamme et est
deviennent de plus en plus courants. Dans les cas où une application allégée
il peut être plus prudent d'envoyer des images basse résolution (1x) à ces appareils
au lieu de variantes plus grandes (x2). Pour ce faire, lorsque 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
la facilité avec laquelle les utilisateurs
quelqu'un 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 aussi obtenir le même résultat en
à l'aide d'un module de réécriture d'URL comme Apache
mod_rewrite
. Il y
sont des exemples d'objectifs
ceci par
configuration relativement faible.
Vous pouvez aussi étendre ce concept aux propriétés CSS background-image
en
ajouter 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>
dans votre
CSS pour modifier la façon dont les images sont diffusées Vous pouvez envoyer un arrière-plan basse résolution
des images vers des écrans haute résolution, comme indiqué dans l'exemple HTML ci-dessus, ou omettez
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
des avantages intéressants pour le contenu, ils ne sont
peut-être pas souhaitables pour ceux qui essaient
tout ce qu'ils peuvent avec les forfaits de données facturés à l'usage. Dans ce qui est peut-être
le plus simple
cas d'utilisation de Save-Data
, nous pouvons utiliser le code de détection PHP vu précédemment et omettre
un 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 avoir un effet prononcé, comme vous pouvez le voir dans figure ci-dessous:
![Une comparaison d'images non critiques
en cours de chargement en l'absence de Save-Data, alors que ces mêmes images sont omises ;
lorsque Save-Data est présent.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=8&hl=fr)
Bien entendu, l'omission d'images n'est pas la seule possibilité. Vous pouvez également agir sur
Save-Data
de renoncer à envoyer d'autres ressources non critiques, telles que certaines
les 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 totalité d'une page donnée comme le font souvent les images, elles restent très populaires. Ils ne consomment ni une quantité insignifiante de des données. De plus, la façon dont les navigateurs extraient et affiche les polices est plus compliquée que à l'aide de concepts tels que FOIT FOUT et le navigateur ce qui fait du rendu une opération nuancée.
Vous pourriez vouloir écarter les sites Web non essentiels
pour les utilisateurs qui souhaitent bénéficier d'une expérience utilisateur simplifiée. Save-Data
en fait une
ce qui était raisonnablement simple à faire.
Par exemple, imaginons que vous ayez inclus Fira
Sans de Google
Polices sur votre site. Fira Sans est
un excellent corps
copier la police, mais ce n'est peut-être pas si crucial 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
nous pouvons écrire des styles qui appellent
d’abord la police de caractères non essentielle,
mais le désactive ensuite 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;
}
En utilisant cette approche, vous pouvez conserver l'extrait <link>
de Google Fonts dans
car le navigateur charge de façon spéculative les ressources CSS (y compris les fichiers
les polices) en appliquant d'abord des styles au DOM, puis en vérifiant s'il existe
appellent l'une des ressources de la feuille de style. Si quelqu'un arrive en
avec Save-Data
activé, Fira Sans ne se chargera jamais, car le DOM stylisé n'est jamais
l'invoque. Arial s'active, à la place. Ce n'est pas aussi joli que Fira Sans, mais
il peut être préférable aux utilisateurs
d'étendre leurs forfaits de données.
Résumé
L'en-tête Save-Data
n'a pas beaucoup de nuances. elle est soit activée
ou désactivée, et
il incombe à l'application de fournir des expériences appropriées basées sur
son paramètre, quelle qu'en soit la raison.
Par exemple, certains utilisateurs peuvent ne pas autoriser le mode Économie de données s'ils pensent qu'il est une perte de contenu ou de fonction, même si la connectivité est mauvaise. actuelle. À l'inverse, certains utilisateurs peuvent l'activer automatiquement pour des pages aussi petites et simples que possible, même dans une bonne situation de connectivité. Il est préférable que votre application part du principe que l'utilisateur veut l'accès complet et illimité jusqu'à ce qu'un utilisateur explicite le signale action.
En tant que propriétaires de sites et développeurs Web, prenons la responsabilité de notre contenu afin d'améliorer l'expérience des utilisateurs ayant des contraintes de données et des coûts.
Pour plus de détails sur Save-Data
et d'excellents exemples pratiques, consultez la page Aidez vos
Utilisateurs Save Data
.