Wir zeigen Ihnen, wie Sie Ihre Websites für bestimmte Hardware- und Netzwerkeinschränkungen optimieren können, damit alle Nutzer:innen das bestmögliche Erlebnis bieten können.
Gerätefunktionen und Netzwerkverbindungen variieren stark. Websites, die für Nutzer von High-End-Geräten interessant sind, sind auf Low-End-Geräten meist unbrauchbar. Websites, die in schnellen Netzwerken reibungslos geladen werden, können in langsamen Netzwerken zum Erliegen kommen. Da Websites oft langsam sind, funktioniert die Entwicklung von Einheitslösungen möglicherweise nicht immer.
In ihrem Vortrag zum Chrome Dev Summit suchen Addy Osmani von Google und Nate Schloss von Facebook auf einer Lösung für dieses Problem – ein Muster für die Bereitstellung von Seiten, die einer Vielzahl von Nutzereinschränkungen besser entsprechen. Diese Funktion wird als adaptives Laden bezeichnet.
Was ist adaptives Laden?
Beim adaptiven Laden werden verschiedenen Nutzern je nach Netzwerk- und Hardwareeinschränkungen unterschiedliche Funktionen geboten, insbesondere:
Eine schnelle Hauptfunktion für alle Nutzer (auch Low-End-Geräte)
Schrittweises Hinzufügen von ausschließlich High-End-Funktionen, sofern das Netzwerk und die Hardware des Nutzers dies unterstützen
Durch die Optimierung im Hinblick auf bestimmte Hardware- und Netzwerkeinschränkungen sorgen Sie dafür, dass alle Nutzer die bestmögliche Nutzung auf ihrem Gerät erhalten. Das Anpassen der Nutzererfahrung an die Einschränkungen der Nutzenden kann Folgendes umfassen:
Bereitstellung von Bildern und Videos mit geringer Qualität in langsamen Netzwerken
Die Framerate von Animationen auf Low-End-Geräten drosseln
Vermeiden rechenintensiver Vorgänge auf Low-End-Geräten
Drittanbieter-Scripts werden auf langsameren Geräten blockiert.
Nicht kritisches JavaScript für Interaktivität wird nur auf schnellen CPUs geladen.
Browserunterstützung und adaptives Laden implementieren
Die Signale, die Sie für das adaptive Laden verwenden können, sind unten aufgeführt. Für jedes Signal wird auch eine Browserunterstützung bereitgestellt:
Navigator.deviceMemory
Die Eigenschaft navigator.deviceMemory wird verwendet, um den Arbeitsspeicherverbrauch auf Low-End-Geräten zu reduzieren.
Navigator.hardwareConcurrency
Das Attribut navigator.hardwareConcurrency gibt die Anzahl der CPU-Kerne an. Er wird verwendet, um die kostspielige JavaScript-Ausführung zu begrenzen und um CPU-intensive Logik zu reduzieren, wenn ein Gerät diese nicht gut verarbeiten kann.
NetworkInformation.effectiveType
Mit dem Attribut navigator.connection.effectiveType wird die Datenübertragung optimiert, um weniger Bandbreite in Anspruch zu nehmen.
NetworkInformation.saveData
Die Property navigator.connection.saveData wird verwendet, um die Datenspareinstellungen des Nutzers zu nutzen.
Es gibt zwei Stellen, an denen Sie entscheiden können, was Nutzern bereitgestellt werden soll: dem Client und dem Server. Auf dem Client haben Sie die oben genannten JavaScript APIs. Auf dem Server können Sie mithilfe von Client-Hinweisen einen Einblick in die Gerätefunktionen des Nutzers und das Netzwerk, mit dem er verbunden ist, erhalten.
Adaptives Laden in React
React Adaptive Loading Hooks & Utilities ist eine Suite für die React-Umgebung, mit der Sie Ihre Websites einfacher an Low-End-Geräte anpassen können. Er enthält:
Der
useNetworkStatus()-Hook zur Anpassung anhand des Netzwerkstatus (slow-2g,2g,3goder4g).Der
useSaveData()-Hook zur Anpassung gemäß den Datenspareinstellungen des Nutzers.Den
useHardwareConcurrency()-Hook für die Anpassung basierend auf der Anzahl der logischen CPU-Prozessorkerne auf dem Gerät des Nutzers.Den
useMemoryStatus()-Hook für die Anpassung basierend auf dem Gerätespeicher (RAM) des Nutzers.
Für jeden Hook ist ein optionales Argument zum Festlegen des Anfangswerts zulässig. Diese Option ist in zwei Szenarien nützlich: wenn der Browser des Nutzers die entsprechende API nicht unterstützt, und für das serverseitige Rendering, bei dem Sie die Client-Hinweisdaten verwenden können, um den Anfangswert auf dem Server festzulegen. Der Hook useNetworkStatus() kann beispielsweise den vom Clienthinweis übergebenen Anfangswert für das serverseitige Rendering verwenden und sich selbst aktualisieren, wenn er auf dem Client ausgeführt wird, wenn sich der effektive Typ des Netzwerks ändert.
Die adaptiven Lade-Hooks und Dienstprogramme von React werden mithilfe von Webplattform-APIs implementiert (Netzwerkinformationen, Gerätespeicher und Gleichzeitigkeit der Hardware). Sie können dieselben APIs verwenden, um Konzepte für adaptives Laden auf andere Frameworks und Bibliotheken wie Angular, Vue und andere anzuwenden.
Adaptives Laden in Aktion
In diesem Abschnitt werden Demos zur Verwendung von adaptivem Laden und Beispiele aus der Praxis von Websites wie Facebook, eBay und Tinder erläutert.
In der Demo zu React Movie wird gezeigt, wie Sie die Medienbereitstellung an den Netzwerkstatus anpassen können. Es handelt sich um eine App zum Durchsuchen von Filmen, in der Poster, Zusammenfassungen und Cast-Listen angezeigt werden. Je nach effektivem Verbindungstyp des Nutzers werden bei schnellen Verbindungen qualitativ hochwertige und bei langsamen Postern von geringer Qualität angezeigt.
Twitter bietet den Datensparmodus, mit dem die genutzte Datenmenge reduziert werden kann. In diesem Modus werden Vorschaubilder mit niedriger Auflösung geladen. Große Bilder werden nur dann geladen, wenn Sie auf die Vorschau tippen. Mit dieser Option konnten Nutzer unter iOS und Android 50% an der Datennutzung aus Bildern und Nutzer im Web 80 % sparen. Hier finden Sie eine React-Demo, in der mit dem Hook „Daten speichern“ die Twitter-Zeitachse repliziert wird. Öffnen Sie in den Entwicklertools den Bereich Netzwerk und sehen Sie sich die Unterschiede bei der übertragenen Datenmenge an, wenn Sie scrollen, während „Daten speichern“ deaktiviert und aktiviert ist.
eBay aktiviert bedingt Funktionen wie Zoomen, wenn die Hardware oder Netzwerkbedingungen eines Nutzers sie nicht gut unterstützen. Dies erreichen Sie durch adaptive Codeaufteilung und das Laden von Code – eine Möglichkeit, mehr interaktive Komponenten bedingt zu laden oder rechenintensive Vorgänge auf High-End-Geräten auszuführen, ohne die Skripts an Nutzer auf langsameren Geräten zu senden. Sieh dir das Video bei 16 Minuten an, in dem Addy dieses mit React.lazy() und Suspense implementierte Muster auf einer eBay-Demo-Produktseite zeigt.
Tinder verwendet verschiedene adaptive Lademuster im Web und in der Lite-App, damit alle Nutzer schnell reagieren können. Wenn sich ein Nutzer in einem langsamen Netzwerk befindet oder den Datensparmodus aktiviert hat, deaktiviert er die automatische Wiedergabe von Videos, begrenzt den Routen-Vorabruf und begrenzt das Laden des nächsten Bildes im Karussell so, dass Bilder nacheinander beim Wischen geladen werden. Nach der Umsetzung dieser Optimierungen hat sich die durchschnittliche Anzahl der Wischbewegungen in Ländern wie Indonesien deutlich verbessert.
Adaptives Laden bei Facebook
Ein Problem beim adaptiven Laden ist das Gruppieren von Geräten in High-End- und Low-End-Klassen anhand der verfügbaren Signale. Auf Mobilgeräten stellt der String User-Agent (UA) den Gerätenamen bereit. Facebook kann dadurch öffentlich verfügbare Daten zu Geräteeigenschaften verwenden, um Mobilgeräte in Klassen zu gruppieren. Auf Desktop-Geräten stellt UA jedoch nur das Betriebssystem des Geräts zur Verfügung.
Zum Gruppieren von Desktop-Geräten protokolliert Facebook die Daten zum Betriebssystem, zu den CPU-Kernen (aus navigator.hardwareConcurrency) und zum RAM-Speicher (navigator.deviceMemory) in der Leistungsüberwachung. In Bezug auf die Beziehungen zwischen verschiedenen Hardwaretypen und zur Leistung wurden die Geräte in fünf Kategorien eingeteilt. Durch die in das Leistungsmonitoring eingebundenen Hardwareklassen erhalten sie ein umfassenderes Bild davon, wie Nutzer Facebook-Produkte je nach Gerät verwenden, und können Regressionen einfacher erkennen.
Im Video 24 Minuten erfahren Sie, wie Facebook bei Facebook den Ansatz der Gerätegruppierung und das adaptive Laden für Animationen und das Laden von JavaScript nutzt.
Weitere Informationen zum adaptiven Laden
Beim adaptiven Laden geht es darum, bei der Gestaltung Ihrer Websites auf Inklusion zu achten. Schaffen Sie eine zentrale Umgebung, die für alle gut funktioniert, und aktivieren Sie dann die Funktionen, die es noch besser machen, wenn ein Nutzer über genügend Arbeitsspeicher, CPU oder ein schnelles Netzwerk verfügt. Weitere Informationen zum adaptiven Laden findest du in den verfügbaren Demos und im Chrome Dev Summit Vortrag: