Carga rápida de páginas en los teléfonos más simples y baratos

Los teléfonos a los que se hace referencia en el título, en inglés, se llaman "teléfono con funciones". Se diferencian en capacidades extremadamente modestas. Además, son muy asequibles, ya que cuestan alrededor de $ 20-25. Se pueden comparar con las versiones lite de los teléfonos inteligentes modernos. Estos teléfonos permiten que cientos de millones de personas de países en desarrollo utilicen recursos web.


Jio Phone

Si el sitio se basa en tecnologías destinadas a garantizar la alta velocidad de su trabajo, entonces todos se beneficiarán de él, tanto los propietarios de teléfonos simples y baratos como aquellos que ven páginas web desde teléfonos inteligentes nuevos y potentes.

Resumen de la situación

Los dispositivos de los que estamos hablando, teléfono con funciones, son de bajo costo. Por lo tanto, tienen capacidades de hardware bastante débiles. Entonces, usan CPU lentas (por ejemplo, el procesador de un teléfono barato puede ser 6 veces más lento que el procesador de un teléfono inteligente superior). Instalan muy poca RAM (puede ser algo en el área de 256-512 MB, generalmente menos de 4 GB). Lo mismo se aplica a la cantidad de memoria interna para almacenar datos, que generalmente no supera los 4 GB. Tales teléfonos a menudo no tienen pantallas táctiles. En cambio, tienen teclados y joysticks simples utilizados para fines de navegación. El cdpv muestra cómo se vería un teléfono similar.

Estos teléfonos no pueden ejecutar código JavaScript tan rápido como los teléfonos inteligentes avanzados. Les resulta difícil mostrar sitios que contengan grandes cantidades de datos multimedia. Por lo tanto, al preparar las páginas que funcionarán bien en dichos teléfonos, debe abordar de manera responsable el problema de llenar estas páginas.


Los 10 mejores teléfonos inteligentes modernos: rendimiento del procesador (primer semestre de 2019)

Arriba están los resultados de un estudio de rendimiento de los 10 teléfonos inteligentes más vendidos en 2019. Este estudio se realizó utilizando el punto de referencia Geekbench 4. Aquí, en la parte superior, puede ver los resultados de las pruebas del popular teléfono económico: Nokia 3110.

El contenido de JavaScript de las páginas se ejecuta principalmente en modo de núcleo único (aquí vale la pena recordar que el código JS, por su naturaleza, es mucho más "único" del resto del contenido web), por lo tanto, el rendimiento de JavaScript está vinculado a las capacidades del procesador. Esto sugiere que al pensar en proyectos web para países en desarrollo, debe recordar las características de los dispositivos utilizados allí.

Este material está destinado a resolver el problema del desarrollo de sitios para dispositivos lentos. La aplicación de las técnicas descritas en él le permite crear sitios que sean convenientes para todos, sin importar cuán alto sea el rendimiento de sus teléfonos.

Información general

Quizás recuerdes esto, tal vez no, pero los teléfonos que llamamos teléfono con funciones fueron populares hasta mediados de la década de 2000, antes de la llegada y el uso generalizado de los teléfonos inteligentes. Estos fueron dispositivos compactos con un teclado en lugar de una pantalla táctil. Solo poseían una funcionalidad básica: hacer llamadas, enviar SMS, navegar por sitios web, centrados en el contenido de texto de las páginas. Desde la llegada de los teléfonos inteligentes, la cantidad de teléfonos móviles simples en los países desarrollados ha disminuido.

En los países en desarrollo, no todos pueden pagar un teléfono inteligente y una tarifa 4G ilimitada. Este mercado ha sido tomado por dispositivos llamados teléfonos con funciones inteligentes. Combinan el hardware y el precio de un teléfono móvil simple con algunas características específicas de los teléfonos inteligentes.


Teléfonos baratos

El mercado de teléfonos baratos con capacidades de teléfonos inteligentes ha crecido significativamente desde 2017. Se espera que en 2019 se venderán alrededor de 400 millones de dispositivos de este tipo en todo el mundo.

El crecimiento del mercado de teléfonos de bajo costo fue facilitado por el hecho de que Nokia revivió sus viejos modelos populares, como el Nokia 3110 y 8110 ( aquí hay una guía para depurar páginas web en el Nokia 8110 con KaiOS). En la India, los teléfonos Reliance Jio ofrecen a sus usuarios un acceso móvil barato y moderno a los recursos web. Jio ha contribuido al desarrollo de KaiOS , un sistema operativo basado en Linux diseñado para teléfonos simples y asequibles.

El creciente mercado de teléfonos simples ha creado la necesidad de sitios que puedan funcionar de manera efectiva en dichos dispositivos. Para desarrollar dichos sitios, debe tener en cuenta algunas restricciones.


Varios proyectos diseñados para teléfonos de bajo costo.

La imagen anterior muestra las pantallas de los proyectos Google Images Lite y Facebook mBasic. Estos proyectos se cargan rápidamente en teléfonos simples; se basan en las capacidades de script del cliente al mínimo. Otra captura de pantalla es el juego Proxx , que, aunque depende en gran medida de los scripts, utiliza una separación de código agresiva para acelerar la carga.

Limitaciones de los teléfonos económicos

Los usuarios de teléfonos de gama baja en los países en desarrollo están limitados por tres factores:

• Una pequeña cantidad de dispositivos económicos de alta calidad.
• Inaccesibilidad de las redes de comunicación de alta velocidad.
• Alto costo de transferencia de datos.

Estas limitaciones deben recordarse para aquellos que desean sintonizar con la percepción del desarrollo web a través del "prisma de la función de teléfono". Si hablamos con más detalle sobre las limitaciones de dichos teléfonos y el entorno en el que se usan, obtenemos lo siguiente:

1. Hardware Los teléfonos simples generalmente tienen un procesador de un solo núcleo o doble núcleo más lento (algo así como 1.1 GHz) y menos de 512 MB de RAM. Para comprender cómo esto limita las capacidades de los dispositivos, compárelo con un procesador de múltiples núcleos y un iPhone XS de 4 GB de RAM.
2. Transferencia de datos. Los planes móviles son cada vez más baratos, pero en las regiones donde se pueden distribuir teléfonos de bajo costo, los planes siguen siendo muy limitados. Esto significa que al desarrollar páginas diseñadas para teléfonos con funciones, debe esforzarse por reducir lo más posible la cantidad de datos que contienen estas páginas. Esto permitirá que los sitios, en primer lugar, se carguen más rápido y, en segundo lugar, reduzca el costo de visitar dichos sitios para los usuarios.
3. Tamaño de pantalla limitado. El tamaño de la pantalla de un teléfono económico suele ser mucho más pequeño que el tamaño de la pantalla de un teléfono inteligente. Estamos hablando de una pantalla con una diagonal de aproximadamente 2,4 pulgadas. Dichas pantallas le permiten mostrar solo un número muy limitado de elementos. Esto significa que el desarrollador del sitio debe esforzarse por descargar exactamente lo que se mostrará en la pantalla lo antes posible.
4. La falta de una pantalla táctil. Si el dispositivo no está equipado con una pantalla táctil, esto significa que todo lo que el usuario pueda interactuar debería ser fácilmente accesible al trabajar con la página usando el teclado. No debe mostrar en la página demasiados elementos con los que pueda trabajar.
5. Teclados En los teléfonos de bajo costo, se usan teclados de hardware, que son completamente diferentes de los teclados QWERTY en pantalla familiares para los propietarios de teléfonos inteligentes. El teclado de hardware tiene aproximadamente 15 teclas, con múltiples teclas presionadas para ingresar algunos caracteres. Como resultado, resulta que en términos de UX vale la pena esforzarse por minimizar la necesidad de ingresar texto.

Cabe señalar que incluso en Japón, los planes tarifarios limitados afectan la usabilidad de los usuarios con recursos web.


Tiempo de carga de página para dispositivos 4G en Japón

Arriba hay una imagen de este tweet, que dice que en Japón a finales de mes, las páginas se cargan más lentamente debido a las restricciones del plan de tarifas.

Pautas de diseño de sitios web

Las siguientes pautas pueden ayudarlo a diseñar sitios que funcionarán rápidamente en teléfonos simples y económicos. En general, se puede observar que no se recomienda que el usuario espere la descarga de algo que no solicitó explícitamente. Siempre que sea posible, debe esforzarse por reducir el tiempo que lleva cargar y ejecutar código JavaScript.

▍ Establezca límites en la cantidad de datos transferidos cuando carga el sitio por primera vez

En el camino del servidor al cliente, cada byte de su página pasa por muchos cuellos de botella. Estas son redes lentas y poco confiables, estos son procesadores lentos. La única forma garantizada de aumentar el rendimiento de las páginas es planificar estrictamente su volumen y cumplir (e incluso llenar en exceso) los planes.

Los objetivos de rendimiento de la página están establecidos por las restricciones que el equipo de desarrollo se esfuerza por proporcionar un rendimiento decente para su proyecto. Estas son las limitaciones de las métricas más allá de las cuales se decidió no ir más allá. Establecer tales restricciones en los indicadores que se pueden medir, y establecer restricciones hechas antes del inicio del trabajo ayuda al equipo a garantizar que el desempeño del proyecto se encuentre dentro del marco dado cuando se le agreguen nuevas capacidades.

Los ejemplos de métricas de recursos que pueden limitarse incluyen el tamaño del paquete de JavaScript, el tamaño de la imagen en bytes y el número de solicitudes HTTP. Las limitaciones en las métricas que afectan la forma en que los usuarios perciben las páginas se pueden establecer para métricas como la primera pintura con contenido , la pintura con mayor contenido o la primera demora de entrada . Le permiten evaluar qué tan rápido el usuario ve la página y qué tan pronto puede interactuar con ella. Puede establecer valores de umbral para dichos indicadores, en función de las características de la audiencia objetivo del sitio.

Puede desarrollar un sistema de restricciones con respecto a su propio código de aplicación, así como con respecto a los scripts de terceros y otras cosas por el estilo. Las restricciones pueden verificarse durante la construcción del proyecto , utilizando Lighthouse (LightWallet), en un sistema de integración continua .

▍ Use el patrón PRPL

PRPL es un patrón recomendado por el equipo de desarrollo de Chrome para la descarga gradual de código. Está diseñado para garantizar que las aplicaciones que lo utilizan se vuelvan interactivas lo más rápido posible en dispositivos de bajo costo y redes lentas. El patrón PRPL fomenta la precarga de la cantidad mínima de código JS necesaria para que la página funcione. Los recursos se cargan utilizando técnicas de carga diferida. Si es necesario, puede utilizar el trabajador de servicio para almacenar previamente los recursos de JavaScript necesarios para futuras interacciones con el sitio.

El patrón PRPL-50 establece un límite en la cantidad de recursos cargados inicialmente igual a 50 Kb. Dado que los teléfonos de bajo costo tienen recursos de hardware muy modestos, debe establecer restricciones aún más estrictas. Aquí le aconsejaría que considere el patrón PRPL-30. 30 es 30 Kb de recursos de origen, este es el tamaño del paquete comprimido y minificado cargado en la primera carga de la página.


Ejemplo de asignación de espacio en un paquete JS de 30 Kb. Esto incluye la lógica de la aplicación, el código del marco, las utilidades auxiliares y las dependencias de terceros.

Con este enfoque, el primer byte de materiales del sitio de un buen servidor de almacenamiento en caché de borde, después de que se complete el procedimiento de conexión SSL, llegará al dispositivo en aproximadamente 2 segundos. Esto nos da 3 segundos para descargar los materiales de la ruta original, mostrarlos y preparar la página para la interacción del usuario. Para proyectos basados ​​en JavaScript, esto significa que el tamaño total del paquete comprimido y minificado cargado en la salida de la primera página no debe exceder los 30 Kb.


El uso del patrón PRPL-30 permite al desarrollador llevar la página al modo interactivo en un teléfono barato en aproximadamente 5 segundos

Quizás esto sorprenda a alguien: “¿De qué estamos hablando? Tamaño del paquete original de 30 Kb? Es extraño ¡Después de todo, ni siquiera encajaré React y el código de la aplicación en este volumen! ”Cabe señalar que cuando se desarrollan sitios diseñados para dispositivos realmente débiles, el creador del proyecto, por conveniencia del usuario, tendrá que hacer compromisos difíciles. Por ejemplo, React se puede usar para sitios de teléfonos con funciones, ya sea si el uso de React se limita a la representación del servidor (1), que suena bastante razonable, o si (2) los fragmentos de código que contienen la lógica de la aplicación son muy, muy pequeños y esto si en su preparación aplicará las reglas más severas de carga diferida. Hay una tercera opción: elegir un análogo ligero React como Preact (3). Hablaremos más sobre tales compromisos a continuación.

Un ejemplo de una aplicación creada con el límite de 30 Kb es Proxx . El conjunto de datos inicial del proyecto tiene un tamaño de 25 Kb, difiere según el indicador TTI (Tiempo para interactuar), que es inferior a 5 segundos. Aquí hay una calculadora que puede usar para encontrar objetivos para proyectos web y seleccionar sus propias limitaciones.

El tamaño recomendado para las rutas cargadas en modo diferido no supera los 35 Kb. Pero los "fragmentos", cuyo tamaño está en el rango de 30-35 Kb, también son lo suficientemente grandes como para hablar sobre su procesamiento en paralelo usando las capacidades del V8 para transmitir el trabajo con scripts.

▍ Guardar recursos de JavaScript

Si hablamos de guardar recursos de JavaScript en pocas palabras, resulta que puede usar la representación estática o la representación del servidor con una participación mínima de los scripts del cliente. Si es completamente imposible prescindir del renderizado de cliente o híbrido, solo los scripts necesarios para una ruta en particular deben enviarse al cliente, y es mejor hacerlo para la menor cantidad posible de sesiones de transferencia de datos. Aquí puede considerar técnicas como la preparación progresiva de la página para trabajar en el navegador .


Renderizado estático

JavaScript es el principal cuello de botella de los teléfonos simples

Al desarrollar proyectos interactivos para teléfonos baratos, tenga en cuenta que JavaScript suele ser el principal obstáculo para el alto rendimiento de la página. Esto es importante, ya que la rapidez con que el usuario puede usarlos depende de cómo se decida renderizar las páginas . Incluso si trabaja con ellos usando un joystick del teléfono. Si decide utilizar la representación estática o del lado del servidor, intente que la cantidad de código JS necesaria para organizar el trabajo interactivo de la página sea lo más pequeña posible.

Entrada de URL; cargar resultados de representación del servidor; cargar el código JavaScript necesario para llevar la página al modo interactivo; página lista para la interacción del usuario

El precio de JavaScript consta de dos indicadores: el tiempo de carga y el tiempo de ejecución del código. Una red lenta (por ejemplo, una conexión 3G estable) puede aumentar el tiempo de arranque de JS. Un procesador lento aumentará el tiempo requerido para ejecutar el script. La siguiente figura muestra el tiempo requerido para que varios dispositivos procesen el código JavaScript del popular recurso reddit.com. Es fácil ver que un dispositivo lento (Alcatel 1X 5059D) tarda 6 veces más que uno rápido (Pixel 3).


El tiempo requerido para que diferentes dispositivos procesen el código JS de un sitio popular

Si la representación de la página o el proceso de llevarla al modo interactivo depende en gran medida de JavaScript, esto puede llevar al hecho de que el usuario de un teléfono económico tendrá que esperar 30-60 segundos solo para tener la oportunidad de trabajar con la interfaz de usuario. Como resultado, para minimizar el tiempo requerido para cargar y procesar JavaScript, el desarrollador debe usar los scripts con moderación y descargar el código solo para aquellas rutas y componentes que el usuario pueda necesitar. Debe hacer esto cuando sea necesario el código apropiado.

Esforzarse por minimizar la cantidad de código necesario para llevar la página de forma interactiva

Aquí hay algunos consejos para ayudar a minimizar la cantidad de código que necesita para proporcionar las funciones interactivas de sus páginas:

1. Use mecanismos de carga diferida lo más ampliamente posible. Estamos hablando de rutas, componentes, recursos que están fuera del área visible de la pantalla, sobre lo que no se puede llamar extremadamente importante para garantizar la salud de la página.
2. Use mecanismos de división de código para dividir el código JavaScript en partes y descargar solo lo que el usuario necesita cuando trabaja con la ruta inicial. Esto conducirá a una carga de página más rápida al reducir la cantidad de scripts cargados y procesados.
3. Elimine el código no utilizado de los paquetes de JavaScript para reducir su tamaño tanto como sea posible. Para hacer esto, necesitará analizar el paquete e identificar aquellas bibliotecas que no se utilizan en absoluto, y aquellas que pueden reemplazarse por algo más compacto, adaptado a las necesidades de su proyecto. Las bibliotecas que no se utilizan cuando se carga la página por primera vez se pueden cargar en modo diferido.
4. Considere usar mecanismos de carga de código diferencial . Esto le permitirá proporcionar código JavaScript moderno a los navegadores modernos, deshacerse del uso excesivo del código transpilado y evitar los rellenos múltiples. Reducir el código para navegadores antiguos puede mejorar el rendimiento del código en los navegadores modernos.
5. Si el código JS es absolutamente necesario para representar la página y mostrar su interfaz en modo interactivo, organice una carga preliminar de los scripts necesarios. El atributo correspondiente, como se muestra a continuación, le dice al navegador que el script es importante y que debe descargarse lo más rápido posible.

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

▍ Elija cuidadosamente la pila de tecnologías utilizadas

Marco y utilidades

Si bien el uso de bibliotecas de terceros puede acelerar el desarrollo y simplificar la solución de problemas complejos, las bibliotecas pueden tener un tamaño considerable. Deben usarse con precaución al desarrollar proyectos diseñados para dispositivos débiles. Aquí hay algunas pautas para usar dependencias externas:

1. Los teléfonos económicos son muy limitados en recursos. Por lo tanto, si es posible, evite usar marcos JS o limite su uso. El propósito de este consejo es dejar el mayor espacio posible para la lógica de la aplicación. En una situación en la que un desarrollador busca limitar el uso de JavaScript para reducir el tamaño de la página y aumentar su rendimiento, los marcos JS pueden sobrecargar la página en exceso. Si el proyecto se basa en React, considere limitar el uso de esta biblioteca a la representación del servidor, o considere cambiar a Preact y usar preact-compat durante la compilación para reducir el tamaño del paquete en aproximadamente 30 Kb. En aras de la creación de paquetes de luz, tiene sentido mirar tecnologías como Svelte , lit-html y JavaScript simple.
2. Intente asegurarse de que las dependencias de terceros ocupen el menor espacio posible. Esto garantizará que los tamaños de los paquetes utilizados durante la carga inicial de la página se ajusten a los límites especificados. Para analizar la contribución al tamaño de los paquetes realizados por bibliotecas de terceros, puede usar bundlephobia.com . Analice críticamente la composición de sus paquetes para determinar si su espacio se está utilizando de manera eficiente. Por ejemplo, en lugar de la biblioteca Moment.js, que contiene, en forma estándar, grandes cantidades de datos relacionados con los estándares nacionales, puede usar date- fns o luxon .
3. Tenga mucho cuidado cuando use Redux y los repositorios integrados de Redux que se usan para administrar el estado de la aplicación. Los datos del repositorio de Redux a menudo se incrustan en HTML para que puedan usarse para hacer que las páginas funcionen. Esto puede conducir fácilmente a un aumento excesivo en el tamaño de los datos enviados por el servidor en respuesta a las solicitudes de los clientes.

▍ Adapte los materiales del sitio para no cargar recursos voluminosos en conexiones lentas

Inmediatamente quiero aconsejarle que eche un vistazo a este material sobre la adaptación de recursos basados ​​en dispositivos débiles.


La carga adaptativa de recursos depende de la velocidad de conexión de red

La carga adaptativa de recursos es una técnica de "adaptación" de materiales enviados al usuario en función de la información sobre el tipo de conexión efectiva (ECT) disponible para el navegador a través de la API de información de red . Así es como se ve trabajar con esta API:

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

La carga adaptativa permite a los sitios garantizar que los usuarios que trabajan en conexiones lentas puedan obtener casi la misma experiencia de interactuar con recursos que los usuarios que tienen acceso a redes más rápidas. Quizás en la versión "lenta" del sitio no todo será tan hermoso como en la versión "rápida", pero este es un pago aceptable por un buen rendimiento.

Tenga en cuenta que incluso en una conexión 4G "rápida", los usuarios pueden encontrar bajas velocidades de transferencia de datos. Quizás te hayas encontrado con algo como esto, usando Internet WiFi en un restaurante o en alguna conferencia.

Considere un ejemplo específico de uso de carga de material adaptativo. Se tratará del componente que representa un determinado producto en el sitio. Un usuario que trabaje en una conexión lenta verá una versión comprimida de la imagen del producto. Y cualquiera que vaya a Internet a alta velocidad verá una imagen de alta calidad y, además, podrá usar funciones adicionales que requieren una gran cantidad de código JavaScript para implementarse. Por ejemplo, esta es la capacidad de aumentar la imagen del producto, o para ver, en el "carrusel", varias fotos del producto.

En el caso de los teléfonos baratos, una red lenta no es necesariamente el principal obstáculo para enviarles recursos a granel. Las impresiones del usuario de trabajar con el sitio probablemente se verán afectadas por un procesador lento y una baja capacidad de memoria, incluso si el dispositivo está conectado a una red 4G bastante rápida. Aunque los desarrolladores web aún no tienen acceso a información detallada sobre el procesador, los consejos para clientes brindan información aproximada sobre la memoria del dispositivo, sobre el ancho y la densidad de píxeles de la pantalla, sobre la red y sobre otras cosas. Esta información se puede utilizar para desarrollar una estrategia más precisa para entregar datos optimizados al cliente.

▍ Respete el plan de tarifas del usuario, teniendo en cuenta el contenido del encabezado Guardar datos

El navegador Chrome para Android tiene una opción especial que incluye guardar datos. Permite a los usuarios interesados ​​en ahorrar tráfico trabajar en un modo en el que el navegador optimiza automáticamente los recursos, tratando de acelerar la carga de la página. La optimización incluye una compresión de imágenes superior a la habitual, retrasando la carga de recursos que no son críticos y generando en el servidor imágenes para previsualizar páginas. Aquí está el material donde puede encontrar detalles sobre esto.

Cuando los usuarios habilitan el modo de ahorro de datos en los navegadores que admiten este modo, los navegadores adjuntan el encabezado Guardar datos a las solicitudes HTTP y HTTPS. El desarrollador del proyecto web puede, usando JavaScript, verificar si la solicitud tiene un título similar y, de ser así, puede darle al usuario una versión optimizada de los materiales del sitio. Como resultado, resulta que el usuario abandona intencionalmente las oportunidades "difíciles", y el desarrollador simplemente cumple su deseo. Para verificar el encabezado Save-Data en la solicitud, puede usar algo como este código:

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

Así es como se ve trabajar con la versión lite de la página.


Versión ligera de la página preparada por Google

Tenga en cuenta que aunque un teléfono simple y barato puede admitir Chrome, esto no garantiza la disponibilidad del modo de ahorro de datos en el navegador. Es mejor considerar esta característica como algo así como la funcionalidad opcional opcional de algunos navegadores.

▍ Incorporar mecanismos de gestión de estado de aplicación y lógica intensivos en recursos a los trabajadores web

Aquí hay un buen material para encontrar consejos sobre cómo acelerar la carga de aplicaciones web en teléfonos débiles.

El hilo principal del navegador, además de ejecutar JavaScript, está ocupado con otras cosas importantes. Esta es la formación del diseño de la página, la visualización de píxeles en la pantalla, asegurando la interacción del usuario con la página. Las operaciones largas y complejas de JavaScript pueden bloquear el hilo principal, lo que significa interferir con la página.

Los trabajadores web le permiten ejecutar código JavaScript en segundo plano y no bloquear el hilo principal. Deben usarse para eliminar la carga creada por operaciones JavaScript "pesadas" del hilo principal. Entre ellos se encuentra la lógica compleja de las aplicaciones web y su gestión de estado. El subproceso principal y el subproceso de trabajo intercambian información mediante la función postMessage () y el controlador de eventos onmessage . La función postMessage() permite al remitente enviar un valor al receptor, que podría ser, por ejemplo, un objeto JavaScript. Hay bibliotecas como Comlink que facilitan el uso de trabajadores web.

Aquí está el material donde se estudia el trabajo del proyecto Proxx con el uso de flujos de trabajadores y sin ellos. Durante el estudio, se descubrió que sin el uso de trabajadores, una aplicación que realiza una determinada operación se "congela" en el teléfono Nokia 2 (1 GB de memoria, un procesador de cuatro núcleos con una frecuencia de 1.3 GHz) durante 6.6 segundos. En las mismas condiciones, pero con el uso de un trabajador, el tiempo de reacción del sistema es de solo 48 ms. Como resultado, si tiene un código que requiere recursos de procesador serios, debe considerar si portarlo a un trabajador web mejorará la situación.

▍ Optimizar imágenes

Las imágenes a menudo tienen una gran cantidad de datos relacionados con páginas web. Sin embargo, las imágenes no solo necesitan cargarse. Todavía necesitan ser decodificados, preparados para la salida, y esto puede cargar mucho un dispositivo de baja potencia. Como resultado, para el desarrollo de sitios diseñados para teléfonos débiles, es importante esforzarse por garantizar que las imágenes utilizadas en estos sitios tengan el tamaño adecuado y se compriman adecuadamente. Aquí hay algunas sugerencias para la optimización de imágenes:

1. Comprima imágenes utilizando herramientas como Imagemin. Le permiten lograr una reducción en el tamaño de la imagen sin una disminución notable en su calidad.
2. Reemplace los GIF animados con archivos de video que se carguen mucho más rápido. Pero, cuando se trata de video, vale la pena considerar si se necesitan medios pesados ​​en un sitio diseñado para un teléfono simple y barato.
3. Utilice siempre que sea posible mecanismos de carga diferida de imágenes. Dado que dichos mecanismos se basan en JavaScript, intente asegurarse de que su implementación de software no sea demasiado "pesada". Aquí puede encontrar útil el nuevo atributo de carga estándar.
4. Envíe imágenes receptivas del tamaño correcto al cliente. Esto se puede hacer creando muchas versiones de imágenes y dándole al cliente las que mejor se adapten a su pantalla.
5. Use imágenes que se ajusten a la pantalla. La salida de imágenes pequeñas suficientemente comprimidas a un usuario que trabaja en un teléfono débil conducirá al hecho de que dichas imágenes serán más rápidas de decodificar.

▍ Proporcione al cliente recursos que coincidan con el tamaño de pantalla del dispositivo

Muchos dispositivos modernos que pueden clasificarse como "teléfonos con funciones inteligentes" tienen pantallas QVGA con una resolución de 320x240 píxeles, respectivamente, horizontal y verticalmente. Si necesita averiguar el tamaño de pantalla del dispositivo al cargar la página (por ejemplo, para usar ciertas optimizaciones), puede usar algo como este fragmento de código:

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

Un enfoque similar se utiliza en el proyecto Proxx.

▍ Sitios de prueba en dispositivos reales o en el emulador

Si está desarrollando sitios diseñados para teléfonos simples y baratos, se recomienda probarlos en dichos teléfonos. Son de bajo costo. Por ejemplo, un tweet que dice que los desarrolladores que viven en los EE. UU. Y desean probar sus sitios en dispositivos KaiOS deben ir a BestBuy y obtener un teléfono por $ 15.


Teléfono económico para probar sitios en KaiOS

Si desea emular un teléfono similar (por ejemplo, algo así como un teléfono Jio que se ejecuta en KaiOS), puede usar las herramientas de desarrollador de Chrome para esto:

• Abre las Herramientas para desarrolladores de Chrome.
• Abra la barra Device herramientas del Device .
• En la barra Device herramientas Device , abra el menú del dispositivo y seleccione Edit . En la ventana que aparece, haga clic en el botón Add custom device .
• Nombra el nuevo dispositivo KaiOS (o lo que quieras).
• Establezca el tamaño de la pantalla en 240x320 .
• En el campo User agent string , ingrese lo siguiente: 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 .
• Guarde el dispositivo haciendo clic en el botón Add .
• Si es necesario, habilite la desaceleración del procesador, pero tenga en cuenta que con la ayuda de un emulador no podrá verificar un sitio tan bien como se puede hacer usando un dispositivo real.

Configurar un nuevo dispositivo en Chrome Developer Tools

Resumen

Puede crear sitios que sean convenientes para que trabajen absolutamente todos los usuarios móviles, independientemente de dónde vivan. Pero para esto, el desarrollador debe hacer algunos esfuerzos, ya que los dispositivos móviles de diferentes categorías de precios son muy diferentes entre sí.

Cuanto más asequible sea el teléfono, mayor será la probabilidad de que pueda usar un procesador lento. El rendimiento de los sitios JavaScript depende de la velocidad de carga del código y la velocidad de su ejecución. Esto debe considerarse para aquellos que desean crear sitios que funcionen bien en cualquier dispositivo y en cualquier red.

Todo lo que mencionamos anteriormente es importante para los teléfonos inteligentes, pero todo esto es aún más importante para los teléfonos simples de bajo costo, para los dispositivos de la clase de "teléfono con funciones", que son muy populares en los países en desarrollo.

Estimados lectores! ¿Optimizas tus proyectos web para dispositivos móviles débiles?