Schnelles Laden von Seiten auf den einfachsten günstigen Handys

Die im Titel genannten Telefone werden auf Englisch "Feature Phone" genannt. Sie unterscheiden sich in äußerst bescheidenen Fähigkeiten. Darüber hinaus sind sie sehr erschwinglich, da sie etwa 20 bis 25 US-Dollar kosten. Sie können mit Lite-Versionen moderner Smartphones verglichen werden. Mit diesen Telefonen können Hunderte Millionen Menschen aus Entwicklungsländern auf Webressourcen zugreifen.


Jio Phone

Wenn die Website auf Technologien basiert, die darauf abzielen, eine hohe Arbeitsgeschwindigkeit zu gewährleisten, werden alle davon profitieren - sowohl die Besitzer einfacher billiger Telefone als auch diejenigen, die Webseiten von frischen leistungsstarken Smartphones aus betrachten.

Situationsübersicht

Die Geräte, über die wir sprechen, sind kostengünstig. Daher haben sie eher schwache Hardware-Fähigkeiten. Sie verwenden also langsame CPUs (zum Beispiel kann der Prozessor eines billigen Telefons sechsmal langsamer sein als der Prozessor eines Top-Smartphones). Sie installieren nur sehr wenig RAM (möglicherweise in der Größenordnung von 256 bis 512 MB, normalerweise weniger als 4 GB). Gleiches gilt für den internen Speicher zum Speichern von Daten, der in der Regel 4 GB nicht überschreitet. Solche Telefone haben oft keine Touchscreens. Stattdessen verfügen sie über Tastaturen und einfache Joysticks für Navigationszwecke. Das cdpv zeigt, wie ein ähnliches Telefon aussehen könnte.

Diese Telefone können JavaScript-Code nicht so schnell ausführen wie fortgeschrittene Smartphones. Es fällt ihnen schwer, Websites anzuzeigen, die große Mengen an Mediendaten enthalten. Wenn Sie also Seiten vorbereiten, die auf solchen Telefonen gut funktionieren, müssen Sie sich verantwortungsbewusst dem Problem des Füllens dieser Seiten nähern.


Top 10 der modernen Smartphones: Prozessorleistung (erstes Halbjahr 2019)

Oben sind die Ergebnisse einer Leistungsstudie der 10 meistverkauften Smartphones im Jahr 2019 aufgeführt. Diese Studie wurde mit dem Benchmark Geekbench 4 durchgeführt. Hier sehen Sie im oberen Teil die Testergebnisse des beliebten günstigen Handys - Nokia 3110.

Der JavaScript-Inhalt der Seiten wird hauptsächlich im Single-Core-Modus ausgeführt (hier sollte beachtet werden, dass der JS-Code von Natur aus viel mehr "single-threaded" ist als der Rest des Webinhalts), daher ist die JavaScript-Leistung an die Prozessorleistung gebunden . Wenn Sie über Webprojekte für Entwicklungsländer nachdenken, sollten Sie sich daher die Merkmale der dort verwendeten Geräte merken.

Dieses Material zielt darauf ab, das Problem der Entwicklung von Sites für langsame Geräte zu lösen. Durch die Anwendung der darin beschriebenen Techniken können Sie Websites erstellen, die für alle Benutzer geeignet sind - unabhängig davon, wie hoch die Leistung ihrer Telefone ist.

Allgemeine Informationen

Vielleicht erinnern Sie sich daran, vielleicht auch nicht, aber die Telefone, die wir als Feature-Telefone bezeichnen, waren bis Mitte der 2000er Jahre, vor dem Aufkommen und der weit verbreiteten Nutzung von Smartphones, beliebt. Dies waren kompakte Geräte mit einer Tastatur anstelle eines Touchscreens. Sie verfügten nur über grundlegende Funktionen: Anrufe tätigen, SMS senden, Websites durchsuchen und sich auf den Textinhalt von Seiten konzentrieren. Seit dem Aufkommen von Smartphones ist die Anzahl einfacher Mobiltelefone in Industrieländern zurückgegangen.

In Entwicklungsländern kann sich nicht jeder ein Smartphone und einen unbegrenzten 4G-Tarif leisten. Dieser Markt wurde von Geräten übernommen, die als Smart Feature Phones bezeichnet werden. Sie kombinieren die Hardware und den Preis eines einfachen Mobiltelefons mit einigen spezifischen Funktionen für Smartphones.


Günstige Telefone

Der Markt für billige Telefone mit Smartphone-Funktionen ist seit 2017 erheblich gewachsen. Es wird erwartet, dass 2019 weltweit rund 400 Millionen solcher Geräte verkauft werden.

Das Wachstum des Low-Cost-Handymarkts wurde durch die Tatsache begünstigt, dass Nokia seine alten beliebten Modelle wie das Nokia 3110 und 8110 wiederbelebte ( hier finden Sie eine Anleitung zum Debuggen von Webseiten auf dem Nokia 8110 mit KaiOS). In Indien bieten die Reliance Jio- Telefone ihren Benutzern einen günstigen und dennoch modernen mobilen Zugriff auf Webressourcen. Jio hat zur Entwicklung von KaiOS beigetragen , einem Linux-basierten Betriebssystem für einfache, erschwingliche Telefone.

Der wachsende Markt für einfache Telefone hat ein Bedürfnis nach Sites geschaffen, die auf solchen Geräten effektiv arbeiten können. Um solche Sites zu entwickeln, müssen Sie einige Einschränkungen berücksichtigen.


Verschiedene Projekte für kostengünstige Telefone

Das vorherige Bild zeigt die Bildschirme der mBasic-Projekte von Google Images Lite und Facebook. Diese Projekte lassen sich schnell auf einfachen Telefonen laden und erfordern nur ein Minimum an Client-Skriptfunktionen. Ein weiterer Screenshot ist das Proxx- Spiel, das, obwohl es stark von Skripten abhängig ist, eine aggressive Codetrennung verwendet, um das Laden zu beschleunigen.

Einschränkungen von preiswerten Handys

Billigtelefonnutzer in Entwicklungsländern sind durch drei Faktoren begrenzt:

• Eine kleine Anzahl kostengünstiger Qualitätsgeräte.
• Unzugänglichkeit von Hochgeschwindigkeitskommunikationsnetzen.
• Hohe Kosten für die Datenübertragung.

Diese Einschränkungen sollten für diejenigen beachtet werden, die die Wahrnehmung der Webentwicklung über das „Prisma des Feature Phones“ verfolgen möchten. Wenn wir detaillierter über die Einschränkungen solcher Telefone und die Umgebung, in der sie verwendet werden, sprechen, erhalten wir Folgendes:

1. Hardware Einfache Telefone haben normalerweise einen langsameren (etwa 1,1 GHz) Single-Core- oder Dual-Core-Prozessor und weniger als 512 MB RAM. Um zu verstehen, wie dies die Fähigkeiten von Geräten einschränkt, vergleichen Sie dies mit einem Multi-Core-Prozessor und 4 GB RAM iPhone XS.
2. Datenübertragung. Mobile Tarife werden immer billiger, aber in Regionen, in denen kostengünstige Telefone vertrieben werden können, sind die Tarife immer noch stark eingeschränkt. Das bedeutet, dass Sie sich beim Entwickeln von Seiten für Feature-Phones bemühen sollten, die Datenmenge, aus der diese Seiten bestehen, so weit wie möglich zu reduzieren. Auf diese Weise können Websites zum einen schneller geladen und zum anderen die Kosten für den Besuch solcher Websites für Benutzer gesenkt werden.
3. Begrenzte Bildschirmgröße. Die Bildschirmgröße eines kostengünstigen Telefons ist in der Regel viel kleiner als die Bildschirmgröße eines Smartphones. Wir sprechen von einem Bildschirm mit einer Diagonale von etwa 2,4 Zoll. In solchen Bildschirmen können Sie nur eine sehr begrenzte Anzahl von Elementen anzeigen. Dies bedeutet, dass der Site-Entwickler sich bemühen sollte, so schnell wie möglich genau das herunterzuladen, was auf dem Bildschirm angezeigt wird.
4. Das Fehlen eines Touchscreens. Wenn das Gerät nicht mit einem Touchscreen ausgestattet ist, bedeutet dies, dass beim Arbeiten mit der Seite über die Tastatur alles, mit dem der Benutzer interagieren kann, leicht zugänglich sein muss. Sie sollten nicht zu viele Elemente auf der Seite anzeigen, mit denen Sie arbeiten können.
5. Tastaturen Bei kostengünstigen Telefonen werden Hardwaretastaturen verwendet, die sich grundlegend von den QWERTY-Bildschirmtastaturen unterscheiden, die Smartphonebesitzern bekannt sind. Die Hardwaretastatur hat ungefähr 15 Tasten, wobei zur Eingabe einiger Zeichen mehrere Tastenanschläge verwendet werden. Als Ergebnis stellt sich heraus, dass es sich im Hinblick auf UX lohnt, den Bedarf an Texteingaben zu minimieren.

Es ist zu beachten, dass auch in Japan begrenzte Tarifpläne die Benutzerfreundlichkeit von Benutzern mit Webressourcen beeinträchtigen.


Ladezeit für 4G-Geräte in Japan

Oben ist ein Bild von diesem Tweet zu sehen, das besagt, dass in Japan die Seiten Ende des Monats aufgrund von Tarifeinschränkungen langsamer geladen werden.

Richtlinien für das Website-Design

Mit den folgenden Richtlinien können Sie Websites entwerfen, die auf einfachen, kostengünstigen Telefonen schnell funktionieren. Im Allgemeinen kann festgestellt werden, dass nicht empfohlen wird, dass der Benutzer auf den Download von etwas wartet, das er nicht ausdrücklich angefordert hat. Nach Möglichkeit sollten Sie versuchen, die Zeit zum Laden und Ausführen von JavaScript-Code zu verkürzen.

▍ Legen Sie Grenzwerte für die übertragene Datenmenge fest, wenn Sie die Site zum ersten Mal laden

Auf dem Weg vom Server zum Client durchläuft jedes Byte Ihrer Seite viele Engpässe. Dies sind langsame und unzuverlässige Netzwerke, langsame Prozessoren. Die einzige garantierte Möglichkeit, die Leistung von Seiten zu steigern, besteht darin, das Volumen genau zu planen und die Pläne zu erfüllen (und sogar zu erfüllen).

Die Ziele für die Seitenleistung werden durch die Einschränkungen festgelegt, die das Entwicklungsteam anstrebt, um eine angemessene Leistung für das Projekt zu erzielen. Dies sind die Einschränkungen von Metriken, über die hinaus beschlossen wurde, nicht darüber hinauszugehen. Durch das Festlegen solcher Einschränkungen für messbare Indikatoren und das Festlegen von Einschränkungen vor Arbeitsbeginn kann das Team sicherstellen, dass die Leistung des Projekts innerhalb des vorgegebenen Rahmens liegt, wenn neue Funktionen hinzugefügt werden.

Beispiele für Ressourcenmetriken, die eingeschränkt werden können, sind die Größe des JavaScript-Bundles, die Größe des Abbilds in Byte und die Anzahl der HTTP-Anforderungen. Einschränkungen für Metriken, die sich auf die Wahrnehmung von Seiten durch Benutzer auswirken, können für Metriken wie First contentful paint , Largest contentful paint oder First input delay festgelegt werden . Mit ihnen können Sie auswerten, wie schnell der Benutzer die Seite sieht und wie schnell er mit ihr interagieren kann. Sie können Schwellenwerte für solche Indikatoren basierend auf den Merkmalen der Zielgruppe der Site festlegen.

Sie können ein System von Einschränkungen in Bezug auf Ihren eigenen Anwendungscode sowie in Bezug auf Skripts von Drittanbietern und ähnliche Dinge entwickeln. Einschränkungen können während der Erstellung des Projekts mithilfe von Lighthouse (LightWallet) in einem kontinuierlichen Integrationssystem überprüft werden.

▍ Verwenden Sie das PRPL-Muster

PRPL ist ein vom Chrome-Entwicklungsteam empfohlenes Muster für das Herunterladen von Phasing-Code. Es soll sicherstellen, dass Anwendungen, die es verwenden, auf kostengünstigen Geräten und langsamen Netzwerken so schnell wie möglich interaktiv werden. Das PRPL-Muster fordert dazu auf, die minimale Menge an JS-Code vorzuladen, die erforderlich ist, damit die Seite funktioniert. Ressourcen werden dann mithilfe von Lazy Loading-Techniken geladen. Bei Bedarf können Sie den Service-Worker verwenden, um die für zukünftige Interaktionen mit der Site erforderlichen JavaScript-Ressourcen vorab im Cache zu speichern.

Das PRPL-50-Muster begrenzt die Menge der ursprünglich geladenen Ressourcen auf 50 KB. Da kostengünstige Telefone über sehr bescheidene Hardwareressourcen verfügen, müssen Sie noch strengere Einschränkungen festlegen. Hier würde ich Ihnen raten, das PRPL-30-Muster zu betrachten. 30 ist 30 KB Quellressourcen. Dies ist die Größe des komprimierten und minimierten Bundles, das beim Laden der ersten Seite geladen wird.


Beispiel für die Zuweisung von Speicherplatz in einem 30-KB-JS-Bundle. Dies umfasst Anwendungslogik, Framework-Code, Hilfsprogramme und Abhängigkeiten von Drittanbietern

Bei diesem Ansatz kommt das erste Byte des Site-Materials von einem guten Border-Caching-Server nach Abschluss des SSL-Verbindungsvorgangs in ca. 2 Sekunden auf dem Gerät an. Dies gibt uns 3 Sekunden Zeit, um die Materialien der ursprünglichen Route herunterzuladen, anzuzeigen und die Seite für die Benutzerinteraktion vorzubereiten. Für Projekte, die auf JavaScript basieren, bedeutet dies, dass die Gesamtgröße des auf der ersten Seitenausgabe geladenen minimierten und komprimierten Bundles 30 KB nicht überschreiten sollte.


Die Verwendung des PRPL-30-Musters ermöglicht es dem Entwickler, die Seite auf einem billigen Telefon in etwa 5 Sekunden in den interaktiven Modus zu versetzen

Vielleicht wird das jemanden überraschen: „Worüber reden wir? Originalpaketgröße von 30 Kb? Es ist seltsam. Schließlich füge ich nicht einmal React und den Anwendungscode in dieses Volume ein! “Es sollte beachtet werden, dass der Projektersteller beim Entwickeln von Sites, die für wirklich schwache Geräte konzipiert sind, aus Gründen der Benutzerfreundlichkeit schwierige Kompromisse eingehen muss. Beispielsweise kann React für Feature-Telefon-Sites verwendet werden, entweder wenn die Verwendung von React auf Server-Rendering beschränkt ist (1), was durchaus sinnvoll klingt, oder wenn (2) die Codefragmente, die die Anwendungslogik enthalten, sehr, sehr klein sind und Dies ist der Fall, wenn bei ihrer Vorbereitung die strengsten Regeln für das langsame Laden angewendet werden. Es gibt eine dritte Option: Wählen Sie ein leichtes React-Analogon wie Preact (3). Wir werden im Folgenden mehr über solche Kompromisse sprechen.

Ein Beispiel für eine Anwendung, die mit dem Limit von 30 KB erstellt wurde, ist Proxx . Der anfängliche Projektdatensatz hat eine Größe von 25 KB und unterscheidet sich durch den TTI-Indikator (Time To Interactive), der weniger als 5 Sekunden beträgt. Hier finden Sie einen Taschenrechner, mit dem Sie Ziele für Webprojekte finden und Ihre eigenen Einschränkungen auswählen können.

Die empfohlene Größe für Routen, die im Lazy-Modus geladen wurden, überschreitet 35 KB nicht. Die "Fragmente", deren Größe im Bereich von 30 bis 35 KB liegt, sind jedoch auch groß genug, um über ihre parallele Verarbeitung zu sprechen, wobei die Funktionen des V8 für das Streaming der Arbeit mit Skripten genutzt werden.

▍ Speichern Sie JavaScript-Ressourcen

Wenn wir über das Speichern von JavaScript-Ressourcen auf den Punkt bringen, stellt sich heraus, dass Sie statisches Rendering oder Server-Rendering mit minimalem Aufwand an Clientskripten verwenden können. Wenn es völlig unmöglich ist, auf Client- oder Hybrid-Rendering zu verzichten, sollten nur die Skripte an den Client gesendet werden, die für eine bestimmte Route erforderlich sind, und dies ist besser, wenn möglichst wenige Datenübertragungssitzungen durchgeführt werden. Hier können Sie Techniken wie die schrittweise Vorbereitung der Seite für die Arbeit im Browser berücksichtigen.


Statisches Rendering

JavaScript ist der Hauptengpass bei einfachen Telefonen

Beachten Sie bei der Entwicklung interaktiver Projekte für billige Telefone, dass JavaScript normalerweise das Haupthindernis für eine hohe Seitenleistung ist. Dies ist wichtig, da es von der Entscheidung abhängt, wie schnell der Benutzer sie verwenden kann, um die Seiten zu rendern . Auch wenn er mit ihnen über einen Telefon-Joystick arbeitet. Wenn Sie sich für serverseitiges oder statisches Rendering entscheiden, versuchen Sie, die Menge an JS-Code, die zum Organisieren der interaktiven Arbeit der Seite erforderlich ist, so gering wie möglich zu halten.

URL-Eintrag; Laden der Server-Rendering-Ergebnisse; Laden des JavaScript-Codes, der erforderlich ist, um die Seite in den interaktiven Modus zu versetzen. Seite bereit für Benutzerinteraktion

Der Preis von JavaScript besteht aus zwei Indikatoren: der Ladezeit und der Ausführungszeit des Codes. Ein langsames Netzwerk (z. B. eine stabile 3G-Verbindung) kann die Startzeit von JS verlängern. Ein langsamer Prozessor erhöht die zur Ausführung des Skripts erforderliche Zeit. Die folgende Abbildung zeigt die Zeit, die verschiedene Geräte benötigen, um den JavaScript-Code der beliebten Ressource reddit.com zu verarbeiten. Es ist leicht zu erkennen, dass ein langsames Gerät (Alcatel 1X 5059D) sechsmal so viel Zeit benötigt wie ein schnelles Gerät (Pixel 3).


Die Zeit, die verschiedene Geräte benötigen, um den JS-Code einer beliebten Site zu verarbeiten

Wenn das Rendern der Seite oder das Aktivieren des interaktiven Modus stark von JavaScript abhängt, kann dies dazu führen, dass der Benutzer eines kostengünstigen Telefons 30 bis 60 Sekunden warten muss, um mit der Benutzeroberfläche arbeiten zu können. Um die zum Laden und Verarbeiten von JavaScript erforderliche Zeit zu minimieren, sollte der Entwickler daher die Skripts sparsam verwenden und den Code nur für die Routen und Komponenten herunterladen, die der Benutzer möglicherweise benötigt. Sie müssen dies tun, wenn der entsprechende Code benötigt wird.

Versuchen Sie, die Menge an Code zu minimieren, die erforderlich ist, um die Seite interaktiv zu gestalten

Mit den folgenden Tipps können Sie die Menge an Code minimieren, die Sie zur Bereitstellung der interaktiven Funktionen Ihrer Seiten benötigen:

1. Verwenden Sie so weit wie möglich träge Lademechanismen. Wir sprechen über Routen, Komponenten, Ressourcen, die sich außerhalb des sichtbaren Bereichs des Bildschirms befinden, und darüber, was nicht als extrem wichtig angesehen werden kann, um den Zustand der Seite sicherzustellen.
2. Verwenden Sie Code- Aufteilungsmechanismen, um JavaScript-Code in Teile aufzuteilen und nur das herunterzuladen, was der Benutzer beim Arbeiten mit der ursprünglichen Route benötigt. Dies führt zu einem schnelleren Laden von Seiten, indem die Anzahl der geladenen und verarbeiteten Skripte verringert wird.
3. Entfernen Sie nicht verwendeten Code aus JavaScript-Bundles, um deren Größe so weit wie möglich zu verringern. Dazu müssen Sie das Bundle analysieren und die Bibliotheken identifizieren, die überhaupt nicht verwendet werden und die durch kompaktere ersetzt werden können, die an die Anforderungen Ihres Projekts angepasst sind. Bibliotheken, die beim erstmaligen Laden der Seite nicht verwendet werden, können im Lazy-Modus geladen werden.
4. Erwägen Sie die Verwendung von Differentialcode - Lademechanismen . Auf diese Weise können Sie modernen Browsern modernen JavaScript-Code geben, den transpilierten Code übermäßig nutzen und Polyfills vermeiden. Das Reduzieren von Code für ältere Browser kann die Codeleistung in modernen Browsern verbessern.
5. Wenn der JS-Code zum Rendern der Seite und zum Anzeigen der Benutzeroberfläche im interaktiven Modus unbedingt erforderlich ist, organisieren Sie ein vorläufiges Laden der erforderlichen Skripte. Das entsprechende Attribut (siehe unten) weist den Browser darauf hin, dass das Skript wichtig ist und dass es so schnell wie möglich heruntergeladen werden muss.

<link rel="preload" as="script" href="critical.js"> 

▍ Wählen Sie den Stapel der verwendeten Technologien sorgfältig aus

Framework und Dienstprogramme

Während die Verwendung von Bibliotheken von Drittanbietern die Entwicklung beschleunigen und die Lösung komplexer Probleme vereinfachen kann, können Bibliotheken eine beträchtliche Größe haben. Sie sollten bei der Entwicklung von Projekten für schwache Geräte mit Vorsicht eingesetzt werden. Hier einige Richtlinien zur Verwendung externer Abhängigkeiten:

1. Preiswerte Telefone sind in ihren Ressourcen sehr begrenzt. Vermeiden Sie daher nach Möglichkeit die Verwendung von JS-Frameworks oder schränken Sie deren Verwendung ein. Der Zweck dieses Tipps besteht darin, der Anwendungslogik so viel Platz wie möglich zu lassen. In einer Situation, in der ein Entwickler die Verwendung von JavaScript einschränken möchte, um die Seitengröße zu verringern und die Leistung zu steigern, können JS-Frameworks die Seite überladen. Wenn das Projekt auf React basiert, sollten Sie die Verwendung dieser Bibliothek auf das Rendern auf dem Server beschränken oder während des Builds auf Preact wechseln und Preact-Compatible verwenden , um die Größe des Bundles um ca. 30 KB zu verringern. Für die Erstellung von Lichtbündeln ist es sinnvoll, Technologien wie Svelte , lit-html und einfaches JavaScript zu betrachten.
2. Stellen Sie sicher, dass Abhängigkeiten von Drittanbietern so wenig Speicherplatz wie möglich belegen. Dadurch wird sichergestellt, dass die Größen der beim erstmaligen Laden der Seite verwendeten Bundles in die angegebenen Grenzen passen. Mithilfe von bundlephobia.com können Sie den Beitrag von Bibliotheken von Drittanbietern zur Größe von Bundles analysieren . Analysieren Sie die Zusammensetzung Ihrer Bündel kritisch, um festzustellen, ob ihr Platz effizient genutzt wird. Beispielsweise können Sie anstelle der Bibliothek Moment.js, die in Standardform große Datenmengen enthält, die sich auf nationale Standards beziehen, Datums-fns oder Luxon verwenden .
3. Gehen Sie äußerst vorsichtig vor, wenn Sie Redux und die integrierten Redux-Repositorys verwenden, die zum Verwalten des Anwendungszustands verwendet werden. Redux-Repository-Daten werden häufig in HTML eingebettet, damit sie zum Ausführen von Seiten verwendet werden können. Dies kann leicht zu einer übermäßigen Vergrößerung der vom Server als Antwort auf Clientanforderungen gesendeten Daten führen.

▍Anpassen von Site-Materialien, um sperrige Ressourcen bei langsamen Verbindungen nicht zu belasten

Ab sofort möchte ich Ihnen raten, sich dieses Material zur Anpassung von Ressourcen auf Basis schwacher Geräte anzuschauen.


Adaptives Laden von Ressourcen abhängig von der Geschwindigkeit der Netzwerkverbindung

Das adaptive Laden von Ressourcen ist eine Technik zum „Anpassen“ von Materialien, die an den Benutzer gesendet werden, basierend auf Informationen zum effektiven Verbindungstyp (ECT), der dem Browser über die Netzwerkinformations-API zur Verfügung steht . Das Arbeiten mit dieser API sieht folgendermaßen aus:

 console.log(navigator.connection.effectiveType); // 3G 

Durch das adaptive Laden können Websites sicherstellen, dass Benutzer, die an langsamen Verbindungen arbeiten, fast die gleiche Erfahrung bei der Interaktion mit Ressourcen haben wie Benutzer, die Zugriff auf schnellere Netzwerke haben. Vielleicht wird auf der "langsamen" Version der Website nicht alles so schön sein wie auf der "schnellen", aber dies ist eine akzeptable Zahlung für eine gute Leistung.

Beachten Sie, dass Benutzer selbst bei einer „schnellen“ 4G-Verbindung möglicherweise auf niedrige Datenübertragungsgeschwindigkeiten stoßen. Vielleicht haben Sie sich mit so etwas getroffen, indem Sie das WiFi-Internet in einem Restaurant oder auf einer Konferenz genutzt haben.

Betrachten Sie ein spezielles Beispiel für die Verwendung der adaptiven Materialbeladung. Es geht um die Komponente, die ein bestimmtes Produkt auf der Website darstellt. Ein Benutzer, der an einer langsamen Verbindung arbeitet, sieht eine komprimierte Version des Produktabbilds. Und jeder, der mit hoher Geschwindigkeit ins Internet geht, sieht ein qualitativ hochwertiges Bild und kann darüber hinaus zusätzliche Funktionen verwenden, für deren Implementierung viel JavaScript-Code erforderlich ist. Zum Beispiel - dies ist die Möglichkeit, das Image des Produkts zu verbessern oder im "Karussell" verschiedene Fotos des Produkts anzuzeigen.

Bei billigen Telefonen ist ein langsames Netzwerk nicht unbedingt das Haupthindernis für das Senden von Massenressourcen an diese. Die Eindrücke des Benutzers bei der Arbeit mit der Site werden wahrscheinlich durch den langsamen Prozessor und die geringe Speicherkapazität beeinträchtigt - selbst wenn das Gerät an ein recht schnelles 4G-Netzwerk angeschlossen ist. Obwohl Webentwickler noch keinen Zugang zu detaillierten Informationen über den Prozessor haben, geben Client-Tipps ungefähre Informationen über den Speicher des Geräts, über die Breite und Pixeldichte des Bildschirms, über das Netzwerk und über einige andere Dinge. Diese Informationen können verwendet werden, um eine genauere Strategie für die Bereitstellung optimierter Daten für den Kunden zu entwickeln.

▍ Respektieren Sie den Tarifplan des Benutzers unter Berücksichtigung des Inhalts des Save-Data-Headers

Der Chrome-Browser für Android verfügt über eine spezielle Option , die das Speichern von Daten umfasst. Damit können Benutzer, die Verkehr sparen möchten, in einem Modus arbeiten, in dem der Browser die Ressourcen automatisch optimiert und versucht, das Laden von Seiten zu beschleunigen. Die Optimierung umfasst mehr als die übliche Komprimierung von Bildern, verzögert das Laden nicht kritischer Ressourcen und generiert auf dem Server Bilder für die Vorschau von Seiten. Hier finden Sie das Material, in dem Sie Details dazu finden.

Wenn Benutzer den Datenspeichermodus in Browsern aktivieren, die diesen Modus unterstützen, hängen die Browser den Header Save-Data an HTTP- und HTTPS-Anforderungen an. Der Entwickler des Webprojekts kann mithilfe von JavaScript überprüfen, ob die Anforderung einen solchen Titel hat, und dem Benutzer in diesem Fall eine optimierte Version der Website-Materialien zur Verfügung stellen. Infolgedessen stellt sich heraus, dass der Benutzer die "harten" Möglichkeiten absichtlich aufgibt und der Entwickler einfach seinen Wunsch erfüllt. Um in der Anfrage nach dem Save-Data-Header zu suchen, können Sie so etwas wie diesen Code verwenden:

 if ("connection" in navigator) {  if (navigator.connection.saveData === true) {    //  ,    .  } } 

So sieht die Arbeit mit der Lite-Version der Seite aus.


Leichte Version der von Google erstellten Seite

Beachten Sie, dass ein einfaches billiges Telefon zwar Chrome unterstützen kann, jedoch nicht die Verfügbarkeit des Datenspeichermodus im Browser garantiert. Es ist am besten, diese Funktion als die optionale optionale Funktionalität einiger Browser zu betrachten.

▍ Ziehen Sie ressourcenintensive Mechanismen zur Verwaltung der Logik und des Anwendungsstatus in die Web-Worker

Hier ist ein gutes Material, um Tipps zur Beschleunigung des Ladens von Webanwendungen auf schwachen Telefonen zu finden.

Der Haupt-Browser-Thread ist neben der Ausführung von JavaScript mit anderen wichtigen Dingen beschäftigt. Dies ist die Bildung des Seitenlayouts, die Anzeige von Pixeln auf dem Bildschirm, um die Interaktion des Benutzers mit der Seite sicherzustellen. Lange, komplexe JavaScript-Vorgänge können den Haupt-Thread blockieren, was bedeutet, dass die Seite gestört wird.

Mit Webworkern können Sie JavaScript-Code im Hintergrund ausführen, ohne den Hauptthread zu blockieren. Sie sollten verwendet werden, um die durch "schwere" JavaScript-Vorgänge verursachte Last aus dem Hauptthread zu entfernen. Dazu gehört die komplexe Logik von Webanwendungen und deren Zustandsverwaltung. Der Haupt-Thread und der Worker-Thread tauschen Informationen mithilfe der Funktion postMessage () und der Ereignisbehandlungsroutine onmessage aus . Mit der Funktion postMessage() kann der Absender einen Wert an den Empfänger senden, bei dem es sich beispielsweise um ein JavaScript-Objekt handeln kann. Es gibt Bibliotheken wie Comlink , die den Umgang mit Webworkern erleichtern.

Hier ist das Material, in dem die Arbeit des Proxx- Projekts mit und ohne Worker Flows untersucht wird. Im Rahmen der Studie wurde festgestellt, dass eine Anwendung, die eine bestimmte Operation ausführt, ohne den Einsatz von Mitarbeitern 6,6 Sekunden lang auf dem Nokia 2-Telefon (1 GB Speicher, Quad-Core-Prozessor mit einer Frequenz von 1,3 GHz) „einfriert“. Unter den gleichen Bedingungen, jedoch unter Verwendung eines Arbeiters, beträgt die Reaktionszeit des Systems nur 48 ms. Wenn Sie Code haben, der ernsthafte Prozessorressourcen erfordert, sollten Sie daher in Betracht ziehen, ob die Portierung auf einen Web-Worker die Situation verbessert.

▍ Bilder optimieren

Bilder haben oft eine sehr große Datenmenge im Zusammenhang mit Webseiten. Bilder müssen jedoch nicht nur hochgeladen werden. Sie müssen noch decodiert und für die Ausgabe vorbereitet werden, was ein Gerät mit geringem Stromverbrauch stark belasten kann. Daher ist es für die Entwicklung von Sites, die für schwache Telefone konzipiert sind, wichtig, darauf zu achten, dass die auf diesen Sites verwendeten Bilder eine angemessene Größe und eine angemessene Komprimierung aufweisen. Hier einige Vorschläge zur Bildoptimierung:

1. Komprimieren Sie Bilder mit Tools wie Imagemin. Mit ihnen können Sie die Bildgröße reduzieren, ohne dass sich die Qualität merklich verschlechtert.
2. Ersetzen Sie animierte GIFs durch Videodateien, die viel schneller geladen werden. Aber wenn es um Videos geht, ist es wichtig zu überlegen, ob für eine Website, die für ein einfaches, billiges Telefon entwickelt wurde, schwere Medien benötigt werden.
3. Verwenden Sie nach Möglichkeit Mechanismen zum verzögerten Laden von Bildern. Da solche Mechanismen auf JavaScript basieren, sollten Sie sicherstellen, dass ihre Software-Implementierung nicht zu "schwer" ist. Hier kann das neue Standard- Ladeattribut hilfreich sein.
4. Senden Sie reaktionsschnelle Bilder in der richtigen Größe an den Kunden. Dies kann erreicht werden, indem viele Versionen von Bildern erstellt werden und dem Kunden diejenigen zur Verfügung gestellt werden, die für seinen Bildschirm am besten geeignet sind.
5. Verwenden Sie Bilder, die auf den Bildschirm passen. Die Ausgabe ausreichend komprimierter kleiner Bilder an einen Benutzer, der an einem schwachen Telefon arbeitet, führt dazu, dass solche Bilder schneller dekodiert werden können.

▍ Geben Sie die Client-Ressourcen an, die der Bildschirmgröße des Geräts entsprechen

Viele moderne Geräte, die als „Smart Feature Phone“ eingestuft werden können, verfügen über QVGA-Bildschirme mit einer Auflösung von 320 x 240 Pixel (horizontal und vertikal). Wenn Sie beim Laden der Seite die Bildschirmgröße des Geräts ermitteln müssen (z. B. um bestimmte Optimierungen zu verwenden), können Sie so etwas wie das folgende Codefragment verwenden:

 const isFeaturePhone = Math.min(screen.width, screen.height) <= 240; 

Ein ähnlicher Ansatz wird im Proxx-Projekt verwendet.

▍Testen Sie Sites auf realen Geräten oder im Emulator

Wenn Sie Websites für einfache billige Telefone entwickeln, wird empfohlen, diese auf solchen Telefonen zu testen. Sie sind preiswert. In einem Tweet heißt es beispielsweise, dass den Entwicklern, die in den USA leben und ihre Websites auf KaiOS-Geräten testen möchten, empfohlen wird, bei BestBuy ein Telefon für 15 US-Dollar zu kaufen.


Preiswertes Telefon zum Testen von Sites auf KaiOS

Wenn Sie ein ähnliches Telefon emulieren möchten (z. B. ein Jio-Telefon unter KaiOS), können Sie die Chrome-Entwicklertools für Folgendes verwenden:

• Öffnen Sie die Chrome Developer Tools.
• Öffnen Sie die Gerätesymbolleiste.
• Öffnen Sie in der Gerätesymbolleiste das Device und wählen Sie Edit . Klicken Add custom device Fenster auf die Schaltfläche Add custom device hinzufügen.
• Nennen Sie das neue KaiOS-Gerät (oder was auch immer Sie wollen).
• 240x320 Sie die Bildschirmgröße auf 240x320 .
• Mozilla/5.0 (Mobile; LYF/F90M/LYF-F90M-000-02-23-181217; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5 YouTube/1.66.51.J Feld User agent string des User agent string Folgendes ein: Mozilla/5.0 (Mobile; LYF/F90M/LYF-F90M-000-02-23-181217; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5 YouTube/1.66.51.J .
• Speichern Sie das Gerät, indem Sie auf die Schaltfläche Add klicken.
• Aktivieren Sie gegebenenfalls die Verlangsamung des Prozessors, aber denken Sie daran, dass Sie mit Hilfe eines Emulators die Site nicht so gut überprüfen können wie mit einem realen Gerät.

Richten Sie in den Chrome Developer Tools ein neues Gerät ein

Zusammenfassung

Sie können Websites erstellen, mit denen absolut alle mobilen Benutzer unabhängig von ihrem Wohnort bequem arbeiten können. Hierfür muss der Entwickler jedoch einige Anstrengungen unternehmen, da sich Mobilgeräte unterschiedlicher Preisklassen stark voneinander unterscheiden.

Je günstiger das Telefon ist, desto höher ist die Wahrscheinlichkeit, dass es einen langsamen Prozessor verwendet. Die Leistung von JavaScript-Sites hängt von der Geschwindigkeit ab, mit der der Code geladen und ausgeführt wird. Dies sollte für diejenigen in Betracht gezogen werden, die Websites erstellen möchten, die auf jedem Gerät und in jedem Netzwerk gut funktionieren.

Alles, worüber wir oben gesprochen haben, ist wichtig für Smartphones, aber noch wichtiger für kostengünstige einfache Telefone, für Geräte der „Feature Phone“ -Klasse, die in Entwicklungsländern sehr beliebt sind.

Sehr geehrte Leser! Optimieren Sie Ihre Webprojekte für schwache mobile Geräte?