Rendimiento web: El caso africano

Rate this content
Bookmark

A menudo asumimos que todos tienen una buena conexión a Internet y hardware con altas especificaciones. Si bien esto puede ser cierto en algunas regiones, no es el caso en todo el mundo. Quiero llamar la atención sobre África, donde muchos países luchan con conexiones 3G deficientes que son costosas, dependiendo de la cantidad de datos consumidos. Esto se debe a la infraestructura limitada del continente, lo que lleva a depender de las conexiones móviles.


Dadas estas circunstancias, el uso eficiente de datos con un buen rendimiento web se vuelve una prioridad. Por lo tanto, nuestra sesión se centrará en los desafíos que enfrentan los usuarios y desarrolladores africanos, y cómo la descarga de grandes cantidades de JavaScript está exacerbando el consumo de datos y los problemas de rendimiento. Exploraremos cómo los marcos existentes intentaron resolver el problema y cómo Qwik, con su enfoque innovador de resumibilidad, presenta una solución transformadora a estos desafíos. A diferencia de las aplicaciones de página única tradicionales, la resumibilidad de Qwik reduce drásticamente la carga inicial de JavaScript, lo que permite que las aplicaciones se vuelvan interactivas más rápidamente, incluso en conexiones lentas.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Ayoub Alouane
Ayoub Alouane
22 min
17 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discutió el rendimiento web y la penetración de Internet en África, destacando los desafíos de los planes de datos limitados y los dispositivos menos potentes. Se enfatizó la importancia de considerar la accesibilidad a Internet al desarrollar sitios web, ya que los sitios web de carga lenta pueden resultar en críticas negativas y clientes perdidos. Se exploró el concepto de resumibilidad, que entrega solo el JavaScript necesario para mejorar el rendimiento, junto con la implementación del marco QUIC para lograr esto. También se discutió el marco QUIC en términos de ejecución perezosa y su capacidad para mejorar el rendimiento del sitio web y el consumo de recursos.
Available in English: Web Performance: The African Case

1. Web Performance and Internet Penetration in Africa

Short description:

Hoy hablaremos sobre el rendimiento web y el caso africano. La penetración de Internet en África es baja, especialmente en las regiones centrales y orientales. La mayoría de los africanos dependen de dispositivos móviles para acceder a Internet y tienen que pagar por cada megabyte consumido. Consideremos el precio de 15 gigabytes al mes, que se puede consumir fácilmente en unos pocos días. El tráfico web en África se comparte principalmente a través de dispositivos móviles.

Mi nombre es Eyo Belwen, soy el CTO de la Academia en Servio. Y hoy hablaremos sobre tecnología inclusiva. Antes de comenzar nuestra charla, será genial tener algo de contexto en África y cómo es la penetración de Internet allí. Comenzaremos con un gráfico aquí que muestra la penetración de Internet por región. Podemos ver en el medio el promedio mundial. El promedio mundial está entre el 60% y el 70%. Y podemos ver que Sudáfrica y el norte de África lo están haciendo bien. Cuando hablamos del norte de África, generalmente nos referimos a Marruecos, Argelia, Túnez. En el sur de África, se refiere a Sudáfrica. Pero podemos ver en el medio, África y el este, no lo están haciendo tan bien. Entonces, podemos ver que no hay penetración de Internet allí. Bien. Y no solo eso, podemos ver aquí con este gráfico que el tráfico web allí se comparte, podemos ver en este gráfico, el tráfico web compartido por tipo de dispositivo en África. Entonces, aquí lo que podemos ver es que la mayoría de los africanos allí dependen de dispositivos móviles. El 75% utiliza dispositivos móviles para acceder a Internet. Entonces, ¿por qué estoy hablando de esto? Lo que podemos ver aquí es que no hay fibra óptica, por ejemplo. Entonces, todos usarán su teléfono móvil para acceder a Internet. Y el problema aquí es que él debe pagar por cada megabyte que consuma. No es como usar ADCEL y tener internet limitado con ADCEL o fibra óptica. Solo son dispositivos móviles por los que debes pagar por cada megabyte que consumas. Bien. Y podemos ver aquí, por ejemplo, el precio de 15 gigabytes por mes. Entonces, imaginemos que todos usarán solo 15 gigabytes al mes. Y cuando hablamos de 15 gigabytes, creo que, por ejemplo, una hora de video de YouTube, tomará entre 500 megabytes y 1 gigabyte. Bien. Entonces, imagina si alguien está usando 15 gigabytes, no le durará mucho. Lo consumirá tal vez en tres o

2. Internet Accessibility Challenges in Africa

Short description:

En muchos países africanos, el precio de 15 gigabytes de internet al mes es equivalente o incluso mayor que el salario mínimo. Esto dificulta que las personas puedan pagar el acceso a Internet. Mientras que en Europa y Estados Unidos, el acceso ilimitado a Internet es común, en otras partes del mundo, las personas tienen que pagar por cada megabyte de datos. Por lo tanto, al desarrollar sitios web, debemos tener en cuenta las limitaciones que enfrentan los usuarios en estas regiones, como planes de datos limitados y dispositivos menos potentes.

cinco días. Y podemos ver aquí con este gráfico también el salario mínimo. Por ejemplo, podemos tomar Burkina Faso. El precio de 15 gigabytes al mes es casi el precio del salario mínimo allí. Entonces, debería pagar todo su salario para consumir solo 15 gigabytes al mes. Puedes ver conmigo, por ejemplo, Cabo Verde. El salario mínimo es tres veces el precio de 15 gigabytes de internet. Togo, es lo mismo. Y podemos ir más lejos. Por ejemplo, si vemos países como Zimbabwe o Malawi, podemos ver que el precio, por ejemplo, en Guinea Ecuatorial, el precio de 15 gigabytes de internet al mes es tres veces el salario mínimo. Entonces, para pagar 15 gigabytes al mes, debería pagar tres meses de salario. Eso no es bueno. Entonces, ¿por qué estoy hablando de esto? Estoy hablando de esto porque en el performance web, a veces en Europa o en Estados Unidos, no nos importa el internet que usamos porque es ilimitado. Vale. Entonces, no nos importa cuando estamos haciendo nuestros sitios web sobre el JavaScript que debemos entregar al lado del cliente sobre la optimización porque no necesitamos eso. Tenemos 5G o tenemos fibra óptica. Entonces, no necesitamos hacer eso. Pero en otras partes del mundo, hay personas que se preocupan por cada megabyte de internet porque están pagando su dinero por eso. Y cuando decimos pagar su dinero, no es una cosa pequeña, sino que es su salario. Entonces, por ejemplo, aquí, alguien en Zimbabwe no va a consumir 15 gigabytes al mes. Solo consumirán tal vez 500 megabytes o nada. Entonces, la forma en que estoy hablando de esto es que cuando intentamos trabajar en nuestros sitios web, debemos pensar en otras personas, no solo en Europa o Estados Unidos, sino que hay otras partes en el mundo de las que debemos preocuparnos cuando trabajamos en nuestros sitios web. Aquí, por ejemplo, podemos ver estadísticas sobre los teléfonos utilizados en África. Entonces, puedes ver que Apple, por ejemplo, no se usa mucho allí. Entonces, por ejemplo, en Zimbabwe, Nigeria, no es ni siquiera el 5% o el 3%. Vale. Y los teléfonos más utilizados son los teléfonos asequibles como Tecno, E-Tel, Xiaomi, Huawei y Samsung asequibles. Esa es la mayoría que la gente usa allí. Entonces, por qué digo eso es porque cuando usas un iPhone o un Samsung Ultra o algo así, no te importan los recursos porque estos teléfonos tienen una buena configuración de hardware. Vale. Entonces, cuando usas Google Chrome, usas algunas aplicaciones. No te importa el

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.