Clienthinweisanfrage Save-Data
Überschrift
die in den Browsern Chrome, Opera und Yandex verfügbar sind, können Entwickler
schnellere Anwendungen für Nutzer, die den Datensparmodus in ihrem Browser aktivieren.
Die Notwendigkeit von vereinfachten Seiten
Alle sind sich einig, dass schnellere und schlankere Webseiten für Nutzer zufriedener sind. die Nutzerfreundlichkeit, das Verständnis und die Bindung von Inhalten zu verbessern mehr Conversions und einen höheren Umsatz. Google Studien haben gezeigt, dass „...optimierte Seiten laden viermal schneller als die Originalseite und nutzen 80% weniger Byte. Da diese Seiten viel schneller geladen werden, konnten wir auch auf diesen Seiten zu leiten.“
Obwohl die Anzahl der 2G-Verbindungen endgültig auf Ablehnung, 2G war nach wie vor das dominante Netzwerk Technologie . Die Verbreitung und Verfügbarkeit von 3G- und 4G-Netzen nimmt zu. aber die damit verbundenen Betriebskosten und Netzwerkbeschränkungen ein wesentlicher Faktor für Millionen von Nutzern.
Dies sind überzeugende Argumente für die Seitenoptimierung.
Es gibt alternative Methoden zur Verbesserung der Websitegeschwindigkeit ohne direkten Entwicklerzugriff wie Proxy-Browser und Transcodierungsdienste. Obwohl solche sind sehr beliebt und haben wesentliche Nachteile: (und manchmal inakzeptable) Bild- und Textkomprimierung, Verarbeitung nicht möglich sichere Seiten (HTTPS), die nur über ein Suchergebnis aufgerufene Seiten optimieren, und mehr. Die Beliebtheit dieser Dienste ist bereits ein Indikator dafür, Entwickelnden auf die hohe Nachfrage der Nutzer nach schnellen und Anwendungen und Seiten. Dieses Ziel zu erreichen, ist jedoch eine komplexe schwierigen Weg zu finden.
Der Anfrageheader Save-Data
Eine ziemlich einfache Methode besteht darin, den Browser mithilfe der Funktion
Save-Data
-Anfrageheader. Durch die Identifizierung dieses Headers kann eine Webseite
und eine optimierte Nutzererfahrung bei Kosten- und Leistungsbegrenzungen zu bieten.
Nutzenden.
Unterstützte Browser (siehe unten) ermöglichen es Nutzern, einen *Datensparmodus zu aktivieren, der erteilt dem Browser die Berechtigung, eine Reihe von Optimierungen anzuwenden, um die Datenmenge, die zum Rendern der Seite erforderlich ist. Wann diese Funktion verfügbar ist kann der Browser Bilder mit geringerer Auflösung anfordern, das Laden von oder Anfragen über einen Dienst weiterleiten, der andere inhaltsspezifische Optimierungen wie Komprimierung von Bild- und Textressourcen.
Unterstützte Browser
- Chrome 49+ wirbt für
Save-Data
, wenn der Nutzer aktiviert den „Datensparmodus“ auf Mobilgeräten oder im „Datensparmodus“ für Desktop-Browser. - Opera 35+ wirbt mit
Save-Data
, wenn der Nutzer "Opera Turbo“ Desktop-Modus aktiviert, „Dateneinsparungen“ Option in Android-Browsern. - Yandex 16.2+ wirbt mit
Save-Data
, wenn Turbo Modus ist auf Computern oder Mobilgeräten aktiviert Browser
Einstellung Save-Data
wird erkannt
Um zu bestimmen, wann das „Licht“ die User Experience bieten,
Anwendung nach dem Save-Data
-Clienthinweis-Anfrageheader suchen kann. Dieses
-Anforderungskopfzeile gibt an, dass der Client eine reduzierte Datennutzung aufgrund von
hohe Übertragungskosten, langsame Verbindungsgeschwindigkeiten oder andere Gründe.
Wenn der Nutzer den Datensparmodus in seinem Browser aktiviert, fügt der Browser
Den Save-Data
-Anfrageheader an alle ausgehenden Anfragen (sowohl HTTP als auch HTTPS)
Zum Zeitpunkt der Abfassung dieses Artikels bewirbt der Browser nur ein *on--Token im Header
(Save-Data: on
). Dieser Status wird jedoch möglicherweise in Zukunft erweitert, um einen anderen Nutzer zu kennzeichnen.
Einstellungen.
Außerdem kann festgestellt werden, ob Save-Data
in JavaScript aktiviert ist:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Auf Vorhandensein des connection
-Objekts in navigator
prüfen
ist von entscheidender Bedeutung, da es die Network Information API darstellt, die nur
die in den Internet-Browsern Chrome, Chrome für Android und Samsung implementiert wurden. Von
müssen Sie nur prüfen, ob navigator.connection.saveData
gleich
true
. In dieser Bedingung können Sie beliebige Vorgänge zum Reduzieren der Datennutzung implementieren.
![Die
Save-Data-Header, der in den Entwicklertools von Chrome angezeigt wird, zusammen mit dem
Datenkomprimierung-Erweiterung.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=6&hl=de)
Wenn Ihre Anwendung einen Dienst verwendet
Worker erhalten, kann es
Anfrageheader prüfen und relevante Logik anwenden, um den Vorgang zu optimieren
Alternativ kann der Server nach den beworbenen Einstellungen in der
Save-Data
-Anfrageheader und gibt eine alternative Antwort zurück (anders)
kleinere Bilder, Videos usw.
Tipps und Best Practices für die Implementierung
- Wenn du
Save-Data
verwendest, gib einige UI-Geräte an, die dies unterstützen, und erlaube Nutzern um ganz einfach zwischen den Funktionen zu wechseln. Beispiel:- Informieren Sie die Nutzer, dass
Save-Data
unterstützt wird, und ermutigen Sie sie, die App zu verwenden. - Nutzern ermöglichen, den Modus mit entsprechenden Aufforderungen intuitive Ein/Aus-Schaltflächen oder Kontrollkästchen.
- Wenn der Datensparmodus ausgewählt ist, kannst du eine einfache und offensichtliche um sie zu deaktivieren und gegebenenfalls zur vollständigen Version zurückzukehren.
- Informieren Sie die Nutzer, dass
- Denken Sie daran, dass schlanke Anwendungen nicht weniger umfangreich sind. Sie wissen nicht,
wichtige Funktionen oder Daten weglassen,
kennen sie einfach mehr,
die mit den Kosten und der User Experience
verbunden sind. Beispiel:
- Eine Fotogalerieanwendung liefert Vorschauen mit geringerer Auflösung oder verwendet eine Karussell-Mechanismus mit hohem Code.
- Eine Suchanwendung gibt möglicherweise weniger Ergebnisse gleichzeitig zurück, schränkt die Anzahl der medienlastige Ergebnisse oder reduzieren die Anzahl der Abhängigkeiten, auf der Seite.
- Auf einer nachrichtenorientierten Website werden unter Umständen weniger Meldungen angezeigt, weniger beliebte Kategorien oder kleinere Medienvorschauen bieten.
- Geben Sie Serverlogik zur Prüfung des Anfrageheaders
Save-Data
an und berücksichtigen Sie Wenn die Funktion aktiviert ist, wird eine alternative, schlankere Seitenantwort bereitgestellt, z.B. die Anzahl der erforderlichen Ressourcen und Abhängigkeiten zu reduzieren, aggressiver Ressourcenkomprimierung usw.- Wenn Sie eine alternative Antwort auf Basis des
Save-Data
-Headers bereitstellen, fügen Sie ihn der Vary-ListeVary: Save-Data
hinzu, um vorgelagerte Caches, dass sie diese Version nur dann zwischenspeichern und bereitstellen sollten, Der AnfrageheaderSave-Data
ist vorhanden. Weitere Informationen finden Sie in den Best Practices. für Interaktion mit Caches.
- Wenn Sie eine alternative Antwort auf Basis des
- Wenn Sie einen Service Worker verwenden, kann Ihre Anwendung erkennen, wann die
wird aktiviert, indem geprüft wird, ob die
Save-Data
-Anfrage vorhanden ist oder indem Sie den Wert desnavigator.connection.saveData
Property. Wenn diese Option aktiviert ist, überlegen Sie, ob Sie die Anfrage neu schreiben können, um den Dienst abzurufen weniger Byte benötigen oder eine bereits abgerufene Antwort verwenden. - Sie können
Save-Data
mit anderen Signalen erweitern, z. B. mit Informationen zu Verbindungstyp und -technologie des Nutzers (siehe NetInfo API) dar. Zum Beispiel könnten Sie möchten allen Nutzern mit einer 2G-Verbindung die schlanke Oberfläche bereitstellen, selbst wennSave-Data
ist nicht aktiviert. Umgekehrt gilt: Nur weil der Nutzer auf einer "schnellen" 4G ist nicht gleichbedeutend mit dem Einsparen von Daten. z. B. beim Roaming. Außerdem können Sie die Präsenz vonSave-Data
mit demDevice-Memory
-Clienthinweis zur weiteren Anpassung an Nutzer auf Geräte mit begrenztem Speicher. Der Arbeitsspeicher des Nutzergeräts wird ebenfalls in dernavigator.deviceMemory
-Clienthinweis.
Rezepte
Was du mit Save-Data
erreichen kannst, ist auf das beschränkt, was du dir ausdenken kannst
mit. Um Ihnen eine Vorstellung davon zu geben, was möglich ist, sehen wir uns einige
Cases. Möglicherweise fallen Ihnen beim Lesen weitere Anwendungsfälle ein.
Experimentieren Sie und sehen Sie, was möglich ist!
Save-Data
wird im serverseitigen Code gesucht
Der Status Save-Data
kann in JavaScript jedoch über die
navigator.connection.saveData
erkannt wird, ist dies serverseitig
manchmal besser geeignet. JavaScript kann unter Umständen nicht ausgeführt werden. Außerdem
Die serverseitige Erkennung ist die einzige Möglichkeit, das Markup zu ändern, bevor es an den
Kundenunternehmen, das für einige der Save-Data
nützlichsten Anwendungsfälle verantwortlich ist.
Die spezifische Syntax zum Erkennen des Save-Data
-Headers im serverseitigen Code
hängt von der verwendeten Sprache ab. Das Grundprinzip sollte jedoch für alle
Anwendungs-Back-End. In PHP werden Anfrageheader zum Beispiel im
$_SERVER
superglobal
Array bei Indexen
beginnend mit HTTP_
. Das bedeutet, dass Sie den Save-Data
-Header anhand
Existenz und Wert der Variablen $_SERVER["HTTP_SAVE_DATA"]
prüfen
etwa so:
// 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;
}
Wenn du diese Prüfung vornimmst, bevor Markup an den Client gesendet wird, wird der $saveData
enthält den Status Save-Data
und ist überall verfügbar für
auf der Seite verwenden können. Sehen wir uns nun einige Beispiele für
wie wir damit begrenzen können,
wie viele Daten wir an den Nutzer senden.
Stellen Sie Bilder mit niedriger Auflösung für Bildschirme mit hoher Auflösung bereit
Ein häufiger Anwendungsfall für Bilder im Web ist die Bereitstellung von Bildern in zwei Teilen:
Ein Image für „Standard“ Bildschirmen (1x) und ein weiteres Bild, das doppelt so groß ist,
(2x) für hochauflösende Bildschirme (z.B. Retina
Display). Diese High-Fidelity-
Bildschirmauflösung ist nicht unbedingt auf High-End-Geräte beschränkt.
immer häufiger wird. In Fällen, in denen das App-Erlebnis
empfohlen wird, empfiehlt es sich, Bilder mit geringerer Auflösung (1x) an diese
Bildschirmen anstelle von größeren (2-fachen) Varianten. Um dies zu erreichen, wenn der Save-Data
-Header vorhanden ist, ändern wir einfach das Markup, das wir an den Client senden:
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
}
Dieser Anwendungsfall ist ein perfektes Beispiel dafür,
die Sie speziell darum auffordert, weniger Daten zu senden. Wenn Ihnen das nicht gefällt
des Markups im Back-End ändern, können Sie das gleiche Ergebnis auch erzielen, indem Sie
mithilfe eines URL-Umschreibungsmoduls wie dem
mod_rewrite
Es
sind Beispiele dafür, wie Sie
dieses mit
relativ wenig Konfiguration.
Sie können dieses Konzept auch auf CSS-background-image
-Properties ausdehnen, indem Sie
einfach eine Klasse zum <html>
-Element hinzufügen:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Von hier aus können Sie die Klasse save-data
auf das <html>
-Element in Ihrem
CSS, um die Bereitstellung von Bildern zu ändern. Du kannst Hintergrund mit niedriger Auflösung senden
wie im HTML-Beispiel oben gezeigt, auf Bildschirme mit hoher Auflösung zu übertragen, oder
bestimmte Ressourcen insgesamt.
Nicht wesentliche Bilder weglassen
Einige Bildinhalte im Web sind einfach nicht unverzichtbar. Solche Bilder können zwar
Positives zu Content zu machen, sind sie vielleicht nicht wünschenswert, wenn jemand versucht,
Datentarife optimal nutzen. Was ist vielleicht die einfachste
Anwendungsfall von Save-Data
ist, können wir den zuvor erwähnten PHP-Erkennungscode verwenden und
als nicht unbedingt notwendiges Bild-Markup:
<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
}
Wie Sie hier sehen können, hat diese Technik einen deutlichen Effekt. Abbildung unten:
<ph type="x-smartling-placeholder">![Vergleich nicht kritischer Bilder
die geladen werden, wenn Save-Data fehlt, und dieselben Bilder ausgelassen werden.
wenn „Save Data“ vorhanden ist.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=6&hl=de)
Natürlich ist das Weglassen von Bildern nicht die einzige Möglichkeit. Sie können auch Maßnahmen
Save-Data
, um das Senden anderer nicht kritischer Ressourcen wie bestimmter
Schriftbilder.
Unwichtige Webschriftarten auslassen
Web-Schriftarten machen normalerweise keinen annähernd so großen Anteil an der Gesamtheit einer Seite aus. wie Bilder häufig, sind sie dennoch sehr beliebt. Sie verbrauchen keinen eine unerhebliche Menge an Daten. Außerdem ist die Art und Weise, wie Browser Schriftarten abrufen und rendern, mit Konzepten wie FOIT FOUT und Browser und Heuristiken zu einer nuancierten Operation machen.
In diesem Fall kann es sinnvoll sein, nicht wesentliche Web-
für Nutzende, die eine bessere
User Experience wünschen. Save-Data
macht dies zu einem
relativ einfach zu tun.
Nehmen wir beispielsweise an, Sie haben Fira
Sans von Google
Schriftarten auf Ihrer Website. Fira Sans ist eine hervorragende Körperform
die Schriftart kopieren, aber vielleicht
ist sie nicht so wichtig für Nutzende, die Daten speichern wollen. Durch das Hinzufügen von
eine Klasse von save-data
für das <html>
-Element, wenn der Save-Data
-Header
können wir Stile schreiben,
die das weniger wichtige Schriftbild aufrufen.
aber deaktiviert ihn dann, wenn der Header Save-Data
vorhanden ist:
/* 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;
}
Auf diese Weise können Sie das <link>
-Snippet von Google Fonts in
da der Browser CSS-Ressourcen spekulativ lädt (einschließlich Web-
Schriftarten) hinzu, indem Sie zuerst Stile auf das DOM anwenden und dann prüfen, ob HTML-Code
-Elemente rufen eine der Ressourcen im Stylesheet auf. Wenn jemand
Wenn Save-Data
aktiviert ist, wird Fira Sans nie geladen, weil das DOM mit benutzerdefinierten Stilen nie
ruft es auf. Stattdessen wird Arial aktiviert. Sie ist nicht so schön wie Fira Sans,
ist sie möglicherweise besser für die Nutzenden, die versuchen, ihre Datenpläne zu erweitern.
Zusammenfassung
Der Save-Data
-Header hat nicht viel Nuance. ist er aktiviert oder deaktiviert.
die Anwendung die Verantwortung für die Bereitstellung
angemessener Nutzererfahrungen auf der Grundlage
unabhängig vom Grund nicht
festlegen.
Einige Nutzer lassen beispielsweise den Datensparmodus nicht zu, wenn sie vermuten, dass es sich um führen zu einem Verlust von App-Inhalten oder -Funktionen, selbst bei schlechter Verbindung. Situation. Umgekehrt kann es selbstverständlich auch sein, so klein und einfach wie möglich sein, selbst bei guter Konnektivität. Ihre App sollte am besten davon ausgehen, dass der Nutzer bevor Sie durch einen eindeutigen Nutzer Aktion ausführen.
Als Websiteinhaber und Webentwickler sollten Sie die Verantwortung um die Nutzererfahrung für daten- und kostenbeschränkte Nutzer zu verbessern.
Weitere Informationen zu Save-Data
und hervorragende praktische Beispiele finden Sie unter Helfen Sie Ihrem
Nutzer Save Data
.