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.
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:
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.
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.
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:
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.
Hoy queremos hablaros de Docker un proyecto que cada día es más usado, porque permite…
Cada vez estamos más acostumbrados a usar código para generar la infraestructura (IaC), documentar nuestro…
Uno de los problemas que se presentan con una mayor frecuencia hoy en día, es…
Uno de los problemas que solemos tener los programadores, es que nos gusta estar a…
Docker es una de las herramientas más usadas por los desarrolladores, sin embargo, usarlo en…
En los últimos tiempos y debido a la transformación digital de las empresas, cada vez…