Adaptives Laden: Webleistung auf langsamen Geräten verbessern

Hier erfahren Sie, wie Sie Ihre Websites für bestimmte Hardware- und Netzwerkeinschränkungen optimieren, um jedem Nutzer die bestmögliche Erfahrung zu bieten.

Die Gerätefunktionen und Netzwerkverbindungen variieren stark. Websites, die Nutzer auf High-End-Geräten begeistern, können auf Low-End-Geräten unbrauchbar sein. Websites, die in schnellen Netzwerken reibungslos geladen werden, können in langsamen Netzwerken zum Erliegen kommen. Jede Website kann langsam sein. Daher funktioniert es nicht immer, Lösungen zu entwickeln, die für alle Nutzer geeignet sind.

In ihrem Vortrag auf dem Chrome Dev Summit stellen Addy Osmani von Google und Nate Schloss von Facebook eine Lösung für dieses Problem vor: ein Muster für die Bereitstellung von Seiten, die besser auf eine Vielzahl von Nutzereinschränkungen eingehen. Diese Funktion wird als adaptives Laden bezeichnet.

Was ist adaptives Laden?

Beim adaptiven Laden werden Nutzern je nach Netzwerk- und Hardwareeinschränkungen unterschiedliche Inhalte präsentiert. Dazu gehören:

• Eine schnelle Kernfunktion für alle Nutzer (einschließlich Low-End-Geräten).

• Nach und nach werden nur für High-End-Geräte verfügbare Funktionen hinzugefügt, wenn das Netzwerk und die Hardware des Nutzers dies unterstützen.

Durch eine Optimierung im Hinblick auf bestimmte Hardware- und Netzwerkeinschränkungen ermöglichen Sie es allen Nutzern, ihr Gerät optimal zu nutzen. Die Anpassung an die Einschränkungen der Nutzer kann Folgendes umfassen:

• Bereitstellung von Bildern und Videos in niedriger Qualität in langsamen Netzwerken

• Die Framerate von Animationen auf Low-End-Geräten wird gedrosselt.

• Vermeidung von rechenintensiven Vorgängen 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

Die Signale, die Sie für adaptives Laden verwenden können, sind unten aufgeführt. Für jedes Signal ist auch Browsersupport enthalten:

Navigator.deviceMemory

Das Attribut navigator.deviceMemory wird verwendet, um den Arbeitsspeicherverbrauch auf Low-End-Geräten zu reduzieren.

Navigator.hardwareConcurrency

Das Attribut navigator.hardwareConcurrency ist die Anzahl der CPU-Kerne. Sie wird verwendet, um die kostenintensive JavaScript-Ausführung zu begrenzen und CPU-intensive Logik zu reduzieren, wenn ein Gerät sie nicht gut verarbeiten kann.

NetworkInformation.effectiveType

Mit der Property navigator.connection.effectiveType können Sie die Datenübertragung so optimieren, dass weniger Bandbreite verwendet wird.

NetworkInformation.saveData

Mit dem Attribut navigator.connection.saveData werden die Einstellungen für den Datensparmodus des Nutzers berücksichtigt.

Es gibt zwei Stellen, an denen Sie entscheiden können, was für Nutzer bereitgestellt werden soll: den Client und den Server. Auf dem Client sind die oben genannten JavaScript APIs verfügbar. Auf dem Server kannst du Clienthinweise verwenden, um Informationen zu den Gerätefunktionen des Nutzers und zum Netzwerk zu erhalten, mit dem er verbunden ist.

Adaptives Laden in React

React Adaptive Load Hooks &Utilities ist eine Suite für die React-Umgebung, mit der du deine Websites einfacher an Low-End-Geräte anpassen kannst. Dazu gehören:

• Der useNetworkStatus()-Hook für die Anpassung anhand des Netzwerkstatus (slow-2g, 2g, 3g oder 4g).

• Der useSaveData()-Hook zur Anpassung an die Einstellungen für den Datensparmodus des Nutzers.

• Der Hook useHardwareConcurrency() für die Anpassung anhand der Anzahl der logischen CPU-Prozessorkerne auf dem Gerät des Nutzers.

• Der useMemoryStatus()-Hook zur Anpassung an den Gerätespeicher (RAM) des Nutzers.

Jeder Hook akzeptiert ein optionales Argument zum Festlegen des Anfangswerts. Diese Option ist in zwei Fällen nützlich: Wenn der Browser des Nutzers die entsprechende API nicht unterstützt und beim serverseitigen Rendering, bei dem Sie mithilfe der Client-Hinweisdaten den Anfangswert auf dem Server festlegen können. Der Hook useNetworkStatus() kann beispielsweise den vom Clienthinweis übergebenen Anfangswert für das serverseitige Rendering verwenden und sich selbst aktualisieren, wenn sich der effektive Typ des Netzwerks ändert.

Adaptive Lade-Hooks und ‐Dienstprogramme von React werden mithilfe von Webplattform-APIs implementiert (Netzwerkinformationen, Gerätespeicher und Gleichzeitigkeit der Hardware). Mit denselben APIs können Sie Konzepte für das adaptive Laden auch auf andere Frameworks und Bibliotheken wie Angular und Vue anwenden.

Adaptives Laden in Aktion

In diesem Abschnitt wird gezeigt, wie Sie adaptives Laden und Beispiele aus der Praxis von Websites wie Facebook, eBay oder Tinder nutzen können.

In der Demo React wird gezeigt, wie das Bereitstellen von Medien basierend auf dem Netzwerkstatus angepasst werden kann. Es ist eine Anwendung zum Durchsuchen von Filmen, die Poster, Zusammenfassungen und Cast-Listen enthält. Je nach dem effektiven Verbindungstyp des Nutzers werden bei schnellen Verbindungen hochwertige Poster und bei langsamen Verbindungen minderwertige Poster ausgeliefert.

Twitter hat einen Modus zur Dateneinsparung, mit dem die Datennutzung reduziert werden kann. In diesem Modus werden Vorschaubilder in niedriger Auflösung und große Bilder nur geladen, wenn Sie auf die Vorschau tippen. Wenn diese Option aktiviert war, sparen iOS- und Android-Nutzer 50% der Datennutzung durch Bilder und Nutzer im Web 80%. Hier ist eine React-Demo, in der der Save Data-Hook verwendet wird, um die Twitter-Zeitachse zu replizieren. Öffnen Sie den Bereich Netzwerk in den DevTools und sehen Sie sich die Differenz bei der übertragenen Datenmenge an, während Sie scrollen, wenn die Funktion „Daten sparen“ deaktiviert ist, und wenn sie aktiviert ist.

eBay aktiviert und deaktiviert Funktionen wie das Zoomen bedingt, wenn die Hardware oder die Netzwerkbedingungen eines Nutzers diese Funktionen nicht gut unterstützen. Das ist durch adaptives Code-Splitting und Code-Laden möglich. So können Sie bedingt interaktivere Komponenten laden oder rechenintensivere Vorgänge auf High-End-Geräten ausführen, ohne diese Scripts an Nutzer auf langsameren Geräten zu senden. Sehen Sie sich das Video ab 16 Minuten an. Dort zeigt Addy, wie dieses Muster mit React.lazy() und Suspense auf einer Demo-eBay-Produktseite implementiert wird.

Tinder verwendet eine Reihe von adaptiven Lademustern im Web und in der Lite-App, um die Geschwindigkeit für alle Nutzer zu optimieren. Wenn sich ein Nutzer in einem langsamen Netzwerk befindet oder die Datenkomprimierung aktiviert ist, wird die automatische Videowiedergabe deaktiviert, der Routen-Vorabruf wird eingeschränkt und das Laden des nächsten Bildes im Karussell wird so eingeschränkt, dass nur Bilder nacheinander geladen werden, wenn Nutzer wischen. 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 die Gruppierung von Geräten in High-End- und Low-End-Klassen basierend auf verfügbaren Signalen. Auf Mobilgeräten stellt der User-Agent-String (UA) den Gerätenamen bereit. Dadurch kann Facebook öffentlich verfügbare Daten zu Geräteeigenschaften verwenden, um Mobilgeräte in Klassen zu gruppieren. Auf Desktop-Geräten ist jedoch nur das Betriebssystem die einzige relevante Information, die UA liefert.

Für die Gruppierung von Desktop-Geräten protokolliert Facebook die Daten zum Betriebssystem, zu den CPU-Kernen (ab navigator.hardwareConcurrency) und zum RAM-Speicher (navigator.deviceMemory) im Rahmen der Leistungsüberwachung. Anhand der Beziehungen zwischen verschiedenen Hardwaretypen und der Leistung wurden die Geräte in fünf Kategorien unterteilt. Durch die Einbindung von Hardwareklassen in die Leistungsüberwachung erhalten sie ein umfassenderes Bild davon, wie Nutzer Facebook-Produkte je nach Gerät verwenden, und können Rückschritte leichter erkennen.

Sehen Sie sich das Video bei 24 Minuten an, in dem Nate erklärt, wie Facebook die Gerätegruppierung angeht und adaptives Laden für Animationen und das Laden von JavaScript verwendet.

Weitere Informationen zum adaptiven Laden

Beim adaptiven Laden geht es darum, Ihre Websites so zu gestalten, dass sie für alle Nutzer barrierefrei sind. Erstellen Sie eine grundlegende Funktion, die für alle funktioniert, und schalten Sie dann Funktionen ein oder überlagern Sie sie, die die Funktion noch besser machen, wenn ein Nutzer genügend Arbeitsspeicher, CPU oder ein schnelles Netzwerk hat. Weitere Informationen zum adaptiven Laden finden Sie in den verfügbaren Demos und in der Präsentation vom Chrome Dev Summit: