Mejorar el código de una página web:

Mejorar el código de una página web:
Los siguientes métodos no van a mejorar la velocidad efectiva de tu web, ya que ésta va a tardar en cargar todos sus elementos más o menos el mismo tiempo, sin embargo va a mejorar la velocidad percibida, haciendo básicamente que el contenido relevante se muestre antes a tus visitantes. Aumentar la velocidad de carga aparente es tan importante como aumentar la real, ya que los usuarios de un sitio web no cronometran tiempos de carga, sino que intentan acceder a la información que buscan lo antes posible.Deshacerse de las tablas
Aunque afortunadamente la maquetación con tablas (… en HTML) es algo cada vez más infrecuente de ver, aún hay sitios web que se resisten al paso del tiempo y basan su diseño en arcaicas filas y columnas. Aunque las tablas en sí no tienen nada de malo (de hecho son muy útiles para presentar series de datos), los diseños basados enteramente en estos elementos presentan un grave inconveniente: algunos navegadores como Internet Explorer necesitan descargar enteramente una tabla antes de mostrar su contenido. Y pese a quien le pese el Explorer es todavía el navegador más usado. Esto quiere decir que si toda tu página está encerrada en tablas, la mayoría de tus visitantes necesitarán descargarse todo el código por completo antes de empezar a ver cualquier tipo de contenido.
Solucionar este inconveniente es algo relativamente sencillo y consiste en migrar el diseño de la página a CSS. Las páginas cuya disposición se basa en estilos CSS muestran sus distintos elementos tan pronto como llegan al navegador, realizándose por tanto la carga de una manera totalmente fluida, lo que reduce el tiempo de espera para los visitantes.
CSS («Cascading Style Sheets», es decir, hojas de estilo en cascada) es lo suficientemente flexible como para servir de soporte a cualquier tipo de diseño. Si estás empezando con CSS puede que te interese visitar esta guía breve o, aún más sencillo, descargarte una de estas plantillas básicas sobre las que basar tu diseño.Colocar el contenido al principio
Ya que, tras el punto anterior, el contenido de tu web se va a ir mostrando tan pronto como se va cargando, es interesante colocar el contenido relevante lo antes posible. Y por «antes» no me refiero a la disposición visual sino a su posición dentro del código HTML de la página, que es lo que va a determinar el orden de carga.
Normalmente la acción a realizar en este aspecto es colocar el código de la barra lateral (sidebar, en la que normalmente se situán todos los enlaces a secciones, categorías, etc.) después del contenido principal, aunque dependiendo del diseño puede que haya más elementos que puedan ser retrasados en su orden aparición. El auge de las barras laterales alineadas a la derecha del contenido hace que este paso normalmente no sea necesario, aunque aún hay muchos diseños que muestran el sidebar en la izquierda y cuyo código también aparece antes del contenido.
Alinear la barra lateral a la izquierda no es un problema como tal; de hecho yo soy partidario de este tipo de disposición ya que los usuarios están tradicionalmente acostumbrados a ella (aunque esa es otra historia y será contada en otro momento). Lo que sucede es que aún hay diseñadores que no saben que es posible colocar el código de la barra «después» aunque visualmente aparezca «antes». Con CSS esto es muy sencillo gracias al atributo float que hace referencia a la alineación de los elementos. Por ejemplo con el siguiente código la barra lateral alineada a la izquierda se cargará después del contenido:
…Aquí el contenido…
… Aquí la barra lateral…

En blogs el uso de este método junto a la descarga por partes de la página con flush() es especialmente importante ya que los sidebars suelen hacer uso intensivo de consultas a la base de datos, y por tanto su tiempo de ejecución es mayor.
También en blogs es interesante incluir los comentarios en un bloque diferente al del resto de contenido y al final de la página, ya que las entradas con muchos comentarios pueden retrasar sustancialmente la carga de otros elementos (normalmente la barra lateral).Colocar el JavaScript al final
Las referencias a los archivos externos de JavaScript (.js) se suelen colocar en el encabezado (entre las etiquetas ) por simple costumbre. Sin embargo muchos de estos archivos ejecutan su código cuando la página ya se ha cargado, mediante llamadas del tipo document.onload = (…). En este caso desde el punto de vista del código es indiferente que ese archivo se cargue antes o después del contenido. Por lo tanto colocándolo al final de la página, justo antes de la etiqueta de cierre , evitaremos que la descarga de ese archivo retrase la aparición del contenido. El HTML quedaría entonces así:


Por supuesto si el archivo contiene variables o funciones que son utilizadas en tiempo de carga, retrasar su ejecución puede llevar a errores o comportamientos no deseados, así que hay que tener cuidado en este sentido.
Un ejemplo típico de llamadas a archivos JavaScript que se pueden situar al final de la página son los códigos de servicios de estadísticas, tracking, etc. Por ejemplo Google Analytics proporciona un código para el seguimiento de los visitantes que recomienda colocar al comienzo de la página. Mientras que esto no suele representar ningún problema, en ocasiones los servidores de Analytics resultan especialmente lentos, retrasando la carga de las páginas que incluyen su script. Colocando el código dado antes de la etiqueta evitaremos este inconveniente, aunque hay que tener en cuenta que esto puede reducir el número de visitantes reportados por Analytics, ya que en ocasiones las páginas no se llegan a cargar por completo y el código de este servicio no llega a ser ejecutado.Especificar el ancho y alto de las imágenes
De los aspectos que estamos tratando éste es el que es descuidado con mayor frecuencia, por la creencia generalizada de que no afecta a la velocidad de carga de una página. Y en cierta forma es cierto, ya que una imagen se descarga igual de rápido tanto si se especifica su tamaño como si no. Sin embargo no establecer el ancho y alto de las imágenes (atributos width y height) va a afectar de manera negativa la velocidad de carga aparente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *