Diese Seite wurde von der Cloud Translation API übersetzt.

Schnelle und einfache Anwendungen mit Save-Data bereitstellen

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

Weblight-Statistiken

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. — Die Erweiterung „Datenkomprimierung“ in der Chrome-Desktop-App aktivieren

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.
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-Liste Vary: Save-Data hinzu, um vorgelagerte Caches, dass sie diese Version nur dann zwischenspeichern und bereitstellen sollten, Der Anfrageheader Save-Data ist vorhanden. Weitere Informationen finden Sie in den Best Practices. für Interaktion mit Caches.
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 des navigator.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 wenn Save-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 von Save-Data mit dem Device-Memory-Clienthinweis zur weiteren Anpassung an Nutzer auf Geräte mit begrenztem Speicher. Der Arbeitsspeicher des Nutzergeräts wird ebenfalls in der navigator.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:

Vergleich nicht kritischer Bilder
die geladen werden, wenn Save-Data fehlt, und dieselben Bilder ausgelassen werden.
wenn „Save Data“ vorhanden ist. — Vergleich von nicht kritischen Bildern, die geladen werden, wenn „Save-Data“ aktiviert ist und dieselben Bilder weggelassen werden, wenn Save-Data verwendet wird, präsent sind.

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.