Como seguramente sabrás el uso de JavaScript ha crecido exponencialmente en los últimos tiempos, sin embargo, su uso exagerado está haciendo que muchas webs se vuelvan lentas.
¿De dónde viene el coste de JavaScript?
Hoy en día, las páginas webs están cargadas de código JavaScript que permite añadir gran cantidad de dinamismo, eventos, acciones, validaciones y en definitiva a crear grandes diseños, fluidos y personalizados. Sin embargo, todo esto no viene de gratis, sino que tiene un coste que presenta dos patas:
- El coste de descargar el código JavaScript
- El coste de parsear y ejecutar el código JavaScript
En lo relativo al coste de descargar el código, es una característica que comparte con otros recursos como las imágenes o las hojas de estilo CSS.
¿Por qué parsear y ejecutar el código JavaScript es lento?
En primer lugar, el código JavaScript que se carga en una página web se ejecuta en el lado del cliente, esto quiere decir que será el dispositivo del cliente el que tenga que ejecutarlo. Esto siempre es un problema, al ser un entono que no controlas y no puedes modificar.
Cuando desarrollas, normalmente sabes la plataforma sobre la que se va a levantar el desarrollo y además conoces las posibles capacidades de ampliación y escalado (más cores, más memoria, más servidores). Sin embargo, tus clientes pueden usar el servicio desde móviles, tablets, portátiles o equipos de sobremesa muy diversos. Además, no es lo mismo un equipo de escritorio reciente, que un móvil de gama media/baja de hace tres o cuatro años. Por ello, es muy importante que midas y hagas pruebas con dispositivos de gama media y baja, ahí verás que ese código JavaScript que vuela en tu equipo, se arrastra en el dispositivo de pruebas.
La imagen superior, forma parte de un análisis mucho más exhaustivo sobre el coste de JavaScrip que te recomiendo leer.
Por otra parte, 1Kb de JavaScript al descomprimirlo y al venir minimizado, puede contener un gran número de instrucciones y código, cosa que las imágenes, por ejemplo, no tienen.
¿Cómo medir el coste de usar JavaScript?
Aunque existen muchas maneras de medir el coste, como utilizar el profiler del navegador, servicios SaaS que comprueban tu página como SpeedMonitor.io y otras herramientas de las que ya hablé anteriormente, hoy te enseño una utilidad muy simple con la que podrás dar tus primeros pasos en la medición del coste de JavaScript.
La utilidad de la que os hablo se llama BundlePhobia y permite:
- Analizar paquetes que estén en el repositorio NPM
- Conocer el tamaño que ocupa tanto minimizado como comprimido
- El tiempo estimado de descarga en redes móviles
- Sus dependencias
Por ejemplo, si analizas la última versión de Vue, verás algo como lo siguiente:
Espero que este recurso te parezca útil y te permita profundizar en el análisis del rendimiento y reducción del código JavaScript, para agilizar tu web.