Schnelle und einfache Anwendungen mit Save-Data bereitstellen

Dave Gash
Dave Gash
Ilja Grigorik
Ilya Grigorik

Mit dem in Chrome, Opera und Yandex verfügbaren Save-Data-Clienthinweis-Header, der in Chrome, Opera und Yandex verfügbar ist, können Entwickler einfachere, schnellere Anwendungen für Nutzer bereitstellen, die den Datensparmodus in ihrem Browser aktiviert haben.

Die Notwendigkeit einfacher Seiten

Weblight-Statistiken

Alle Menschen sind sich einig, dass schnellere und schlankere Webseiten ein zufriedeneres Nutzererlebnis bieten, ein besseres Verständnis und bessere Bindung von Inhalten ermöglichen und zu mehr Conversions und Umsatz führen. Studien von Google haben ergeben, dass optimierte Seiten viermal schneller als die Originalseite geladen werden und 80 % weniger Byte verbrauchen. Da diese Seiten deutlich schneller laden, konnten wir auch einen Anstieg der Zugriffe auf diese Seiten um 50% feststellen.“

Und obwohl die Anzahl der 2G-Verbindungen endgültig abnimmt, war 2G 2015 noch die vorherrschende Netzwerktechnologie. Die Verbreitung und Verfügbarkeit von 3G- und 4G-Netzen wächst rasant, aber die damit verbundenen Betriebskosten und Netzwerkeinschränkungen sind für Hunderte Millionen von Nutzern immer noch ein wichtiger Faktor.

Dies sind starke Argumente für die Seitenoptimierung.

Es gibt alternative Methoden, um die Websitegeschwindigkeit ohne direkte Beteiligung des Entwicklers zu verbessern, z. B. Proxy-Browser und Transcodierungsdienste. Obwohl solche Dienste sehr beliebt sind, haben sie erhebliche Nachteile: eine einfache (und manchmal inakzeptable) Bild- und Textkomprimierung, keine Möglichkeit, sichere HTTPS-Seiten zu verarbeiten, nur die über ein Suchergebnis zu besuchenden Seiten zu optimieren und vieles mehr. Die große Beliebtheit dieser Dienste ist ebenfalls ein Hinweis darauf, dass Webentwickler auf die hohe Nachfrage der Nutzer nach schnellen und einfachen Anwendungen und Seiten nicht angemessen reagieren. Dieses Ziel zu erreichen ist jedoch ein komplexer und manchmal schwieriger Weg.

Der Save-Data-Anfrageheader

Eine ziemlich einfache Methode besteht darin, den Browser mithilfe des Anfrageheaders Save-Data um Hilfe zu bitten. Durch Identifizierung dieses Headers kann eine Webseite Nutzern mit eingeschränkter Leistung und Kosten eine optimale Nutzererfahrung bieten.

Bei unterstützten Browsern (siehe unten) kann der Nutzer einen *Datensparmodus aktivieren, der dem Browser die Berechtigung erteilt, eine Reihe von Optimierungen anzuwenden, um die zum Rendern der Seite erforderliche Datenmenge zu reduzieren. Wenn diese Funktion verfügbar gemacht oder beworben wird, kann der Browser Bilder mit geringerer Auflösung anfordern, das Laden einiger Ressourcen verzögern oder Anfragen über einen Dienst weiterleiten, der andere inhaltsspezifische Optimierungen wie die Komprimierung von Bild- und Textressourcen anwendet.

Unterstützte Browser

Einstellung Save-Data wird erkannt

Um zu bestimmen, wann den Nutzern die „leichte“ Umgebung präsentiert werden soll, kann deine Anwendung nach dem Anfrageheader des Save-Data-Clienthinweiss suchen. Dieser Anfrageheader gibt an, wie der Client eine geringere Datennutzung aufgrund von hohen Übertragungskosten, langsamen Verbindungsgeschwindigkeiten oder anderen Gründen bevorzugt.

Wenn der Nutzer den Datensparmodus in seinem Browser aktiviert, hängt der Browser den Save-Data-Anfrageheader an alle ausgehenden Anfragen (sowohl HTTP als auch HTTPS) an. Zum Zeitpunkt der Erstellung dieses Dokuments bietet der Browser nur ein *on- Token im Header (Save-Data: on) an. Dieses Token kann jedoch in Zukunft erweitert werden, um andere Nutzerpräferenzen anzugeben.

Außerdem lässt sich so feststellen, ob Save-Data in JavaScript aktiviert ist:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Es ist wichtig, zu prüfen, ob das Objekt connection im Objekt navigator vorhanden ist, da es für die Network Information API steht, die nur in Chrome, Chrome für Android und Samsung-Internetbrowsern implementiert ist. Von dort aus müssen Sie nur prüfen, ob navigator.connection.saveData gleich true ist. Sie können dann alle Datensparvorgänge in dieser Bedingung implementieren.

Der Header „Daten speichern“ wird in den Entwicklertools von Chrome zusammen mit der Datensparfunktion angezeigt.
Die Datensparmodus-Erweiterung in der Chrome-Desktop-App aktivieren.

Wenn Ihre Anwendung einen Service-Worker verwendet, kann sie die Anfrage-Header überprüfen und relevante Logik anwenden, um die Arbeit zu optimieren. Alternativ kann der Server nach den beworbenen Einstellungen im Save-Data-Anfrageheader suchen und eine alternative Antwort zurückgeben – z. B. mit anderem Markup, kleineren Bildern und Videos.

Implementierungstipps und Best Practices

  1. Wenn Sie Save-Data verwenden, geben Sie einige UI-Geräte an, die dies unterstützen, damit Nutzer ganz einfach zwischen den Oberflächen wechseln können. Beispiel:
    • Informieren Sie die Nutzer darüber, dass Save-Data unterstützt wird, und ermutigen Sie sie, es zu verwenden.
    • Nutzer können mit entsprechenden Aufforderungen und intuitiven Ein-/Aus-Schaltflächen oder Kästchen den Modus erkennen und auswählen.
    • Wenn der Datensparmodus ausgewählt ist, kannst du ihn ankündigen und ihm eine einfache Möglichkeit bieten, ihn zu deaktivieren und bei Bedarf wieder vollständig zu funktionieren.
  2. Denken Sie daran, dass einfache Anwendungen nicht weniger sind. Sie lassen keine wichtigen Funktionen oder Daten aus, sie wissen nur mehr der damit verbundenen Kosten und der Nutzerfreundlichkeit. Beispiel:
    • Eine Fotogalerieanwendung kann Vorschauen mit geringerer Auflösung liefern oder einen Karussellmechanismus verwenden, der weniger Code enthält.
    • Eine Suchanwendung kann weniger Ergebnisse auf einmal zurückgeben, die Anzahl der medienlastigen Ergebnisse begrenzen oder die Anzahl der Abhängigkeiten reduzieren, die zum Rendern der Seite erforderlich sind.
    • Auf einer nachrichtenorientierten Website werden möglicherweise weniger Meldungen angezeigt, weniger beliebte Kategorien ausgelassen oder eine kleinere Medienvorschau angezeigt.
  3. Geben Sie Serverlogik an, um den Save-Data-Anfrageheader zu prüfen und eine alternative, einfachere Seitenantwort bereitzustellen, wenn diese aktiviert ist. So können Sie beispielsweise die Anzahl der erforderlichen Ressourcen und Abhängigkeiten reduzieren oder eine aggressivere Ressourcenkomprimierung anwenden.
    • Wenn Sie eine alternative Antwort basierend auf dem Save-Data-Header bereitstellen, denken Sie daran, diese der Vary-Liste (Vary: Save-Data) hinzuzufügen. So teilen Sie vorgelagerten Caches mit, dass sie diese Version nur dann im Cache speichern und bereitstellen sollen, wenn der Anfrageheader Save-Data vorhanden ist. Weitere Informationen finden Sie in den Best Practices für die Interaktion mit Caches.
  4. Wenn Sie einen Service Worker verwenden, kann Ihre Anwendung erkennen, ob die Option zum Speichern der Daten aktiviert ist, indem das Vorhandensein des Anfrageheaders Save-Data oder der Wert des Attributs navigator.connection.saveData geprüft wird. Wenn diese Option aktiviert ist, können Sie die Anfrage umschreiben, um weniger Bytes abzurufen, oder eine bereits abgerufene Antwort verwenden.
  5. Sie können Save-Data mit anderen Signalen erweitern, z. B. mit Informationen zum Verbindungstyp und zur Technologie des Nutzers (siehe NetInfo API). Beispielsweise können Sie die einfache Umgebung allen Nutzern mit einer 2G-Verbindung bereitstellen, auch wenn Save-Data nicht aktiviert ist. Umgekehrt bedeutet das nur, dass der Nutzer eine „schnelle“ 4G-Verbindung hat, nicht bedeutet, dass er kein Interesse am Speichern von Daten hat, z. B. beim Roaming. Außerdem können Sie das Vorhandensein von Save-Data mit dem Clienthinweis Device-Memory erweitern, um sich weiter an Nutzer auf Geräten mit begrenztem Arbeitsspeicher anzupassen. Der Arbeitsspeicher des Nutzergeräts wird auch im Clienthinweis von navigator.deviceMemory beworben.

Rezepte

Was Sie mit Save-Data erreichen können, ist auf das beschränkt, was Sie sich einfallen lassen können. Um Ihnen eine Vorstellung davon zu geben, was möglich ist, sehen wir uns einige Anwendungsfälle an. Möglicherweise kommen Ihnen beim Lesen weitere Anwendungsfälle ein. Probieren Sie also ruhig etwas aus, um zu sehen, was alles möglich ist.

Im serverseitigen Code wird auf Save-Data geprüft

Der Save-Data-Status ist etwas, das du in JavaScript über das Attribut navigator.connection.saveData erkennen kannst. Manchmal ist es aber besser, ihn serverseitig zu erkennen. JavaScript kann in manchen Fällen nicht ausgeführt werden. Außerdem ist die serverseitige Erkennung die einzige Möglichkeit, Markup zu ändern, bevor es an den Client gesendet wird. Dies ist Teil der vorteilhaftesten Anwendungsfälle von Save-Data.

Die spezifische Syntax zum Erkennen des Save-Data-Headers im serverseitigen Code hängt von der verwendeten Sprache ab. Der Grundgedanke sollte jedoch für jedes Anwendungs-Back-End gleich sein. In PHP werden Anfrageheader beispielsweise im Superglobalen-Array $_SERVER bei Indexen gespeichert, die mit HTTP_ beginnen. Dies bedeutet, dass Sie den Header Save-Data erkennen können, indem Sie das Vorhandensein und den Wert der Variablen $_SERVER["HTTP_SAVE_DATA"] so prüfen:

// 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 Sie diese Prüfung vornehmen, bevor Markup an den Client gesendet wird, enthält die Variable $saveData den Status Save-Data und kann überall auf der Seite verwendet werden. Sehen wir uns nun einige Beispiele dafür an, wie wir mithilfe dieses Mechanismus einschränken können, wie viele Daten wir an den Nutzer senden.

Bilder mit niedriger Auflösung für Bildschirme mit hoher Auflösung bereitstellen

Bilder im Web werden häufig verwendet, um Bilder in Zweiergruppen bereitzustellen: ein Bild für Standardbildschirme (1x) und ein weiteres Bild, das für Bildschirme mit hoher Auflösung doppelt so groß (2x) ist (z.B. Retina-Display) Diese Klasse von hochauflösenden Bildschirmen ist nicht unbedingt auf High-End-Geräte beschränkt und wird immer häufiger eingesetzt. In Fällen, in denen eine einfachere Anwendung bevorzugt wird, kann es vernünftig sein, Bilder mit niedrigerer Auflösung (1x) an diese Bildschirme zu senden, anstatt größere (2x) Varianten. Dazu ändern wir einfach das an den Client gesendete Markup, wenn der Save-Data-Header vorhanden ist:

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, wie wenig Aufwand erforderlich ist, um jemanden zu unterstützen, der ausdrücklich darum bittet, weniger Daten zu senden. Wenn du das Markup im Backend nicht ändern möchtest, kannst du dasselbe Ergebnis auch mit einem URL-Umschreibungsmodul wie dem mod_rewrite von Apache erzielen. Es gibt Beispiele, wie dies mit relativ geringem Konfigurationsaufwand erreicht werden kann.

Sie können dieses Konzept auch auf CSS-background-image-Attribute erweitern, indem Sie dem <html>-Element einfach eine Klasse hinzufügen:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Von hier aus können Sie ein Targeting auf die Klasse save-data auf das <html>-Element in Ihrem CSS vornehmen, um zu ändern, wie Bilder ausgeliefert werden. Sie können Hintergrundbilder mit niedriger Auflösung an Bildschirme mit hoher Auflösung senden, wie im obigen HTML-Beispiel gezeigt, oder bestimmte Ressourcen ganz weglassen.

Unwichtige Bilder weglassen

Manche Bildinhalte im Web sind einfach unerheblich. Solche Bilder können zwar eine nüchterne Nebensache für Inhalte sein, sind aber möglicherweise nicht wünschenswert für Nutzer, die so viel wie möglich aus kostenpflichtigen Datentarifen herausholen möchten. Für den vielleicht einfachsten Anwendungsfall von Save-Data können wir den PHP-Erkennungscode von vorhin verwenden und auf unwichtige Bild-Markups verzichten:

<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 in der folgenden Abbildung sehen können, kann dieses Verfahren sicherlich einen ausgeprägten Effekt haben:

Vergleich von nicht kritischen Bildern, die geladen werden, wenn Save-Data nicht vorhanden ist, und solchen, die weggelassen werden, wenn Save-Data vorhanden ist.
Ein Vergleich von nicht kritischen Bildern, die geladen werden, wenn Save-Data nicht vorhanden ist, und dieselben Bilder, die weggelassen werden, wenn Save-Data vorhanden ist.

Das Auslassen von Bildern ist natürlich nicht die einzige Möglichkeit. Sie können auch auf Save-Data reagieren, damit keine anderen nicht kritischen Ressourcen wie bestimmte Schriftarten gesendet werden.

Unwichtige Web-Schriftarten weglassen

Obwohl Webschriftarten in der Regel nicht so viel von der Gesamtnutzlast einer bestimmten Seite ausmachen wie Bilder, sind sie dennoch recht beliebt. Sie verbrauchen auch keine unerhebliche Datenmenge. Außerdem ist die Art und Weise, wie Browser Schriftarten abrufen und rendern, komplizierter, als Sie vielleicht denken, da Konzepte wie FOIT, FOUT und Browserheuristiken das Rendern zu einem differenzierten Vorgang machen.

Es mag naheliegend sein, auf unwichtige Webschriftarten für Nutzerinnen und Nutzer zu verzichten, die eine weniger ansprechende Nutzererfahrung wünschen. Mit Save-Data ist dies relativ einfach.

Angenommen, Sie haben Fira Sans aus Google Fonts in Ihre Website eingebunden. Fira Sans ist eine hervorragende Schriftart, aber für Nutzende, die Daten sparen möchten, Durch Hinzufügen einer Klasse von save-data zum <html>-Element, wenn der Save-Data-Header vorhanden ist, können wir Stile schreiben, die zuerst das nicht notwendige Schriftbild aufrufen, es dann aber deaktivieren, wenn der Save-Data-Header 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;
}

Bei diesem Ansatz können Sie das <link>-Snippet von Google Fonts beibehalten, da der Browser CSS-Ressourcen (einschließlich Webschriftarten) spekulativ lädt, indem zuerst Stile auf das DOM angewendet werden und dann geprüft wird, ob HTML-Elemente eine der Ressourcen im Stylesheet aufrufen. Wenn jemand bei einem Save-Data aktiviert ist, wird Fira Sans nie geladen, da das DOM mit benutzerdefinierten Stilen nie aufgerufen wird. Stattdessen wird Arial eingesetzt. Es ist nicht so schön wie Fira Sans, aber möglicherweise besser für Nutzer, die ihre Datentarife erweitern möchten.

Zusammenfassung

Der Save-Data-Header weist keine großen Nuancen auf. Er ist entweder aktiviert oder deaktiviert und die Anwendung trägt die Verantwortung für die Bereitstellung angemessener Inhalte je nach ihrer Einstellung, unabhängig vom Grund.

Einige Nutzer lassen beispielsweise den Datensparmodus nicht zu, wenn sie den Verdacht haben, dass App-Inhalte oder -Funktionen beeinträchtigt werden, selbst bei schlechter Verbindung. Umgekehrt können einige Nutzer es selbst bei guter Konnektivität selbst bei guter Konnektivität sogar tun, um die Seiten so klein und einfach wie möglich zu halten. Ihre Anwendung sollte am besten davon ausgehen, dass der Nutzer die volle und unbegrenzte Erfahrung wünschen, bis Sie durch eine explizite Nutzeraktion eindeutig darüber informiert werden.

Als Websiteinhaber und Webentwickler übernehmen wir die Verantwortung für die Verwaltung unserer Inhalte, um die Nutzererfahrung für Nutzer mit Daten- und Kostenbeschränkung zu verbessern.

Weitere Informationen zu Save-Data und hervorragende praktische Beispiele findest du unter Nutzern helfen Save Data.