La hinchazón de JavaScript en 2024

El problema del tamaño de JavaScript

• No estaba muy al tanto del desarrollo frontend moderno, y recordaba artículos sobre la hinchazón web, con páginas que pesan varios megabytes.
• Me había quedado la impresión de que, si una página web promedio pesa 3 MB, entonces el bundle de JavaScript sería de alrededor de 1 MB.
• Hice un experimento para comprobar cuánto es en realidad.

Método

• Uso Firefox en macOS (debería ser igual en otros navegadores)
• Modo normal, no incógnito (quería ver los números dentro de la app y pensé que sería más cercano a la experiencia real)
• Todas las extensiones desactivadas
• Medición solo de JavaScript
• Sin comprimir
• Service workers activados (para una situación más realista)
• Todo el caché desactivado (carga desde cero)

Páginas de aterrizaje

• Ejemplo de una página típica con algo de interacción: Wikipedia, 0.2 MB
• Ejemplo de una página algo inflada: Linear, 3 MB
• Ejemplos de malas landing pages: Zoom, 6 MB; Vercel, 6 MB; Gitlab, 13 MB

Sitios web mayormente estáticos

• Difícilmente puede ser más simple que mostrar una pared de texto estático.
• Aun así, Medium necesita 3 MB solo para eso.
• Substack necesita 4 MB, Quora 4.5 MB, Pinterest 10 MB y Patreon 11 MB.

Búsqueda

• La interacción de la app se limita principalmente a buscar.
• StackOverflow necesita 3.5 MB, NPM 4 MB, Airbnb 7 MB y Booking.com 12 MB.
• Google necesita 9 MB para mostrar un simple campo de texto y una lista de enlaces.

Apps de una sola interacción

• Google Translate necesita 2.5 MB para dos cuadros de texto.
• ChatGPT necesita 7 MB para un solo cuadro de texto.

Video

• Loom necesita 7 MB y YouTube 12 MB.
• Pornhub, un sitio que sí se preocupa por el rendimiento, solo necesita 1.4 MB.

Audio

• Tanto SoundCloud como Spotify necesitan 12 MB.

Correo electrónico

• Google Mail necesita 20 MB.
• FastMail ofrece la misma funcionalidad y solo necesita 2 MB.

Productividad

• Todoist necesita 9 MB, Dropbox 10 MB, 1Password 13 MB y Trello 13.5 MB.
• Discord necesita 21 MB para chat.

Edición de documentos

• Google Docs necesita 13.5 MB y Notion 16 MB.

Redes sociales

• Twitter necesita 11 MB, Facebook 12 MB, TikTok 12.5 MB, Instagram 16 MB y LinkedIn 31 MB.

Categoría gigante

• Jira necesita casi 50 MB y Slack 55 MB.
• react.dev empieza en 2 MB al principio, pero puede crecer sin límite al hacer scroll.

¿Está empeorando cada vez más rápido?

• En 2015, el tamaño promedio de una página web se acercaba a la versión shareware de Doom 1 (2.5 MB).
• En 2024, Slack ocupa 55 MB, lo que equivale al tamaño original de Quake 1 solo en JavaScript.

¿Qué tan grande es 10 MB?

• 10 MB ya no se sienten tan grandes ni tan especiales.
• Asumiendo un promedio de 65 caracteres por línea, estamos enviando alrededor de 150,000 líneas de código por cada sitio web.
• Google Maps pesa unos relativamente modestos 4.5 MB para los estándares modernos.

Conclusión

• El tamaño de descarga no es el único problema.
• JavaScript es algo que el navegador debe parsear, mantener en memoria y ejecutar.
• Creo que el contenido debería superar al tamaño del código.
• Gitlab necesita 13 MB de código, más de 500K líneas de JS, para mostrar una landing page estática.

Opinión de GN⁺:

1. Un diagnóstico realista del estado actual del desarrollo web, que ayuda a entender el impacto del tamaño de JavaScript en la experiencia de usuario y el rendimiento.
2. Les recuerda a los desarrolladores frontend la importancia de la optimización y llama la atención sobre no usar más recursos de los necesarios.
3. Ofrece datos interesantes que pueden fomentar la discusión dentro de la comunidad de desarrolladores sobre el rendimiento de los sitios web.

[GN⁺]

Opiniones de Hacker News

• Los sitios web para adultos son en realidad un caso de uso donde sí se presta atención al rendimiento; Pornhub carga apenas 1.4MB de datos. Eso es muy superior al rendimiento que muestran algunas grandes tecnológicas. Pornhub casi nunca falla en lo básico de la UI/UX ni en la entrega de contenido.
• Al usar roaming en zonas rurales de Nueva Zelanda, la experiencia de usar la web fue muy incómoda. La experiencia de usuario (UX) offline de Spotify también necesita mejorar.
• Se cuestiona por qué se están viendo datos sin comprimir. Las apps dinámicas como Spotify y Gmail pueden ser perdonadas si permiten una navegación rápida después de cargar la página. Algunos sitios se enfocan demasiado en la carga inicial y terminan perjudicando la experiencia de usuario.
• El software refleja a la organización que lo creó. La mayor parte de la transferencia de datos no es JavaScript necesario para que la página funcione realmente, sino scripts de analítica y de terceros. El equipo de marketing desconoce estos temas o no le importan.
• Faltó un análisis del tamaño de los archivos JavaScript en las aplicaciones web. Por ejemplo, Google Translate no es una app de interacción simple y, aunque incluye muchas funciones, 2.5MB sigue siendo excesivo.
• Todas las páginas del sitio web Wordsandbuttons.online pesan menos de 64KB a pesar de sus animaciones e interactividad. Esto es gracias a una política sin dependencias de terceros.
• Hace falta discutir no solo el uso excesivo de JavaScript, sino también la cantidad de scripts de rastreo.
• Se compara la cantidad de JavaScript que cargan sitios populares. Por ejemplo, Pornhub carga cerca de 10 veces menos JavaScript que YouTube.
• El estado actual de la web es muy triste. Quienes usan conexiones de internet rápidas no se dan cuenta de lo lenta que se ha vuelto la web. Ya no se puede considerar no usar bloqueadores de anuncios/rastreadores.
• Se crean y mantienen frameworks complejos y abstracciones para facilitar el mantenimiento, pero muchos desarrolladores ni siquiera conocen los fundamentos de JavaScript. Se sobrediseñan las aplicaciones web y se construyen demasiadas capas que ocultan el lenguaje real. Aprender JavaScript en sí y usar JavaScript puro en vez de frameworks puede reducir enormemente el tamaño de una base de código JavaScript.