So erstellen Sie mit den neuesten Web-APIs die beste Benutzererfahrung für jeden Benutzer

Wir bauen das Internet auf Premiumgeräten, schnellen Internetverbindungen und Datenflatrates auf.

Das bedeutet, dass die daraus resultierenden Seiten für uns gut funktionieren, für die meisten unserer Benutzer jedoch nicht. Dies wird ein noch größeres Problem für die nächsten Milliarden Benutzer sein, die sich nur billige Geräte leisten können und hauptsächlich auf Mobilfunkverbindungen angewiesen sind.

Um jedem Benutzer eine gute Erfahrung zu bieten, müssen wir kluge Entscheidungen treffen, basierend auf:

  • Nutzerpreferenzen,
  • die aktuelle Netzwerkverbindung,
  • und die Gerätefunktionen.

Bisher war dies sehr schwer zu tun. Dank der Veröffentlichung neuer Web-APIs könnte sich dies jedoch in naher Zukunft ändern. In diesem Artikel werde ich diese neuen APIs untersuchen und meine Best Practices mit Ihnen teilen.

Benutzerpräferenzen - Respektieren Sie den Benutzer

Wäre es nicht großartig, vom Benutzer Hinweise zu erhalten, was er oder sie bevorzugt? Mit den neuen HTTP Client Hints ist dies endlich möglich.

In Google Chrome und Opera können die Benutzer bereits den Datenspeichermodus aktivieren. Dies ist eine großartige Möglichkeit für Benutzer zu sagen: Verschwenden Sie meine Daten nicht.

Es gibt gute Gründe für Benutzer, Daten zu speichern:

  • Teure Pre / Post-Paid-Datenpläne, die in vielen Ländern Standard sind. Weitere Informationen finden Sie unter: Was kostet meine Website?
  • Eine Daten-Flatrate, die nach Erreichen eines Limits gedrosselt wird
  • Eine sehr langsame Internetverbindung

Die Benutzerhinweise werden als HTTP-Anforderungsheader hinzugefügt und sind auch über eine JavaScript-API (navigator.connection.saveData) verfügbar.

Daten-Header speichern

Die meisten Projekte, an denen ich arbeite, verwenden aggressive Caching-Strategien. Mit dem Header "Daten speichern" können Sie eine vorgerenderte Version Ihrer Seite mit Daten speichern. Dies ist mein bevorzugter Ansatz:

// standardmäßig false
$ saveData = false;

// Überprüfen Sie, ob der Header `Save-Data` existiert und auf den Wert" on "gesetzt ist.
if (isset ($ _ SERVER ["HTTP_SAVE_DATA"]) && strtolower ($ _ SERVER ["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` erkannt!
  $ saveData = true;
}

Daten speichern Javascript API

Sie können die Javascript-API auch verwenden, um Entscheidungen auf dem Client zu treffen, falls erforderlich:

if ("Verbindung" im Navigator) {
    if (navigator.connection.saveData === true) {
        // Implementiere hier Datensicherungsoperationen.
    }
}

Best Practices für das Speichern von Daten:

  • Ressourcen für "langsames Laden", die sich außerhalb des Ansichtsfensters befinden. Nutzen Sie dazu den neuen intersectionObserver.
  • Laden Sie keine Web-Schriftarten.
  • Laden Sie nicht alle Bilder, die zum Verständnis des Inhalts nicht erforderlich sind.
  • Verwenden Sie sehr stark komprimierte Bilder.
  • Laden Sie keine Bilder mit hoher Auflösung (Retina).
  • Verwenden Sie progressive Offenlegung: Rendern Sie weniger Inhalte mit der Möglichkeit, mehr zu laden, wenn der Benutzer aktiv danach fragt.
  • Laden Sie reine Textanzeigen.
  • Laden Sie keine Dienste von Drittanbietern, die nicht wirklich erforderlich sind.
  • Seien Sie sehr vorsichtig, wenn Sie Daten mithilfe von Servicemitarbeitern vorab abrufen.
  • Machen Sie den Benutzer darauf aufmerksam, dass eine "Daten speichern" -Version der Seite angezeigt wird. Bieten Sie einen Knopf an, um zur vollen Erfahrung zu wechseln.

Im Falle eines Konflikts zwischen Best Practices (zum Beispiel: Vermeiden Sie verzögertes Laden einer Mobilfunkverbindung) würde ich immer Ansätze priorisieren, die Daten speichern.

Respektieren Sie den Benutzer: Legen Sie immer die höchste Priorität für die Benutzerpräferenzen fest.

Browser-Unterstützung

Im Juni 2018 wird dies von Google Chrome (ab Version 46) und Opera (ab Version 33) unterstützt. Informationen zum Speichern von Daten finden Sie in der aktuellen Browserunterstützung.

Mehr Ressourcen

  • Weitere Ideen und Codebeispiele finden Sie in den Grundlagen für Google-Entwickler zu Sicherungsdaten.
  • Weitere Informationen zu anderen unterstützten Client-Hinweisen finden Sie im HTTP-Client-Hinweisentwurf.

Netzwerk - schnell laden

Der Netzwerktyp, die Latenz und die Bandbreite haben großen Einfluss auf die Benutzererfahrung. Leider sind sie auf zuverlässige Weise schwer zu erkennen.

Mit der neuen Netzwerkinformations-API kann sich dies jedoch bald ändern.

Der Netzwerktyp

Um kluge Entscheidungen treffen zu können, ist es wichtig, den aktuellen Netzwerktyp (Ethernet, WLAN und Mobilfunk) zu kennen.

Ilya Grigorik hat in seinem Buch „High Performance Browser Networking“, das ich sehr empfehle, die Unterschiede zwischen den Netzwerktypen großartig erklärt.

Ich möchte mich hier auf die Mobilfunkverbindungen konzentrieren, da diese hinsichtlich Latenz und Bandbreite die größten Herausforderungen darstellen.

Quelle: Ilya Grigorik, Hochleistungs-Browser-Netzwerk

Mobilfunkverbindungen werden vom Radio Resource Controller verwaltet, der Teil des Mobilfunknetzes ist. Um möglichst viele Benutzer bedienen zu können, wird versucht, die Verbindungszeiten für jeden Benutzer zu minimieren. Dies geschieht, indem die Geräte so schnell wie möglich in den Ruhezustand versetzt werden. Da die Mobilfunkgeräte der zweitgrößte Stromverbraucher sind, hilft dies auch, Akkustrom zu sparen, was gut ist.

Mit der Netzwerkinformations-API können wir den Verbindungstyp überprüfen.

// Den Verbindungstyp abrufen.
var type = navigator.connection.type;
// Ergebnis: 'bluetooth', 'handy', 'ethernet', 'none',
'wifi', 'wimax', 'other', 'unknown'

Effektiver Typ

Der Netzwerktyp allein sagt nicht viel über die Netzwerklatenz und Bandbreite aus. Wenn Sie jemals das WLAN in einem Hotel oder in einem Zug genutzt haben, wissen Sie, wovon ich spreche.

Der effektive Typ gibt an, wie schnell die aktuelle Verbindung ist. Es verwendet die Werte "slow-2g", "2g", "3g" oder "4g", um die aktuelle Geschwindigkeit zu beschreiben. Wenn das Ergebnis "slow-2g" ist, bedeutet dies nicht, dass der Netzwerktyp 2g ist, sondern dass sich das Netzwerk unter Berücksichtigung der Latenz und der Bandbreite wie ein langsames 2g-Netzwerk verhält.

// Den Verbindungstyp abrufen.
var type = navigator.connection.effectiveType;
// Ergebnis: 'slow-2g', '2g', '3g' oder '4g'

Veränderungen beobachten

Netzwerkverbindungen können sich leicht ändern. Um sich anpassen zu können, müssen Sie sich der Änderungen bewusst sein. Hier bietet sich die Eigenschaft onchange an.

// Für Ereignisänderungen registrieren.
navigator.connection.onchange = changeHandler;

Empfohlene Vorgehensweise

Wenn der Verbindungstyp Mobilfunk ist, schlage ich vor, diese bewährten Methoden zu befolgen:

Laden Sie so viel wie möglich und gehen Sie in den Leerlauf (Warnung: Verwenden Sie keine dieser bewährten Methoden, wenn der Header "save-data" festgelegt ist):

  • Vermeiden Sie träge Ladetechniken. In 3G-Netzen kann es bis zu 3,5 Sekunden dauern, bis eine neue Verbindung hergestellt ist, wodurch der Benutzer zu lange warten würde. Darüber hinaus würden wir Batteriestrom verschwenden, indem wir das Radio ständig aufwecken.
  • Verwenden Sie Servicemitarbeiter, um Inhalte vorab zu laden, die höchstwahrscheinlich bald verwendet werden.
  • Sagen Sie voraus, was der Benutzer als Nächstes tut, und laden Sie die Seite im Hintergrund vor. Dies kann die nächste Seite eines mehrstufigen Prozesses sein.
  • Auf Geräten, die Zeiger unterstützen, können Sie anhand der Mausbewegungen vorhersagen, welcher Link als Nächstes angeklickt wird, und die nächste Seite vorrendern. Schauen Sie sich die Futurelink-Bibliothek an.

Sammeln Sie Benutzerdaten und senden Sie diese über die Beacon-API:

  • Sammeln Sie Benutzerdaten und senden Sie sie mit der Beacon-API, die bereits gut unterstützt wird, an den Server. Dies verhindert, dass der Client ständig neue Verbindungen zum Server herstellt, wodurch der Akku entladen werden kann. Stellen Sie sicher, dass auch Tools von Drittanbietern diese bewährten Methoden befolgen.

Wenn das aktuelle Netzwerk sehr langsam ist (slow-2g oder 2g), sollten Sie die Best Practices befolgen, die wir bereits im Abschnitt zum Speichern von Daten besprochen haben.

Browser-Unterstützung

Zum Zeitpunkt des Schreibens ist die Netzwerkinformations-API noch experimentell und wird nicht gut unterstützt. Informieren Sie sich über die aktuelle Browserunterstützung für die Netzwerkinformations-API.

Testen Sie Ihre Websites und Apps ständig auf langsamen Verbindungen.

Gerät - läuft reibungslos

Wenn es um Geräte geht, müssen wir zwei Trends berücksichtigen:

  • Premium-Geräte werden mit jeder Iteration immer leistungsfähiger (~ 1.000 US-Dollar).
  • Günstige Geräte mit einem stabilen Funktionsumfang werden mit jeder Iteration günstiger (~ 30 USD). Die nächsten Milliarden Internetnutzer werden beitreten, weil sie sich endlich ein Gerät leisten können.

Die Lücke zwischen Premium- und Billiggeräten wird mit jeder Iteration größer. Dies könnte die nächste große Herausforderung für Webentwickler werden.

Chrome Developer Tools-Vergleich derselben Seite auf verschiedenen Geräten: Das Skripten und Rendern dauert auf weniger leistungsstarken Geräten erheblich länger.

Wie erkennt man die Gerätefähigkeit?

Die Methode „Den Senf abschneiden“ wird häufig verwendet, um zu entscheiden, ob eine Website einfach oder vollständig geladen werden soll. Dies erfolgt einfach durch Überprüfen, ob der Browser Funktionen unterstützt, die nur von modernen Browsern unterstützt werden.

Da moderne Browser jedoch auch auf langsamen Geräten ausgeführt werden können, ist die Methode „Cut the Mustard“ alles andere als perfekt.

Ein besserer Ansatz könnte darin bestehen, den Gerätespeicher und die HardwareWährung zu überprüfen:

// Den Verbindungstyp abrufen.
var type = navigator.hardwareConcurrency;

Die HardwareWährung ist die Anzahl der logischen Prozessoren, die dem Benutzeragenten möglicherweise zur Verfügung stehen.

// Den Verbindungstyp abrufen.
var type = navigator.deviceMemory;

Der DeviceMemory gibt zurück, wie viel RAM das Gerät in Gigabyte hat, abgerundet auf die nächste Potenz von zwei. Die API bietet auch einen Client-Hinweis-Header.

Batteriestatus

Der Batteriestatus eines Geräts kann auch die Benutzererfahrung beeinflussen. Um den Akku zu schonen, können die Best Practices für das Speichern von Daten angewendet werden. Außerdem würde ich alle Animationen vermeiden.

Der Batteriestatus kann über die Batteriestatus-API abgerufen werden. Warnung: Die Batteriestatus-API wird aus Datenschutzgründen von Webkit und Firefox nicht mehr unterstützt.

Best Practices für langsame Geräte

  • Das Parsen und Ausführen von Javascript dauert auf alten Geräten viel länger. Laden Sie und führen Sie Javascript nur für das aus, was aktuell auf der Seite benötigt wird.
  • Seien Sie vorsichtig mit Animationen. Auf langsamen Geräten werden sie oft nervös, und es ist möglicherweise besser, sie nicht zu zeigen.
  • Für Geräte mit wenig Arbeitsspeicher kann es zu einer Herausforderung werden, große Bilder (z. B. Bild-Sprites) und Web-Schriftarten zu verarbeiten.
  • Holen Sie sich ein günstiges Android-Gerät (unter 200 US-Dollar), um Ihre App oder Website zu testen. Das zweitbeste, was Sie tun können, ist die CPU mit Chrome Dev Tools zu drosseln.

Es gibt andere großartige APIs (requestAnimationFrame, requestIdleCallback, Web Worker), mit denen Sie steuern können, wann und wo Ihr Javascript-Code ausgeführt wird.

Browser-Unterstützung

Folgen Sie den Links, um die aktuelle Browserunterstützung der APIs anzuzeigen:

  • hardwareConcurrency
  • Batteriestatus-API
  • requestAnimationFrame
  • requestIdleCallback
  • deviceMemory (wird auf caniuse.com nicht unterstützt)
Testen Sie Ihre Websites und Apps ständig auf alten und günstigen Geräten.

Fazit

Ich hoffe, Sie sind genauso begeistert wie ich von diesen neuen Möglichkeiten, jedem Benutzer ein großartiges Benutzererlebnis zu bieten.

Ich lade Sie ein, diese neuen Möglichkeiten in Ihrem Projektteam zu diskutieren und Ihre Ideen in den Kommentaren mitzuteilen.

Eine weitere großartige Möglichkeit zur Verbesserung der Benutzererfahrung besteht darin, mehr über die wahrgenommene Leistung zu erfahren. In meinem Artikel zu Web Performance Resources finden Sie nützliche Ressourcen.

Tipp: Die Daten, die wir aus den neuen APIs erhalten, sollten an die Analytics- oder RUM-Datentools zurückgemeldet werden, um tiefere Einblicke zu erhalten, wie Netzwerk- und Gerätefunktionen das Benutzerverhalten beeinflussen.

Update 08/2018: Ich empfehle, den großartigen Artikel über die Netzwerkinformations-API von Dean Hume zu lesen. Es ist eine großartige Ressource, wenn Sie es ausprobieren möchten.

Quellen

  • Bauen für Milliarden, Tal Oppenheimer, 06/2016
  • Hochleistungs-Browser-Netzwerk, Ilya Grigorik
  • Schnelle und belastbare Web-Apps, Ilya Grikorig, 2016
  • Google Developer Fundamentals: Daten speichern
  • W3C: Entwurf von HTTP-Client-Hinweisen
  • W3C: Beacon API
  • Futurelink
  • W3C: Netzwerkinformations-API
  • W3C: Batteriestatus-API
  • Verwendung von requestIdleCallback
  • Optimieren Sie die Javascript-Ausführung

Dieser Artikel basiert auf einem Konferenzvortrag, den ich am 03/2018 in Barcelona auf dem Netcentric Summit 2018 gehalten habe.