Blog sobre tecnología, diseño y comunicación

El tiempo de carga de un sitio es uno de los elementos más críticos para la experiencia de usuario. Y también uno de los temas técnicamente más complejos. Muchas veces los diseñadores web piensan que no se puede hacer mucho a respecto excepto contratar un hosting mejor o reducir el  tamaño de los elementos multimedia tanto como sea posible.

Error: Existen buenas prácticas que se pueden implementar para favorecer un mejor aprovechamiento de los recursos disponibles. No son complicadas de implementar y para hacerlo solo necesitamos conocerlas y hacernos con el hábito La mayor parte de los consejos han sido expuestos en Best Practices for Speeding Up Your Web Site, un excelente artículo del equipo de desarrollo de Yahoo donde analizan la forma de optimizar los tiempos de carga. Esta síntesis también incorpora mi experiencia profesional

1. Medir y analizar

Lo primero que tenemos que hacer para saber si podemos mejorar los tiempos de carga de nuestra página web es medir. Existen dos herramientas específicas para ello: YSlow de Yahoo y Page Speed de Google. Ambas funcionan sobre Firefox y requiern tener instalado Firebug, uno conocido plugin para Firefox que utilizan los desarrolladores para detectar errores y problemas en una página.

Al ejecutar cualquiera de estas herramientas en nuestra página obtendremos un informe donde nos indicarán aquellos aspectos que debemos mejorar para acelerar la carga de nuestras páginas.  Este es nuestro punto de partida para comenzar a mejorar.

2. Minimizar las peticiones al servidor

Es la clave para obtener sitios más rápidos. La mayor parte del tiempo los usuarios están esperando que se descargue contenido: la propia página web pero también los archivos que tiene vinculados como hojas de estilo, JavaScript, imágenes, animaciones en Flash. La especificación del protocolo HTTP 1.1 establece que cada navegador limite el número de descargas simultáneas a 2. Por lo tanto, es mejor unificar todas las hojas de estilo en un solo archivo y hacer lo mismo con JavaScript.

En cuanto a las imágenes, una técnica interesante es usar CSS Sprites que consiste básicamente en crear una única imagen con todos los gráficos y luego trabajar mediante CSS con el posicionamiento. Por ejemplo, puedo crear la siguiente imagen para un menú:

Como vemos están todas las opciones y hay dos versiones: una normal y otra para cuando el usuario coloca el cursor encima. Mediante CSS simplemente podemos indicarle que desplace la imagen hacia arriba. Si te interesa esta técnica concer más sobre esta técnica de CSS Sprites te recomiendo leer “CSS Sprites: Image Slicing’s Kiss of Death” en A List Apart.

3. Optimizar el tamaño de tus archivos

Seguramente el código que generás para una página web está hecho a tu medida para que puedas comprenderlo fácilmente. De esta forma el desarrollo y las actualizaciones son mucho más fáciles. Una idea interesante es crear una copia optimizada de estos archivos y utilizarla en lugar de los originales. Lo de optimizar tiene dos partes. Por un lado revisar el código para ver si no hay información redundante. Ejemplo: En lugar de esto:

H2 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.8em;
color: #cc0000;
}

H3 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.4em;
color: #cc0000;
}

H4 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.2em;
color: #00000;
}

¿Por qué no definir para las 3 etiquetas todo lo que tienen en común y luego modificar el tamaño y el color que es lo único que varía?

H2,H3,H4 {
font:bold  1.8em Arial, Helvetica, sans-serif;
color: #cc000;
}

H3 {
font-size: 1.4em
}

H4 {
font-size: 1.2em;
color: #000000;
}

La otra parte es comprimir el código eliminando comentarios, tabulaciones, espacios y otros elementos que el navegador no necesita par interpretar correctamente la página. Esto es especialmente importante para archivos externos como los JavaScript o CSS. Hay dos herramientas conocidas para hacer esto: YUI Compressor y JSMIN.

4. Emplear de forma inteligente la caché

El protocolo HTTP 1.1 incorpora una serie de etiquetas que permiten especificar si el contenido de una página puede alojarse en la memoria caché o no.  Como sabemos, el contenido cacheado se lee más rápido porque se consulta una vez y luego queda alojado en la memoria que reserva el navegador.

Si tenemos una página estática que no se va a modificar, lo más lógico sería establecer que se pueda cachear el contenido de forma indeterminada. Lo hacemos con la siguiente etiqueta:

Si sabemos que el contenido se va a mantener sin cambios hasta una cierta fecha podemos especificar la “fecha de vencimiento” de la página:

Esto significa que el contenido de la página está vigente hasta las 10 de la mañana del 26 de octubre de 2009. Un dato importante: el día y hora se especifica en GMT, es decir habrá que ajustar el valor según la diferencia que tengamos en el uso horario con el meridiano de Greenwich. El tema del manejo de caché es muy interesante y realmente útil si tu web tiene usuarios que retornan a ella. Podés leer la especificación del HTTP 1.1 a respecto o visitar Web-Caching.com, donde hay un buen tutorial sobre cómo funciona el tema. Otro buen tutorial de caché lo encontrás Mnot.net.

5. Activar GZIP

Según las mediciones de Yahoo el 90% del tráfico de Internet se realiza a través de navegadores que soportan la compresión de datos. GZIP es el formato más conocido y extendido para ello. Este tema se maneja directamente en la configuración del servidor.

Es posible establecer qué tipo de archivos se enviarán comprimidos y para evitar problemas lo mejor es limitar GZIP solo a los archivos que contengan texto: HTML, CSS y Javascript, por ejemplo. Aplicar GZIP a una imagen JPG o un documento PDF puede producir dos efectos no deseados: incrementar el consumo de CPU del servidor y terminar incrementando el tamaño final del archivo.

6. Usar archivos externos (¡y ubicarlos bien!)

Lo primero es algo elemental: el código JavaScript y CSS de una página debe estar en archivos externos. Hay un mejor rendimiento porque el archivo se aloja en la caché y por lo tanto se descarga una sola vez. Además, es mucho más sencillo hacer un mantenimiento y modificamos los cambios en un solo lugar.

El otro tema es ubicarlos correctamente. Los desarrolladores de Yahoo han hecho una serie de test y el mejor rendimiento se obtiene ubicando el CSS al comienzo y el JavaScript al final. Siempre que sea posible hay que hacer esto. Al ubicar el CSS dentro del HEAD de la página permitimos que la página se pueda construir de forma progresiva a medida que se descarga el contenido. Es bastante desagradable comenzar a leer un texto y que cambie su formato porque el CSS que lo modifica está al final de la página.

Con JavaScript sucede al revés. Mientras se descarga un archivo JavaScript no se procesa otra petición, por lo cual lo más óptimo resulta ubicarlos al final una vez que se descargó el resto del contenido de la página. Esto no siempre es posible ya que muchas veces se requiere inicializar algunos elementos al inicio del documento, especialmente se va a escribir una parte de la página web utilizando document.write. Pero siempre que sea posible la opción de cargar el JavaScript al final es preferible. Y como vimos en el apartado sobre minimizar las peticiones al servidor, mejor unificar todo el código en un único archivo.

6. No recargar tu servidor

La elección de un hosting adecuado es una tarea que no debe desvalorarse. Hay que invertir tiempo, organizarse y tener algunos conocimientos técnicos para realizar una buena decisión. Pero a pesar de todo puede que tu servidor te esté quedando chico porque el tráfico siguió creciendo pero los recursos disponibles no.

Una alernativa más o menos rápida es aprovechar los diferentes servicios de hosting de imágenes y video que hay disponibles como Flickr, YouTube u otros. El video particularmente consume mucho ancho de banda y si nuestro hosting no es potente mejor alojarlo en otro lado.

Otra opción a considerar es utilizar la CDN de Google que incluye algunas librerías de uso frecuente como jQuery, Prototype o inclusive la Yahoo User Interface Library (YUI). Una Content Delivery Network o CDN es una red distribuida de computadoras con la misma información que es ofrecida por el servidor más cercano al usuario. Además, está la posibilidad el use algún servicio de Google con lo cual alguna de estas librerías estarán en la caché de su navegador.

Existen soluciones CDN profesionales como Amazon S3/Cloud Front, Akamai o EdgeCast Networks pero en general son muy costosas para un sitio web normal.

Otra técnica interesante para mejorar el rendimiento es usar subdominios para alojar algunas partes de tu sitio como lo explican en Maestros del Web. Como un servidor puede responder a un número limitado de peticiones al mismo tiempo una posibilidad es desviar parte del tráfico a otro servidor. La forma más sencilla es emplear un subdomino para el contenido estático como pueden ser imágenes o código JavaScript. Pero antes de meter mano esto lo mejor es hablar con la empresa que te proporciona el hosting y verificar que podés hacer esto.

Conclusión

Con el crecimiento de las conexiones de banda ancha también ha crecido la complejidad de los sitios web y el tamaño de las páginas. No hay que olvidar que la velocidad es un elemento fundamental en la experiencia del usuario y por lo tanto cualquier proceso de rediseño o mejora debe incluir mejoras en este apartado.

Más allá de contar con un buen servicio de hosting adecuado al tráfico y las necesidades del sitio hay algunos aspectos concretos sobre el cual los diseñadores web pueden trabajar para obtener un mejor rendimiento de sus páginas. El primer paso es medir el rendimiento de su sitio web con herramientas como YSpeed o PageSlow. Y a partir de allí implementar las técnicas apropiadas que te permitan aprovechar al máximo tu servidor como eliminar el número de conexiones simultáneas, reducir el tamaño de los archivos, implementar la compresión de datos, emplear con inteligencia la caché del navegador y aprovechar los recursos que ofrecen las grandes empresas especialmente para archivos de gran tamaño como videos.

Y si todo esto no alcanza es hora de estudiar más, contratar un hosting mejor o consultar con un especialista.