Todos los días accedemos a distintas páginas web de muchas empresas. Suelen ser el escaparate perfecto donde sus potenciales clientes pueden ver reforzada la buena imagen de la empresa, o por el contrario, salir huyendo desconfiados.
Es por ello que, además de factores como el estilo o la usabilidad de la página, la optimización puede marcar la diferencia entre dar una buena imagen o desesperar al cliente haciéndole esperar por datos que es probable que incluso no quiera.
Dentro del framework de desarrollo ASP.Net MVC, podemos utilizar las opciones de Bundling y Minification en nuestro proyecto, además de muchas otras mejoras que se puedan utilizar independientemente de este framework.
Dentro de ASP.NET MVC
Bundling
Los navegadores suelen tener restricciones de la cantidad de peticiones que puede realizar una página web. Como consecuencia de esto, una de las primeras opciones para optimizar el rendimiento de la aplicación es paquetizar los ficheros con unas características comunes.
En ASP.Net MVC 4 y sus versiones superiores, podemos encontrar un fichero llamado BundleConfig.cs cuyo método RegisterBundles es llamado desde el método Application_Start. Podremos paquetizar de la siguiente manera:
bundles.Add(new ScriptBundle(«~/bundles/jquery»).Include(
«~/Scripts/jquery-{version}.js»));
bundles.Add(new ScriptBundle(«~/bundles/jqueryval«).Include(
«~/Scripts/jquery.validate*»));
Al inspeccionar la carga de la página con cualquier herramienta de desarrollo web del navegador podemos ver algo parecido a la siguiente imagen:
Se puede observar en la imagen que al cargar la página solo ha sido necesario solicitar un único fichero de CSS (por ejemplo) gracias al bundling.
Minification
La minificación permite reducir el tamaño de los scripts o CSS de la aplicación mediante la eliminación de espacios en blanco o reduciendo el nombre de las variables. Al reducir el tamaño, se reduce por tanto el tiempo necesario en ser obtenida la página.
Por ejemplo, el siguiente código:
function add(firstNumber, secondNumber) {
//Add the firstNumber and the secondNumber
return firstNumber + secondNumber;
}
Será transformado en:
function add(a,b){return a+b}
Para usar la minificación en ASP.NET MVC sólo es necesario habilitarla como veremos en el punto siguiente. Destacar que la tarea de depurar es posible con la minificación activada, pero mucho más engorrosa.
Habilitando Bundling y Minification
Bundling y Minification pueden ser habilitados mendiante el web.config de la aplicación:
<system.web>
<compilation debug=«false» />
<!– … –>
</system.web>
Para habilitarlos basta con poner el valor de debug dentro de compilación a falso. Adicionalmente se puede añadir en el código al arrancar la aplicación la siguiente línea:
BundleTable.EnableOptimizations = true;
Este valor prevalece sobre el indicado en el fichero web.config
Otras optimizaciones:
Usar CDNs
CDN es la abreviatura de content delivery network y son redes de computadoras orientadas a maximizar el ancho de banda de los recursos disponibles en ellas. La mayoría de frameworks de javascript están disponibles en uno o varios CDNs para lograr, entre otros, mejorar el tiempo de respuesta de los sitios y aplicaciones web.
Optimizar las imágenes
Es muy frecuente que la mayoría de los bytes descargados en una página corresponda a imágenes. Es interesante revisar si las imágenes están en el formato correcto o se puede pasar a un formato más ligero.
Habilitar la compresión HTTP en IIS
Habilitando la compresión en el servidor web podemos ganar ancho de banda en detrimento de uso de CPU. Por lo tanto será una opción muy interesante siempre que el uso de la CPU del servidor nos lo permita.
Optimizar el backend de la aplicación
Por último, mencionar que toda optimización que se pueda realizar sobre el negocio o el acceso a datos de la aplicación tendrá un efecto positivo en el rendimiento de la aplicación. Es obvio que si al realizar una búsqueda en nuestra aplicación, el tiempo de ejecución en B.DD. es alto, reducir este tiempo repercutirá positivamente, sea cual sea la estrategia en el frontal web.
Si quieres saber más sobre las Soluciones Microsoft de Sogeti, tan solo tienes que visitar nuestra página.
Más información:
.NET Architect | Soluciones Microsoft | SOGETI ESPAÑA
Muy interesantes el post. Muchas gracias Javier.
Me gustaLe gusta a 1 persona