Cargando



Anatomía de una página web con ASP.NET MVC

En este tutorial veremos la anatomía de una página web, es decir, como está compuesta y que podemos mejorar de su estructura base para poder obtener el máximo de rendimiento.


sep 19 2014 05:32
Intermedio
sep 23 2014 10:10
La generación de una aplicación web tiene varios hitos, entre los cuales tenemos dos importantes, el primero es que cumpla con las necesidades del usuario y sea fácil de usar, el segundo es que sea lo más rápida posible, de forma que no tengamos que esperar más de un segundo por cargar cada una de sus secciones.

Para cumplir con este segundo hito hay que optimizar nuestra aplicación una vez que se cumpla el primero, es decir, una vez que nuestra aplicación cumple con sus funciones de forma adecuada, debemos extraer el máximo de rendimiento para amplificar la experiencia de uso.

Composición de una web


Saber la composición de una página web nos permite entender la forma en la que llega al navegador y así poder encontrar los puntos en los cuales podemos introducir algunas mejoras, cada pequeña parte que podamos optimizar sumará al final para una experiencia de uso enriquecida.

Los elementos básicos de una página son los siguientes:

HTML
Este es el código o texto dentro del archivo, a mayor cantidad de código más pesado el archivo, sin embargo en puro texto es poco probable que ocupemos mucha cantidad de espacio.

Archivos js
Es el lenguaje complementario por excelencia, al igual que el HTML es puro texto, sin embargo es poco probable que lo utilicemos en forma pura, por lo que casi siempre tendremos que añadir archivos .js a nuestro HTML que contienen librerías y funcionalidades, esto si es posible que nos ocupe mucho espacio ya que las librerías generalmente son extensas.

Hojas de Estilo CSS
Son archivos o código que insertamos en nuestro HTML que nos permite modelar la forma en la cual el navegador va a mostrar la web al usuario, al igual que Javascript podemos utilizar librerías que ocupen espacio.

Multimedia
Este es el apartado más pesado, en multimedia tendremos todo lo referente a imágenes, videos y audio que podamos incorporar en nuestra página, esta es por lo tanto la parte que añade más peso de descarga a nuestra aplicación.


Veamos en el siguiente diagrama como luce explicado:

asp_anatomia_web.jpg


Mejorando la carga de nuestra página


Hablamos que todo el contenido de la página descrito anteriormente tiene un peso, esto es lo que hace que cuando hagamos una petición desde nuestro navegador este tenga que esperar unos momentos para mostrarnos el resultado, este tiempo que esperamos es la descarga del contenido.

Por lo tanto si queremos una página más rápida debemos ser más eficientes al momento de organizar los contenidos, por ejemplo utilizar imágenes optimizadas para web, hacer la menor cantidad de código posible al emplear mejores prácticas, utilizar los archivos minificados, utilizar contenido comprimido, etc.

Con esto finalizamos este tutorial, entendiendo esta anatomía de una página, podemos obtener la información básica que necesitamos para poder empezar a optimizar, ya que si utilizamos un poco de lógica y disminuimos un 30% o 40% del peso de la página estaremos aumentando su facilidad de descarga y por ende la velocidad de la misma.

¿Te ayudó este Tutorial?


3 Comentarios


Enrique Martin
oct 29 2014 13:54
Muchas gracias por compartirlo, me gustó mucho.
Es muy útil ;)

Saul Martin Siera
oct 29 2014 14:10
Es importante para dejar más ligera la web.

Fenomenal tuto.
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X