Optimización de Aplicaciones Web

A diferencia de lo que ocurre con las aplicaciones de escritorio, que se ejecutan sobre el mismo ordenador en el que se encuentra el usuario, las aplicaciones web pueden encontrarse a una distancia de varios cientos de kilómetros del usuario.
Además, en las aplicaciones web también se encontrarán conectados varios usuarios empleando diferentes velocidades de conexión. Es posible que algunos estén utilizando el mejor tipo de conexión posible, mientras que otros lo harán a una velocidad inferior a la de una conexión móvil óptima.

Por tanto, es importante que tengas en cuenta como creas tu app para optimizar el rendimiento en Internet. A continuación encontrarás algunas técnicas que puedes usar para optimizar tu aplicación web con vistas a que proporcione un mejor rendimiento.

Gráficos

Usa PNG

Si bien las imágenes en formato JPEG pueden ser más pequeñas en comparación con el formato PNG, el formato JPEG tiende a ensuciar el texto y suavizar el color, además de que no soporta transparencia y también conlleva posibles problemas de licencias.

Puedes crear una WebPicture en formato PNG pasando Picture.PNGFormat como segundo parámetro del constructor WebPicture. Este sería un ejemplo:

' source es una instancia de Picture disponible en el proyecto
' o bien que se ha podido cargar desde disco
WebImageView.Picture = New WebPicture(source, Picture.FormatPNG)

Almacena los objetos Picture en Propiedades

Los objetos Picture almacenados en Propiedades de una aplicación web están cacheados por el navegador web, de modo que sólo se envían una vez desde la app hacia el navegador. Como resultado, el almacenaje de las imágenes como propiedades de la app reduce la cantidad de datos transmitidos entre la app y el navegador. El hecho de guardar las imágenes en Módulos como propiedades también permitirá que el navegador pueda cachearlas.

Usa Rectangles

En vez de crear imágenes (instancias de Picture), utiliza instancias de la clase Rectangle siempre que sea posible. Pueden modificarse de forma significativa mediante el uso de estilos. Por ejemplo, ajustando el radio de las esquinas a 50 permite convertir el rectángulo en un círculo. Los  rectángulos tienen muy poco peso en cuanto a la cantidad de datos que se han de enviar desde la app hacia el navegador, haciendo que sean rápidos de dibujar.

Usa el Editor de Estilos para Crear Estilos

Los Estilos tienen un peso pequeño, en cuanto a la cantidad de datos que se han de enviar desde la app hacia el navegador, de modo que suponen un modo muy eficiente a la hora de realizar cambios visuales.

Latencia

Elimina los Manejadores de Evento no Utilizados

Los manejadores de evento causan la comunicación entre el navegador y la app web en el servidor, incluso cuando no existe código en ellos. Por tanto, elimina cualquier evento que no contenga código.

Envía los Objetos de gran tamaño en segundo plano

Si tu app contiene objetos de gran tamaño que sabes que vas a necesitar, puedes utilizar un control Timer o utilizar Push para asignarlos a propiedades de la página mientras que el usuario está haciendo cualquier otra cosa. Por ejemplo, Google Maps envía en segundo plano segmentos del mapa ubicados en torno al área que se está mostrando, sólo en previsión de que puedas desplazarte por el mapa. Puedes utilizar esta misma técnica en tus aplicaciones.

Cautela con los resultados de las consultas

Si estás accediendo a una base de datos y cargando los resultados en un ListBox, ten cuidado con obtener un número elevado de registros. Cuantos más registros cargues, se precisará también más tiempo para enviar la información hacia el navegador, y también será preciso que el navegador utilice una mayor cantidad de memoria. Evitar llenar los ListBoxes con una gran cantidad de filas y considera en su caso cargar filas bajo demanda o utilizar un sistema de paginación.

Ten cuidado con las pulsaciones de tecla y los MouseEvent

Cada evento provoca el envío de datos entre el navegador y tu app. Eso significa que debes evitar el uso de aquello que provoque eventos frecuentes, como pueda ser KeyUp, KeyDown y MouseMove. Si tu aplicación está ejecutándose en una red local, estos eventos probablemente no causen un gran impacto, pero si el ususario está accediendo a la aplicación a través de Internet y tienes una gran cantidad de usuarios simultáneos, entonces esto causará un elevado retardo en la respuesta. ¡Prueba y experimenta!

Uso del Framework

No uses nombres de página implícitos

Guarda la referencia a una página en una variable o propiedad en vez de usar el nombre de la página como referencia implícita. Las referencias implícitas deben ser examinadas por el framework, lo que requiere más tiempo en comparación con el acceso directo a una referencia que está almacenada en cualquier otra parte. Por ejemplo, en vez de hacer esto:

WebPage1.Show

Crea una propiedad (customerPage As WebPage1) y entonces usa la propiedad:

customerPage.Show

Usa InsertText/AppendText al actualizar TextAreas

Cada vez que actualizas la propiedad Text de una TextArea se envía todo el texto desde tu app hacia el navegador. Si sólo necesitas añadir texto o insertar algo de texto, usa los métodos AppendText e InsertText. Estos envían al navegador sólo el texto que se está insertando o añadiendo.

Despliegue y DesarrolloU

Uso de CGI frente a Standalone frente a Carga Balanceada

Puedes compilar tu app como CGI o servidor HTTP autónomo. Una app CGI se comunica con un servidor web (por lo general Apache). Dado que Apache es un servidor web completo, puede gestionar significativamente más tráfico y también es más configurable en comparación con una app web Autónoma (Standalone). Sin embargo, Apache ha de comunicarse con la app web mediante CGI, lo que puede resultar en un rendimiento más lento.

Una app Autónoma incorpora su propio servidor web, pero no es completo. Las pruebas sugieren que un Servidor HTTP autónomo puede gestionar unos cuantos cientos de usuarios sin problema, en función siempre del tipo de aplicación de la que se trate.

Puedes hallar que usando un balanceador de carga, como HAproxy, puede gestionar grandes cantidades de usuarios direccionándolos a múltiples copias de la app web.

Fugas de Memoria

Se producen fugas de memoria cuando se crean objetos pero no llegan a destruirse. A medida que se crean más objetos y no se destruyen, también aumentará en igual medida la cantidad de memoria utilizada. Como resultado, la app se colgará dado que el equipo se quedará sin memoria disponible.

En una app de escritorio puede que no sea un gran problema porque el usuario saldrá de la aplicación y eso limpiará la memoria utilizada. Sin embargo, en una app web es más serio dado que la app web puede estar ejecutándose durante días, meses o incluso más.

Si tu app está ejecutándose como CGI, una vez que la cantidad de usuarios (sesiones) que están accediendo a la app llegue a cero, la app saldrá y se liberará la memoria utilizada. Sin embargo, es posible que tu app nunca alcance el punto en el que no haya usuarios accediendo, de modo que has de tener mucho cuidado con las posibles fugas de memoria.

Leyes Locales

Las aplicaciones web se ven en ocasiones afectadas por las leyes locales de cada área. Por ejemplo, la Unión Europea requiere que los sitios web soliciten permiso a los usuarios antes de instalar la mayoría de las cookies.