Estrategias de optimización

Introducción

La optimización de los sitios web es esencial para garantizar una experiencia óptima y evitar frustrar a los usuarios con ralentizaciones inoportunas. Los desarrolladores están obligados a tener siempre presente esta cuestión del rendimiento, y sus herramientas se deben adaptar para satisfacer esta necesidad.

La carga de una página web consiste simplemente en una serie de peticiones que el cliente envía al servidor para recuperar un determinado número de elementos (imágenes, scripts, porciones de HTML, hojas de estilo CSS, etc.) que permiten al navegador construir la página que el usuario ha solicitado. Cuantos más elementos necesite la página, más tardará en cargarse. Evidentemente, con un centenar de viajes de ida y vuelta entre el cliente y el servidor, el sitio web no será el más rápido de la red.

Las técnicas de optimización de aplicaciones web aceleran el renderizado de páginas mediante:

reducción del peso de los elementos que se descargan,
limitar el número de elementos a descargar,
evitar que el servidor realice peticiones innecesarias.

ASP.NET ya cubría este ámbito mediante mecanismos muy específicos que se tratarán brevemente al principio de la siguiente sección. Sin embargo, como estos tratamientos eran específicos de ASP.NET y Microsoft, dejaron de ser pertinentes...

Optimización de clientes

El enfoque de ASP.NET MVC para la gestión de paquetes del lado del cliente, siempre ha sido muy específico de la plataforma de Microsoft. Desde la versión 4 de MVC, ha aparecido un archivo BundleConfig.cs que facilita la gestión de las librerías cliente. El efecto de esta clase en la plataforma:

Agrupación de varios archivos para que el cliente descargue sólo uno al final.
Minificación de archivos (scripts y estilos) para eliminar comentarios y espacios innecesarios, reduciendo el peso del código a descargar.

El siguiente código muestra un ejemplo de una clase BundleConfig. Aquí estamos registrando archivos JS (o CSS) bajo los mismos bundles, que luego se integrarán en _Layout.cshtml en forma de archivo concatenado y minificado.

public class BundleConfig  
{  
    public static void RegisterBundles(BundleCollection bundles)  
    { 
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 
                    "~/Scripts/jquery-{version}.js"));  
  
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( 
                  "~/Scripts/bootstrap.js", 
                  "~/Scripts/respond.js")); 
  
        bundles.Add(new StyleBundle("~/Content/css").Include( 
                  "~/Content/bootstrap.css",  
                  "~/Content/site.css"));  
    }  
}

Los paquetes se pueden utilizar de forma muy sencilla a través de los métodos Styles.Render o Scripts.Render.

<head>  
    <meta charset="utf-8" />  ...

Optimización del servidor

En el apartado anterior se han tratado las optimizaciones y mejoras que los desarrolladores pueden realizar en su sitio web para optimizarlo desde el punto de vista del cliente. ASP.NET Core incluye otros mecanismos para mejorar el rendimiento del sistema, pero esta vez en el lado del servidor.

La creación de aplicaciones web de alto rendimiento es un reto al que los desarrolladores se enfrentan cada vez más, a pesar del gran número de peticiones que procesa el servidor. Hoy en día, una aplicación web debe tener capacidad de respuesta y ASP.NET Core se ha diseñado para facilitar los desarrollos en este sentido.

El primer mecanismo a estudiar es la gestión de una caché de página. En versiones anteriores de ASP.NET, era posible añadir el atributo OutputCache, que permitía almacenar en caché la salida de una acción de controlador. El siguiente código almacena en caché la salida de la acción Index durante 30 segundos.

[OutputCache(Duration = 30)] //caché durante 30 segundos  
public ActionResult Index()  
{  
    ViewBag.Message = "Esta página se ha almacenado en caché"; 
  
    return View();  
}

Era posible establecer este atributo en una acción o en todo un controlador. El desarrollador también podía trasladar los perfiles de caché en el archivo web.config. La nueva versión de ASP.NET ya no incluye este archivo, pero permite configurar los perfiles de caché en la clase Startup a través de la clase de opciones MvcOptions. El siguiente código muestra la configuración de un perfil de caché de una hora:

services.Configure<MvcOptions>(options => 
{  
    options.CacheProfiles.Add(new CacheProfile() {  
         Name = "Cache1Hour",  
         Duration = 3600,  
         VaryByHeader = "Accept"  
    });  
});

Este perfil se utiliza a través del atributo ResponseCache, en una acción o en un controlador completo...