Chargement de page rapide sur les téléphones bon marché les plus simples

Ces téléphones auxquels il est fait référence dans le titre, en anglais, sont appelés "téléphone de fonction". Ils diffèrent par des capacités extrêmement modestes. De plus, ils sont très abordables, car ils coûtent environ 20-25 $. Ils peuvent être comparés aux versions allégées des smartphones modernes. Ces téléphones permettent à des centaines de millions de personnes des pays en développement d'utiliser les ressources Web.


Jio Phone

Si le site est basé sur des technologies visant à assurer une vitesse élevée de son travail, tout le monde en bénéficiera - à la fois les propriétaires de téléphones simples et bon marché et ceux qui regardent des pages Web à partir de nouveaux smartphones puissants.

Aperçu de la situation

Les appareils dont nous parlons, comme le téléphone, sont peu coûteux. Par conséquent, ils ont des capacités matérielles plutôt faibles. Ainsi, ils utilisent des processeurs lents (par exemple, le processeur d'un téléphone bon marché peut être 6 fois plus lent que le processeur d'un smartphone haut de gamme). Ils installent très peu de RAM (cela peut être de l'ordre de 256 à 512 Mo, généralement moins de 4 Go). La même chose s'applique à la quantité de mémoire interne pour stocker des données, qui ne dépasse généralement pas 4 Go. Ces téléphones n'ont souvent pas d'écran tactile. Au lieu de cela, ils ont des claviers et des joysticks simples utilisés à des fins de navigation. Le cdpv montre à quoi pourrait ressembler un téléphone similaire.

Ces téléphones ne peuvent pas exécuter le code JavaScript aussi rapidement que les smartphones avancés. Il leur est difficile d'afficher des sites contenant de grandes quantités de données multimédias. Par conséquent, pour préparer des pages qui fonctionneront bien sur de tels téléphones, vous devez aborder de manière responsable le problème du remplissage de ces pages.


Top 10 des smartphones modernes: performances du processeur (premier semestre 2019)

Ci-dessus sont les résultats d'une étude de performance des 10 smartphones les plus vendus en 2019. Cette étude a été menée en utilisant le benchmark Geekbench 4. Ici, dans la partie supérieure, vous pouvez voir les résultats des tests du populaire téléphone bon marché - Nokia 3110.

Le contenu JavaScript des pages est exécuté principalement en mode simple cœur (ici, il convient de rappeler que le code JS, de par sa nature, est beaucoup plus «simple thread» du reste du contenu Web), par conséquent, les performances JavaScript sont liées aux capacités du processeur. Cela suggère que lorsque vous pensez à des projets Web pour les pays en développement, vous devez vous souvenir des caractéristiques des appareils qui y sont utilisés.

Ce matériel vise à résoudre le problème du développement de sites pour les appareils lents. L'application des techniques décrites dans ce document vous permet de créer des sites qui conviennent à tous, quelle que soit la performance de leur téléphone.

Informations générales

Peut-être vous en souvenez-vous, peut-être pas, mais les téléphones que nous appelons les téléphones portables étaient populaires jusqu'au milieu des années 2000, avant l'avènement et l'utilisation généralisée des smartphones. Il s'agissait d'appareils compacts avec un clavier au lieu d'un écran tactile. Ils ne possédaient que des fonctionnalités de base: passer des appels, envoyer des SMS, naviguer sur des sites Web, se concentrer sur le contenu textuel des pages. Depuis l'avènement des smartphones, le nombre de téléphones portables simples dans les pays développés a diminué.

Dans les pays en développement, tout le monde ne peut pas se permettre un smartphone et un tarif 4G illimité. Ce marché a été pris en charge par des appareils appelés téléphones intelligents. Ils combinent le matériel et le prix d'un simple téléphone mobile avec certaines fonctionnalités spécifiques aux smartphones.


Téléphones bon marché

Le marché des téléphones bon marché avec des capacités de smartphone a considérablement augmenté depuis 2017. Il est prévu qu'en 2019 environ 400 millions de ces appareils seront vendus dans le monde.

La croissance du marché des combinés à bas prix a été facilitée par le fait que Nokia a relancé ses anciens modèles populaires, tels que les Nokia 3110 et 8110 ( voici un guide de débogage des pages Web sur le Nokia 8110 avec KaiOS). En Inde, les téléphones Reliance Jio offrent à leurs utilisateurs un accès mobile bon marché mais moderne aux ressources Web. Jio a contribué au développement de KaiOS , un système d'exploitation basé sur Linux conçu pour les téléphones simples et abordables.

Le marché croissant des téléphones simples a créé un besoin de sites qui peuvent fonctionner efficacement sur de tels appareils. Pour développer de tels sites, vous devez considérer certaines restrictions.


Divers projets conçus pour les téléphones à bas prix

L'image précédente montre les écrans des projets Google Images Lite et Facebook mBasic. Ces projets se chargent rapidement sur des téléphones simples; ils s'appuient au minimum sur les capacités de script client. Une autre capture d'écran est le jeu Proxx , qui, bien que fortement dépendant des scripts, utilise une séparation de code agressive pour accélérer le chargement.

Limitations des téléphones bon marché

Les utilisateurs de téléphones bas de gamme dans les pays en développement sont limités par trois facteurs:

• Un petit nombre d'appareils de haute qualité bon marché.
• Inaccessibilité des réseaux de communication à haut débit.
• Coût élevé du transfert de données.

Ces limites doivent être rappelées pour ceux qui veulent se brancher sur la perception du développement Web à travers le «prisme du téléphone de fonction». Si nous parlons plus en détail des limites de ces téléphones et de l'environnement dans lequel ils sont utilisés, nous obtenons ce qui suit:

1. Matériel informatique Les téléphones simples ont généralement un processeur simple ou double cœur plus lent (quelque chose comme 1,1 GHz) et moins de 512 Mo de RAM. Afin de comprendre comment cela limite les capacités des appareils, comparez cela avec un processeur multicœur et un iPhone XS de 4 Go de RAM.
2. Transfert de données. Les forfaits mobiles sont de moins en moins chers, mais dans les régions où les téléphones à bas prix peuvent être distribués, les forfaits sont encore très limités. Cela signifie que lors du développement de pages conçues pour les téléphones multifonction, vous devez vous efforcer de réduire autant que possible la quantité de données que ces pages contiennent. Cela permettra aux sites, d'une part, de se charger plus rapidement et, d'autre part, de réduire le coût de la visite de ces sites pour les utilisateurs.
3. Taille d'écran limitée. La taille d'écran d'un téléphone bon marché est généralement beaucoup plus petite que la taille d'écran d'un smartphone. Nous parlons d'un écran avec une diagonale d'environ 2,4 pouces. Ces écrans vous permettent d'afficher uniquement un nombre très limité d'éléments. Cela signifie que le développeur du site doit s'efforcer de télécharger exactement ce qui sera affiché à l'écran dès que possible.
4. L'absence d'écran tactile. Si l'appareil n'est pas équipé d'un écran tactile, cela signifie que tout ce avec quoi l'utilisateur peut interagir doit être facilement accessible lorsqu'il travaille avec la page à l'aide du clavier. Vous ne devez pas afficher sur la page trop d'éléments avec lesquels vous pouvez travailler.
5. Claviers Sur les téléphones à bas prix, des claviers matériels sont utilisés, qui sont complètement différents des claviers QWERTY à l'écran familiers aux propriétaires de smartphones. Le clavier matériel comprend environ 15 touches, plusieurs touches étant utilisées pour saisir certains caractères. En conséquence, il s'avère qu'en termes d'UX, il vaut la peine de s'efforcer de minimiser le besoin de saisie de texte.

Il convient de noter que même au Japon, des plans tarifaires limités affectent la facilité d'utilisation des utilisateurs avec des ressources Web.


Temps de chargement des pages pour les appareils 4G au Japon

Ci-dessus, une image de ce tweet, qui dit qu'au Japon à la fin du mois, les pages se chargent plus lentement en raison des restrictions du plan tarifaire.

Lignes directrices de conception de site Web

Les directives suivantes peuvent vous aider à concevoir des sites qui fonctionneront rapidement sur des téléphones simples et peu coûteux. En général, on peut noter qu'il n'est pas recommandé à l'utilisateur d'attendre le téléchargement de quelque chose qu'il n'a pas explicitement demandé. Dans la mesure du possible, vous devez vous efforcer de réduire le temps nécessaire au chargement et à l'exécution du code JavaScript.

▍ Définissez des limites sur la quantité de données transférées lors du premier chargement du site

Sur le chemin du serveur au client, chaque octet de votre page passe par de nombreux goulots d'étranglement. Ce sont des réseaux lents et peu fiables, ce sont des processeurs lents. Le seul moyen garanti d'augmenter les performances des pages est de planifier strictement leur volume et de réaliser (et même de saturer) les plans.

Les objectifs de performance des pages sont fixés par les contraintes que l'équipe de développement s'efforce de fournir à son projet des performances décentes. Ce sont les limites des métriques au-delà desquelles il a été décidé de ne pas aller au-delà. La définition de telles contraintes sur des indicateurs mesurables et la définition de contraintes faites avant le début des travaux aident l'équipe à s'assurer que les performances du projet se situent dans le cadre donné lorsque de nouvelles fonctionnalités y sont ajoutées.

Des exemples de mesures de ressources pouvant être limitées incluent la taille du bundle JavaScript, la taille de l'image en octets et le nombre de requêtes HTTP. Des limitations sur les mesures qui affectent la façon dont les utilisateurs perçoivent les pages peuvent être définies pour des mesures telles que la première peinture avec contenu , la plus grande peinture avec contenu ou le premier délai d'entrée . Ils vous permettent d'évaluer la vitesse à laquelle l'utilisateur voit la page et la rapidité avec laquelle il peut interagir avec elle. Vous pouvez définir des valeurs de seuil pour ces indicateurs, en fonction des caractéristiques du public cible du site.

Vous pouvez développer un système de restrictions concernant votre propre code d'application, ainsi que concernant les scripts tiers et d'autres choses comme ça. Les contraintes peuvent être vérifiées lors de la construction du projet , à l'aide de Lighthouse (LightWallet), dans un système d' intégration continue .

▍ Utilisez le modèle PRPL

PRPL est un modèle recommandé par l'équipe de développement Chrome pour l'échelonnement des téléchargements de code. Il est conçu pour garantir que les applications l'utilisant deviennent interactives aussi rapidement que possible sur des appareils à faible coût et des réseaux lents. Le modèle PRPL encourage le préchargement de la quantité minimale de code JS nécessaire pour faire fonctionner la page. Les ressources sont ensuite chargées à l'aide de techniques de chargement paresseux. Si nécessaire, vous pouvez utiliser le service worker pour pré-mettre en cache les ressources JavaScript nécessaires aux interactions futures avec le site.

Le modèle PRPL-50 définit une limite sur la quantité de ressources initialement chargées égale à 50 Ko. Étant donné que les téléphones à faible coût disposent de ressources matérielles très modestes, vous devez définir des restrictions encore plus strictes. Ici, je vous conseille de considérer le modèle PRPL-30. 30 correspond à 30 Ko de ressources source, c'est la taille du paquet compressé et minifié chargé lors du premier chargement de page.


Exemple d'allocation d'espace dans un bundle JS de 30 Ko. Cela inclut la logique d'application, le code d'infrastructure, les utilitaires d'assistance et les dépendances tierces

Avec cette approche, le premier octet de documents de site provenant d'un bon serveur de mise en cache de bordure, une fois la procédure de connexion SSL terminée, arrivera sur l'appareil en environ 2 secondes. Cela nous donne 3 secondes pour télécharger les matériaux de l'itinéraire d'origine, les afficher et préparer la page pour l'interaction avec l'utilisateur. Pour les projets basés sur JavaScript, cela signifie que la taille totale du bundle réduit et compressé chargé sur la sortie de la première page ne doit pas dépasser 30 Ko.


L'utilisation du modèle PRPL-30 permet au développeur de mettre la page en mode interactif sur un téléphone bon marché en environ 5 secondes

Cela surprendra peut-être quelqu'un: «De quoi parle-t-on? Taille du paquet d'origine de 30 Ko? C’est étrange. Après tout, je ne rentrerai même pas React et le code d'application dans ce volume! »Il convient de noter que lors du développement de sites conçus pour des appareils vraiment faibles, le créateur du projet, pour la commodité des utilisateurs, devra faire des compromis difficiles. Par exemple, React peut être utilisé pour les sites de téléphones par fonctionnalité soit si l'utilisation de React est limitée au rendu du serveur (1), ce qui semble assez raisonnable, ou si (2) les fragments de code contenant la logique d'application sont très, très petits et ceci si dans leur préparation appliquera les règles les plus sévères de chargement paresseux. Il existe une troisième option - choisissez un analogue React léger comme Preact (3). Nous parlerons plus en détail de ces compromis ci-dessous.

Proxx est un exemple d'application créée en utilisant la limite de 30 Ko. L'ensemble de données du projet initial a une taille de 25 Ko, il diffère par l'indicateur TTI (Time To Interactive), qui est inférieur à 5 secondes. Voici une calculatrice que vous pouvez utiliser pour trouver des cibles pour des projets Web et pour sélectionner vos propres limites.

La taille recommandée pour les itinéraires chargés en mode paresseux ne dépasse pas 35 Ko. Mais les "fragments", dont la taille est de l'ordre de 30 à 35 Kb, sont également assez grands pour parler de leur traitement parallèle en utilisant les capacités du V8 pour le streaming de scripts.

▍ Enregistrer les ressources JavaScript

Si nous parlons de l'enregistrement des ressources JavaScript en un mot, il s'avère que vous pouvez utiliser le rendu statique ou le rendu serveur avec une implication minimale des scripts client. S'il est totalement impossible de se passer du rendu client ou hybride, seuls les scripts nécessaires à un itinéraire particulier doivent être envoyés au client, et il est préférable de le faire pour le moins de sessions de transfert de données possible. Ici, vous pouvez envisager des techniques telles que la préparation progressive de la page pour le travail dans le navigateur .


Rendu statique

JavaScript est le principal goulot d'étranglement des téléphones simples

Lorsque vous développez des projets interactifs pour des téléphones bon marché, sachez que JavaScript est généralement la principale pierre d'achoppement des performances de pages élevées. Ceci est important, car la rapidité avec laquelle l'utilisateur peut les utiliser dépend de la façon dont il est décidé de rendre les pages . Même s'il travaille avec eux à l'aide d'un joystick de téléphone. Si vous décidez d'utiliser le rendu côté serveur ou statique, essayez de faire en sorte que la quantité de code JS nécessaire pour organiser le travail interactif de la page soit aussi petite que possible.

Entrée URL; chargement des résultats de rendu du serveur; charger le code JavaScript nécessaire pour mettre la page en mode interactif; page prête pour l'interaction utilisateur

Le prix de JavaScript se compose de deux indicateurs: le temps de chargement et le temps d'exécution du code. Un réseau lent (par exemple, une connexion 3G stable) peut augmenter le temps de démarrage JS. Un processeur lent augmentera le temps requis pour exécuter le script. La figure suivante montre le temps nécessaire à divers appareils pour traiter le code JavaScript de la ressource reddit.com populaire. Il est facile de voir qu'un appareil lent (Alcatel 1X 5059D) prend 6 fois plus de temps qu'un appareil rapide (Pixel 3).


Le temps nécessaire à différents appareils pour traiter le code JS d'un site populaire

Si le rendu de la page ou le processus de mise en mode interactif dépend fortement de JavaScript, cela peut conduire au fait que l'utilisateur d'un téléphone bon marché devra attendre 30 à 60 secondes juste pour avoir l'opportunité de travailler avec l'interface utilisateur. Par conséquent, afin de minimiser le temps nécessaire au chargement et au traitement de JavaScript, le développeur doit utiliser les scripts avec parcimonie et télécharger le code uniquement pour les routes et les composants dont l'utilisateur peut avoir besoin. Vous devez le faire lorsque vous avez besoin du code approprié.

Efforcez-vous de minimiser la quantité de code nécessaire pour rendre la page interactive

Voici quelques conseils pour vous aider à minimiser la quantité de code dont vous avez besoin pour fournir les fonctionnalités interactives de vos pages:

1. Utilisez des mécanismes de chargement paresseux aussi largement que possible. Nous parlons d'itinéraires, de composants, de ressources qui sont en dehors de la zone visible de l'écran, de ce qui ne peut pas être qualifié d'extrêmement important pour assurer la santé de la page.
2. Utilisez des mécanismes de fractionnement de code pour diviser le code JavaScript en parties et pour télécharger uniquement ce dont l'utilisateur a besoin lors de l'utilisation de la route initiale. Cela entraînera un chargement de page plus rapide en réduisant la quantité de scripts chargés et traités.
3. Supprimez le code inutilisé des bundles JavaScript afin de réduire au maximum leur taille. Pour ce faire, vous devrez analyser le bundle et identifier les bibliothèques qui ne sont pas du tout utilisées, et celles qui peuvent être remplacées par quelque chose de plus compact, adapté aux besoins de votre projet. Les bibliothèques qui ne sont pas utilisées lors du premier chargement de la page peuvent être chargées en mode paresseux.
4. Pensez à utiliser des mécanismes de chargement de code différentiel . Cela vous permettra de donner du code JavaScript moderne aux navigateurs modernes, de vous débarrasser de l'utilisation excessive du code transpilé et d'éviter les polyfills. La réduction du code pour les navigateurs plus anciens peut améliorer les performances du code dans les navigateurs modernes.
5. Si le code JS est absolument nécessaire au rendu de la page et à l'affichage de son interface en mode interactif, organisez un chargement préalable des scripts nécessaires. L'attribut correspondant, comme indiqué ci-dessous, indique au navigateur que le script est important et qu'il doit être téléchargé le plus rapidement possible.

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

Choose Choisissez soigneusement la pile de technologies utilisées

Framework et utilitaires

Alors que l'utilisation de bibliothèques tierces peut accélérer le développement et simplifier la résolution de problèmes complexes, les bibliothèques peuvent avoir une taille considérable. Ils doivent être utilisés avec prudence lors du développement de projets conçus pour les appareils faibles. Voici quelques directives pour l'utilisation des dépendances externes:

1. Les téléphones bon marché sont très limités en ressources. Par conséquent, si possible, évitez d'utiliser des frameworks JS ou limitez leur utilisation. Le but de cette astuce est de laisser autant de place que possible à la logique d'application. Dans une situation où un développeur cherche à limiter l'utilisation de JavaScript afin de réduire la taille de la page et d'augmenter ses performances, les frameworks JS peuvent surcharger la page de manière excessive. Si le projet est basé sur React, envisagez de limiter l'utilisation de cette bibliothèque au rendu du serveur, ou envisagez de passer à Preact et d'utiliser preact-compat pendant la génération pour réduire la taille du bundle d'environ 30 Ko. Pour créer des faisceaux légers, il est judicieux d'examiner des technologies telles que Svelte , lit-html et JavaScript simple.
2. Essayez de vous assurer que les dépendances tierces prennent le moins d'espace possible. Cela garantira que les tailles des liasses utilisées lors du chargement initial de la page correspondent aux limites spécifiées. Pour analyser la contribution à la taille des bundles réalisés par des bibliothèques tierces, vous pouvez utiliser bundlephobia.com . Analysez de manière critique la composition de vos bundles pour déterminer si leur espace est utilisé efficacement. Par exemple, au lieu de la bibliothèque Moment.js, qui contient, sous une forme standard, de grandes quantités de données liées aux normes nationales, vous pouvez utiliser date-fns ou luxon .
3. Soyez extrêmement prudent lorsque vous utilisez Redux et les référentiels intégrés Redux utilisés pour gérer l'intégrité des applications. Les données du référentiel Redux sont souvent intégrées au HTML afin de pouvoir être utilisées pour rendre les pages opérationnelles. Cela peut facilement entraîner une augmentation excessive de la taille des données envoyées par le serveur en réponse aux demandes des clients.

▍Adaptez le matériel du site afin de ne pas charger de ressources volumineuses sur des connexions lentes

Immédiatement, je veux vous conseiller de jeter un coup d'œil à ce matériel sur l'adaptation des ressources basées sur des appareils faibles.


Chargement adaptatif des ressources en fonction de la vitesse de connexion au réseau

Le chargement adaptatif des ressources est une technique d '«adaptation» des documents envoyés à l'utilisateur sur la base d'informations sur le type de connexion efficace (ECT) disponibles pour le navigateur via l'API Network Information . Voici à quoi ressemble cette API:

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

Le chargement adaptatif permet aux sites de garantir que les utilisateurs travaillant sur des connexions lentes peuvent obtenir presque la même expérience d'interaction avec les ressources que les utilisateurs qui ont accès à des réseaux plus rapides. Peut-être que sur la version "lente" du site, tout ne sera pas aussi beau que sur la version "rapide", mais c'est un paiement acceptable pour de bonnes performances.

Veuillez noter que même sur une connexion 4G «rapide», les utilisateurs peuvent rencontrer de faibles vitesses de transfert de données. Peut-être avez-vous rencontré quelque chose comme ça, en utilisant Internet WiFi dans un restaurant ou lors d'une conférence.

Prenons un exemple spécifique d'utilisation du chargement de matériau adaptatif. Il s'agira du composant qui représente un certain produit sur le site. Un utilisateur travaillant sur une connexion lente verra une version compressée de l'image du produit. Et quiconque va à Internet à grande vitesse verra une image de haute qualité et pourra en outre utiliser des fonctionnalités supplémentaires qui nécessitent beaucoup de code JavaScript pour être implémentées. Par exemple - c'est la possibilité d'augmenter l'image du produit, ou de visualiser, dans le «carrousel», diverses photos du produit.

Dans le cas des téléphones bon marché, un réseau lent n'est pas nécessairement le principal obstacle à leur envoyer des ressources en masse. Les impressions de l'utilisateur de travailler avec le site sont les plus susceptibles d'être affectées par le processeur lent et la faible capacité de mémoire - même si l'appareil est connecté à un réseau 4G assez rapide. Bien que les développeurs Web n'aient pas encore accès à des informations détaillées sur le processeur, les conseils des clients fournissent des informations approximatives sur la mémoire de l'appareil, sur la largeur et la densité de pixels de l'écran, sur le réseau et sur d'autres choses. Ces informations peuvent être utilisées pour développer une stratégie plus précise pour fournir des données optimisées au client.

▍ Respectez le plan tarifaire de l'utilisateur, compte tenu du contenu de l'en-tête Save-Data

Le navigateur Chrome pour Android dispose d'une option spéciale qui inclut l'enregistrement des données. Il permet aux utilisateurs qui souhaitent enregistrer du trafic de travailler dans un mode dans lequel le navigateur optimise automatiquement les ressources, en essayant d'accélérer le chargement des pages. L'optimisation comprend une compression d'images plus que d'habitude, retardant le chargement des ressources qui ne sont pas critiques, générant sur le serveur des images pour prévisualiser les pages. Voici le matériel où vous pouvez trouver des détails à ce sujet.

Lorsque les utilisateurs activent le mode d'enregistrement des données dans les navigateurs qui prennent en charge ce mode, les navigateurs attachent l'en - tête Save-Data aux requêtes HTTP et HTTPS. Le développeur du projet web peut, à l'aide de JavaScript, vérifier si la demande a un tel titre et, si c'est le cas, peut donner à l'utilisateur une version optimisée des matériaux du site. En conséquence, il s'avère que l'utilisateur abandonne intentionnellement les opportunités "dures", et le développeur répond simplement à son désir. Pour vérifier l'en-tête Save-Data dans la demande, vous pouvez utiliser quelque chose comme ce code:

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

Voici à quoi ressemble la version allégée de la page.


Version allégée de la page préparée par Google

Veuillez noter que bien qu'un simple téléphone bon marché puisse prendre en charge Chrome, cela ne garantit pas la disponibilité du mode d'enregistrement des données dans le navigateur. Il est préférable de considérer cette fonctionnalité comme quelque chose comme la fonctionnalité optionnelle optionnelle de certains navigateurs.

▍ Tirez la logique gourmande en ressources et les mécanismes de gestion de l'état des applications dans les travailleurs Web

Voici du bon matériel pour trouver des conseils sur l'accélération du chargement des applications Web sur les téléphones faibles.

Le thread principal du navigateur, en plus d'exécuter JavaScript, est occupé par d'autres choses importantes. Il s'agit de la formation de la mise en page, de l'affichage des pixels à l'écran, assurant l'interaction de l'utilisateur avec la page. Des opérations JavaScript longues et complexes peuvent bloquer le thread principal, ce qui signifie interférer avec la page.

Les travailleurs Web vous permettent d'exécuter du code JavaScript en arrière-plan et de ne pas bloquer le thread principal. Ils doivent être utilisés afin de supprimer la charge créée par les opérations JavaScript "lourdes" du thread principal. Parmi eux, la logique complexe des applications Web et leur gestion des états. Le thread principal et le thread de travail échangent des informations à l'aide de la fonction postMessage () et du gestionnaire d' événements onmessage . La fonction postMessage() permet à l'expéditeur d'envoyer une valeur au destinataire, qui pourrait être, par exemple, un objet JavaScript. Il existe des bibliothèques comme Comlink qui facilitent l'utilisation des travailleurs Web.

Voici le matériel où le travail du projet Proxx est étudié avec l'utilisation des flux de travailleurs et sans eux. Au cours de l'étude, il a été constaté que sans l'utilisation de travailleurs, une application qui effectue une certaine opération «se fige» sur le téléphone Nokia 2 (1 Go de mémoire, un processeur quadricœur avec une fréquence de 1,3 GHz) pendant 6,6 secondes. Dans les mêmes conditions, mais avec l'utilisation d'un travailleur, le temps de réaction du système n'est que de 48 ms. Par conséquent, si vous avez du code qui nécessite des ressources processeur importantes, vous devez vous demander si le portage vers un travailleur Web améliorera la situation.

▍ Optimiser les images

Les images contiennent souvent une très grande quantité de données liées aux pages Web. Dans le même temps, les images doivent non seulement être téléchargées. Ils doivent encore être décodés, préparés pour la sortie, ce qui peut fortement charger un appareil de faible puissance. Par conséquent, pour le développement de sites conçus pour les téléphones faibles, il est important de veiller à ce que les images utilisées sur ces sites soient de taille appropriée et soient correctement compressées. Voici quelques suggestions d'optimisation d'image:

1. Compressez les images à l' aide d'outils comme Imagemin. Ils vous permettent d'obtenir une réduction de la taille de l'image sans diminution notable de leur qualité.
2. Remplacez les GIF animés par des fichiers vidéo qui se chargent beaucoup plus rapidement. Mais, en ce qui concerne la vidéo, il convient de se demander si des supports lourds sont nécessaires sur un site conçu pour un simple téléphone bon marché.
3. Utilisez autant que possible les mécanismes de chargement paresseux des images. Comme ces mécanismes sont basés sur JavaScript, essayez de vous assurer que leur implémentation logicielle n'est pas trop «lourde». Vous trouverez ici le nouvel attribut de chargement standard utile.
4. Envoyez des images réactives de la bonne taille au client. Cela peut être fait en créant de nombreuses versions d'images et en donnant au client celles qui conviennent le mieux à son écran.
5. Utilisez des images adaptées à l'écran. La sortie de petites images suffisamment compressées pour un utilisateur travaillant sur un téléphone faible entraînera le décodage de ces images.

▍ Donnez au client des ressources qui correspondent à la taille d'écran de l'appareil

De nombreux appareils modernes qui peuvent être classés comme «téléphones intelligents» ont des écrans QVGA avec une résolution de 320x240 pixels, respectivement, horizontalement et verticalement. Si vous devez connaître la taille d'écran de l'appareil lors du chargement de la page (par exemple, pour utiliser certaines optimisations), vous pouvez utiliser quelque chose comme ce fragment de code:

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

Une approche similaire est utilisée dans le projet Proxx.

▍Testez des sites sur de vrais appareils ou dans l'émulateur

Si vous développez des sites conçus pour de simples téléphones bon marché, il est recommandé de les tester sur ces téléphones. Ils sont peu coûteux. Par exemple, un tweet qui dit que les développeurs qui vivent aux États-Unis et qui souhaitent tester leurs sites sur des appareils KaiOS sont invités à se rendre sur BestBuy et à obtenir un téléphone pour 15 $.


Téléphone bon marché pour tester des sites sur KaiOS

Si vous souhaitez émuler un téléphone similaire (par exemple, quelque chose comme un téléphone Jio fonctionnant sur KaiOS), vous pouvez utiliser les outils de développement Chrome pour cela:

• Ouvrez les outils de développement Chrome.
• Ouvrez la barre d'outils Device .
• Dans la barre d'outils de l' Device , ouvrez le menu de l'appareil et sélectionnez Edit . Dans la fenêtre qui apparaît, cliquez sur le bouton Add custom device .
• Nommez le nouvel appareil KaiOS (ou ce que vous voulez).
• Réglez la taille de l'écran sur 240x320 .
• Dans le champ User agent string , entrez ce qui suit: 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 .
• Enregistrez l'appareil en cliquant sur le bouton Add .
• Si nécessaire, activez le ralentissement du processeur, mais gardez à l'esprit qu'avec l'aide d'un émulateur, vous ne pourrez pas vérifier un site aussi bien que cela peut être fait en utilisant un véritable appareil.

Configurer un nouvel appareil dans Chrome Developer Tools

Résumé

Vous pouvez créer des sites qui seront pratiques pour absolument tous les utilisateurs mobiles, quel que soit leur lieu de résidence. Mais pour cela, le développeur doit faire quelques efforts, car les appareils mobiles de différentes catégories de prix sont très différents les uns des autres.

Plus le téléphone est abordable, plus il est probable qu'il puisse utiliser un processeur lent. Les performances des sites JavaScript dépendent de la vitesse de chargement du code et de la vitesse de son exécution. Cela devrait être considéré pour ceux qui veulent créer des sites qui fonctionnent bien sur n'importe quel appareil et sur n'importe quel réseau.

Tout ce dont nous avons parlé ci-dessus est important pour les smartphones, mais il l'est encore plus pour les téléphones simples et peu coûteux, pour les appareils de la classe des «téléphones fonctionnels», qui sont très populaires dans les pays en développement.

Chers lecteurs! Optimisez-vous vos projets Web pour les appareils mobiles faibles?