Schnelle und einfache Anwendungen mit Save-Data bereitstellen

Dave Gash

Ilya Grigorik

Jeremy Wagner

Mit dem Save-Data-Clienthinweis-Header, der in den Browsern Chrome, Opera und Yandex verfügbar ist, können Entwickler Nutzern, die in ihrem Browser den Datensparmodus aktivieren, schlankere und schnellere Anwendungen bereitstellen.

Die Notwendigkeit von vereinfachten Seiten

Alle sind sich einig, dass schnellere und schlankere Webseiten eine zufriedenere Nutzererfahrung bieten, ein besseres Verständnis und eine bessere Aufbewahrung von Inhalten ermöglichen sowie mehr Conversions und Umsatz generieren. Google-Studien haben gezeigt, dass optimierte Seiten viermal schneller als die Originalseite geladen werden und 80 % weniger Byte verbrauchen. Da diese Seiten viel schneller geladen werden, haben wir auch einen Anstieg der Zugriffe um 50% festgestellt."

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

Dies sind überzeugende Argumente für die Seitenoptimierung.

Es gibt alternative Methoden zur Verbesserung der Websitegeschwindigkeit ohne direkte Einbeziehung von Entwicklern, z. B. Proxy-Browser und Transcodierungsdienste. Obwohl solche Dienste sehr beliebt sind, haben sie erhebliche Nachteile – eine einfache (und manchmal inakzeptable) Bild- und Textkomprimierung, die Unfähigkeit, sichere Seiten zu verarbeiten (HTTPS), die Optimierung von Seiten, die über ein Suchergebnis aufgerufen werden, und vieles mehr. Die große Beliebtheit dieser Dienste ist wiederum ein Indikator dafür, dass Webentwickler der hohen Nutzernachfrage nach schnellen und schlanken Anwendungen und Seiten nicht angemessen gerecht werden. Dieses Ziel zu erreichen, ist jedoch ein komplexer und manchmal schwieriger Weg.

Der Anfrageheader Save-Data

Eine ziemlich einfache Methode besteht darin, den Browser über den Anfrageheader Save-Data unterstützen zu lassen. Durch die Identifizierung dieses Headers kann eine Webseite für Nutzer mit Kosten- und Leistungseinschränkungen eine optimale Nutzererfahrung bieten.

Bei unterstützten Browsern (siehe unten) kann der Nutzer den *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, fordert der Browser möglicherweise Bilder mit geringerer Auflösung an, verzögert das Laden einiger Ressourcen oder leitet Anfragen über einen Dienst weiter, der andere inhaltsspezifische Optimierungen wie Bild- und Textressourcenkomprimierung anwendet.

Unterstützte Browser

• Chrome 49 und höher bewirbt Save-Data, wenn der Nutzer die Option „Datensparmodus“ auf Mobilgeräten oder die Erweiterung „Datensparmodus“ in Desktop-Browsern aktiviert.
• Opera 35+ bewirbt Save-Data, wenn der Nutzer den Opera Turbo-Modus auf einem Computer oder die Option Dateneinsparungen in Android-Browsern aktiviert.
• Yandex 16.2 und höher bewirbt Save-Data, wenn auf einem Computer oder in mobilen Browsern der Schnellmodus aktiviert ist.

Einstellung Save-Data wird erkannt

Um zu bestimmen, wann Ihren Nutzern eine „einfache“ Erfahrung bereitgestellt werden soll, kann Ihre Anwendung nach dem Anfrageheader Save-Data-Clienthinweis suchen. Dieser Anfrageheader zeigt an, dass der Client aufgrund von hohen Übertragungskosten, langsamen Verbindungsgeschwindigkeiten oder aus anderen Gründen eine geringere Datennutzung bevorzugt.

Wenn der Nutzer den Datensparmodus in seinem Browser aktiviert, hängt der Browser allen ausgehenden Anfragen (sowohl HTTP- als auch HTTPS-Anfragen) den Anfrageheader Save-Data an. Zum Zeitpunkt der Abfassung dieses Artikels bewirbt der Browser nur ein *on-Token im Header (Save-Data: on). Dies kann jedoch in Zukunft erweitert werden, um andere Nutzereinstellungen anzuzeigen.

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.
  }
}

Es ist von entscheidender Bedeutung, das Vorhandensein des connection-Objekts im navigator-Objekt zu prüfen, da es die Network Information API darstellt, die nur in Chrome, Chrome für Android und den Internetbrowsern von Samsung implementiert ist. Von dort müssen Sie nur prüfen, ob navigator.connection.saveData gleich true ist, und Sie können in dieser Bedingung alle Datensparvorgänge implementieren.

Die Erweiterung „Datenkomprimierung“ in der Chrome-Desktop-App aktivieren.

Wenn Ihre Anwendung einen Service Worker verwendet, kann sie die Anfrageheader prüfen und relevante Logik zur Optimierung der Anwendung anwenden. Alternativ kann der Server im Anfrageheader Save-Data nach den beworbenen Einstellungen suchen und eine alternative Antwort zurückgeben, z. B. ein anderes Markup, kleinere Bilder und Videos usw.

Tipp :Wenn du deine Seiten mit PageSpeed für Apache oder Nginx optimierst, findest du in dieser Diskussion Informationen dazu, wie du Save-Data-Einsparungen für deine Nutzer aktivierst._

Tipps und Best Practices für die Implementierung

1. Geben Sie bei Verwendung von Save-Data einige UI-Geräte an, die dies unterstützen, damit Nutzer einfach zwischen den Umgebungen wechseln können. Beispiel:
   • Informieren Sie die Nutzer, dass Save-Data unterstützt wird, und ermutigen Sie sie, die App zu verwenden.
   • Mit entsprechenden Aufforderungen und intuitiven Ein-/Aus-Schaltflächen oder Kästchen können Nutzer den Modus erkennen und auswählen.
   • Wenn der Datensparmodus ausgewählt ist, kannst du ihn ankündigen und eine einfache Möglichkeit anbieten, ihn zu deaktivieren und bei Bedarf wieder zum vollständigen Erlebnis zurückzukehren.
2. Denken Sie daran, dass schlanke Anwendungen nicht weniger umfangreich sind. Sie lassen keine wichtigen Funktionen oder Daten aus, sondern sind sich nur der damit verbundenen Kosten und der Nutzererfahrung bewusst. Beispiel:
   • Eine Fotogalerieanwendung kann Vorschauen mit geringerer Auflösung liefern oder einen weniger codeintensiven Karussell-Mechanismus verwenden.
   • Eine Suchanwendung kann weniger Ergebnisse auf einmal zurückgeben, die Anzahl der medienintensiven 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 weggelassen oder kleinere Medienvorschauen bereitgestellt.
3. Stellen Sie Serverlogik zur Verfügung, um den Anfrageheader Save-Data zu prüfen, und erwägen Sie die Bereitstellung einer alternativen, einfacheren Seitenantwort, wenn sie aktiviert ist. Reduzieren Sie z. B. die Anzahl der erforderlichen Ressourcen und Abhängigkeiten oder wenden Sie eine aggressivere Ressourcenkomprimierung an.
   • Wenn Sie eine alternative Antwort auf Basis des Save-Data-Headers bereitstellen, fügen Sie ihn der Vary-Liste (Vary: Save-Data) hinzu, um Upstream-Caches anzuweisen, diese Version nur dann im Cache zu speichern und bereitzustellen, 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 feststellen, ob die Option zum Speichern von Daten aktiviert ist. Dazu wird das Vorhandensein des Anfrageheaders Save-Data oder der Wert des Attributs navigator.connection.saveData geprüft. Wenn diese Option aktiviert ist, prüfen Sie, ob Sie die Anfrage neu schreiben können, um weniger Byte abzurufen, oder ob Sie eine bereits abgerufene Antwort verwenden können.
5. Sie können Save-Data durch andere Signale erweitern, z. B. Informationen zum Verbindungstyp und zur Technologie des Nutzers (siehe NetInfo API). So können Sie die einfache Version beispielsweise jedem Nutzer mit einer 2G-Verbindung bereitstellen, selbst wenn Save-Data nicht aktiviert ist. Umgekehrt bedeutet die Tatsache, dass der Nutzer eine "schnelle" 4G-Verbindung hat, nicht automatisch daran interessiert, Daten zu sparen, z. B. beim Roaming. Außerdem kannst du das Vorhandensein von Save-Data mit dem Device-Memory-Clienthinweis erweitern, um sie weiter an Nutzer auf Geräten mit begrenztem Arbeitsspeicher anzupassen. Der Arbeitsspeicher des Nutzergeräts wird auch im Clienthinweis navigator.deviceMemory angegeben.

Rezepte

Was Sie mit Save-Data erreichen können, ist auf das beschränkt, was Ihnen einfällt. Damit Sie eine Vorstellung davon erhalten, was möglich ist, sehen wir uns einige Anwendungsfälle an. Während Sie dies lesen, fallen Ihnen möglicherweise weitere Anwendungsfälle ein. Experimentieren Sie also ruhig, um zu sehen, was möglich ist.

Save-Data wird im serverseitigen Code gesucht

Der Status Save-Data kann in JavaScript über das Attribut navigator.connection.saveData erkannt werden. Manchmal ist es aber besser, ihn serverseitig zu erkennen. JavaScript kann unter Umständen nicht ausgeführt werden. Außerdem ist die serverseitige Erkennung die einzige Möglichkeit, Markups zu ändern, bevor es an den Client gesendet wird. Das ist Teil der vorteilhaftesten Anwendungsfälle für Save-Data.

Die spezifische Syntax zum Erkennen des Save-Data-Headers im serverseitigen Code hängt von der verwendeten Sprache ab, aber die Grundidee sollte für jedes Anwendungs-Back-End gleich sein. In PHP werden Anfrageheader beispielsweise im Superglobalen Array $_SERVER bei Indexen gespeichert, die mit HTTP_ beginnen. Das bedeutet, dass Sie den Save-Data-Header erkennen können, indem Sie die Existenz und den Wert der $_SERVER["HTTP_SAVE_DATA"]-Variable 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 die Prüfung durchführen, 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 anhand dieses Mechanismus einige Beispiele an, 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 besteht darin, dass zwei Bilder bereitgestellt werden: Ein Bild für Standardbildschirme (1x) und ein weiteres Bild, das für Bildschirme mit hoher Auflösung (z.B. Retina-Display). Diese Klasse von Bildschirmen mit hoher Auflösung ist nicht unbedingt auf High-End-Geräte beschränkt und wird immer häufiger verwendet. In Fällen, in denen eine einfachere Anwendung bevorzugt wird, ist es unter Umständen sinnvoll, Bilder mit geringerer Auflösung (1x) anstelle von größeren (2x) Varianten an diese Bildschirme zu senden. Dazu ändern wir bei Vorhandensein des Headers Save-Data 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, wie wenig Aufwand nötig ist, um eine Person zu berücksichtigen, die speziell Sie auffordert, weniger Daten zu senden. Wenn Sie das Markup im Back-End nicht ändern möchten, können Sie dasselbe Ergebnis auch mit einem URL-Überschreibmodul wie mod_rewrite von Apache erzielen. Beispiele dafür, wie sich dies mit relativ wenig Konfiguration erreichen lässt

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 für das Element <html> in Ihrem CSS vornehmen, um zu ändern, wie Bilder bereitgestellt 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.

Nicht wesentliche Bilder weglassen

Einige Bildinhalte im Web sind einfach nicht unverzichtbar. Solche Bilder können zwar nebensächliche Inhalte bieten, sind aber möglicherweise nicht wünschenswert, wenn die kostenpflichtigen Datenpläne optimal ausgeschöpft werden. Im wohl einfachsten Anwendungsfall von Save-Data können wir den PHP-Erkennungscode von vorhin verwenden und nicht unbedingt erforderliches Bild-Markup ganz weglassen:

<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
}

Diese Technik kann sicherlich einen deutlichen Effekt haben, wie in der folgenden Abbildung gezeigt wird:

Vergleich zwischen nicht kritischen Bildern, die geladen werden, wenn Save-Data fehlt, und denselben Bildern, die ausgelassen werden, wenn Save-Data vorhanden ist.

Natürlich ist das Weglassen von Bildern 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 Webschriftarten auslassen

Web-Schriftarten machen normalerweise nicht annähernd so viel der Gesamtnutzlast einer Seite aus wie Bilder, sind aber dennoch sehr beliebt. Sie verbrauchen außerdem keine unerhebliche Datenmenge. Außerdem ist das Abrufen und Rendern von Schriftarten durch den Browser komplizierter, als Sie vielleicht denken. Mit Konzepten wie FOIT, FOUT und Browserheuristik wird das Rendern zu einem nuancierten Vorgang.

In diesem Fall kann es sinnvoll sein, auf weniger wichtige Web-Schriftarten für Nutzer zu verzichten, die sich eine bessere Nutzererfahrung wünschen. Mit Save-Data ist dies relativ einfach.

Ein Beispiel: Sie haben Fira Sans von Google Fonts auf Ihrer Website eingefügt. Fira Sans ist eine hervorragende Schriftart, aber für Nutzende, die Daten speichern wollen, Wenn wir dem <html>-Element eine save-data-Klasse hinzufügen, wenn der Save-Data-Header vorhanden ist, können wir Stile schreiben, die das nicht wesentliche Schriftbild zuerst 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 er zuerst Stile auf das DOM anwendet und dann überprüft, ob HTML-Elemente eine der Ressourcen im Stylesheet aufrufen. Wenn Save-Data aktiviert ist, wird Fira Sans nie geladen, da das DOM mit benutzerdefinierten Stilen diese Aufforderung nie aufruft. Stattdessen wird Arial aktiviert. Es ist nicht so schön wie Fira Sans, aber möglicherweise besser für Nutzer, die ihre Datenpläne ausweiten möchten.

Zusammenfassung

Der Save-Data-Header weist nicht viele Nuancen auf. Er ist entweder aktiviert oder deaktiviert und die Anwendung ist dafür verantwortlich, unabhängig vom Grund die passenden Inhalte basierend auf ihrer Einstellung bereitzustellen.

Einige Nutzer lassen beispielsweise den Datensparmodus nicht zu, wenn sie den Verdacht haben, dass App-Inhalte oder ‐Funktionen verloren gehen, selbst bei schlechter Verbindung. Umgekehrt können einige Nutzer es selbst bei einer guten Verbindung selbstverständlich aktivieren, um die Seiten so klein und einfach wie möglich zu halten. Ihre Anwendung sollte am besten davon ausgehen, dass der Nutzer die vollständige und unbegrenzte Nutzung wünschen, bis Sie durch eine explizite Nutzeraktion klar und deutlich auf etwas anderes hingewiesen werden.

Als Websiteinhaber und Webentwickler sollten wir die Verantwortung für die Verwaltung unserer Inhalte übernehmen, 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.