Cuando hacemos una página web debemos considerar que a nuestros visitantes no les gusta esperar mucho tiempo para ver un sitio, si demora más de 15 o 20 segundos es probable que prefieran ver otro sitio. Veamos algunos tips para mantener agil nuestro sitio, es importante desarrollar imaginando que todos tienen una muy lenta conexión de prehistoricos modems de 56Kbps 🙂
Flash inmensos
Yo se que estaba muy de moda tener intros de flash muy espectaculares pero luego de 2 o 3 visitas ya nadie quiere verlas y menos aun esperar a que carguen asi que siempre es conveniente ponerles un boton «Saltar Intro» u olvidarnos de ellas y tal vez colocar un banner o un encabezado vistoso suele resultar más efectivo.
Usando CSS
Nunca debemos usar un CSS independiente por cada página de nuestro sitio, debemos usar una hoja de estilos global asi se cargará una sola vez y luego se compartirá entre todo nuestro sitio. Este suele ser un error muy común en aquellos que empiezan a programar usando Dreamweaver aunque no sólo es un tema de dar velocidad sino que ayuda a mantener coherencia en el diseño de todo el sitio.
Además podemos optimizar nuestro código CSS para pasar de algo así:
[cc lang=»css»]
padding-top: 10px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 15px;
[/cc]
A algo mucho más optimizado como esto:
[cc lang=»css»]
padding:10px 15px 5px 20px;
[/cc]
Es más rápido invocar imágenes via CSS además tiene la ventaja que estas se guardan en cache y nuestro sitio funcionará más rápido sin embargo no es conveniente abusar de este recurso ya que podría jugar en nuestra contra.
AJAX Frameworks
Muchas veces usamos un script que de un efecto, otro para otro pequeño efecto, hacemos llamados AJAX con gigantescos y confusos códigos, todo eso resulta innecesario ya que usando uno de los tantos frameworks existentes(mootols, jquery….) pueden realizar esos trabajos con pocas lineas de código, asi que resulta absurdo querer reinventar la rueda eso no sólo le dará velocidad a nuestro sitio sino a nuestra programación.
Optimizando imágenes
Este es uno de los puntos claves ya que las imágenes suelen ser los elementos más pesados de nuestro sitio, debemos usar cada formato para lo que fue creado
- JPG: Este es el formato por excelencia para fotos con la calidad alta(60) basta no requerimos usar la muy alta ni la máxima ya que crecerá el tamaño y dificilmente alguien puede notar la diferencia, si somos fotografos y si es un factor muy relevante mejor usamos una imagen a baja calidad y un link para los interesados en la version de alta resolución
- GIF/PNG 8: Estos formatos son similares y son los más adecuados para imágenes de pocos colores o imágenes que originalmente eran vectoriales como logotipos, botones, barras, etc con un máximo de 256 colores
- PNG 24 bits: Este es un formato que guarda fotos sin perder calidad y hasta permite semitransparencia pero es muy pesado y no soportdo adecuadamente por IE6(aun con hacks) asi que su uso debe ser mínimo
Remover código innecesario
Cuando se desarrolla un sitio se crean cabeceras y comentarios muy utiles para los desarrolladores si trabajamos en equipo o para nosotros mismos pero cuando la página esta completa, los comentarios terminan resultando inútiles y consumiendo espacio en los archivos asi que es mejor eliminarlos o al menos reducirlos al máximo dejando solo aquellos estrictamente necesarios.
