Como acelerar la carga de un sitio Web

Actualizado el 30/11/2009 < > 5 Cometarios

Resumen: Consejos para reducir el tiempo de carga de una web. Interacción de la red, ejecución de scripts, despliegue de la web por parte del navegador, etc.

Meneame Bitacoras

Steve Souders ha trabajado junto a un grupo de personas en formas de medir y reducir el tiempo que demoran en cargar las páginas de un sitio web. Este tiempo incluye tanto la interacción de la red, como la ejecución de los scripts de la página y el despliegue de esta por parte del navegador. La experiencia que su grupo ha recogido puede resumirse en los siguientes puntos:

Hacer menos peticiones HTTP

Una página incluye varios recursos que son descargados en forma separada. La página HTML en sí es uno de ellos, pero a eso hay que sumar cada hoja de estilo, cada imagen, cada script, y cada objeto embebido. Los browsers modernos hacen entre 4 y 6 peticiones simultáneamente a un mismo servidor, de modo que si una página tiene muchos elementos, será lenta de desplegar.

Se puede ver fácilmente qué elementos tiene una página usando el plug-in de Firefox Firebug, que además es muy útil para varias otras tareas de desarrollo web. Por ejemplo para esta página el panel de Red de Firebug muestra lo siguiente:

Image:Panel_red_firebug.png

Usar una red de distribución de contenido

Una red de distribución de contenido es un grupo de servidores distribuídos en todo el mundo que actúan como cachés locales de contenido para una serie de sitios Web. Por ejemplo, las imagenes o videos de un sitio web de alto tráfico pueden servirse desde una de estas redes de contenido, y automáticamente la red de distribución de contenido seleccionará un servidor cercano a cada cliente para enviarle estos archivos.

Agregar un encabezado de expiración

En la respuesta del requerimiento HTTP es posible indicar una fecha de expiración para un recurso. Si el recurso es estático (una foto, o un video que no se modificará después), se puede poner una fecha de expiración muy en el futuro para evitar un requerimiento de verificación por parte de un crawler o de un usuario. La sintaxis es:

Expires: Thu, 1 Jan 2015 12:00:00 GMT

Comprimir el contenido de la página

GZIP puede usarse para enviar el contenido de la página (básicamente el HTML, pero también otras componentes). Para recursos estáticos, se puede habilitar la compresión de HTTP en el servidor mismo, por ejemplo en Apache usando el mod_deflate:

 AddOutputFilterByType DEFLATE text/html text/plain text/xml

Cuando se trata de páginas dinámicas, también es posible habilitarlo, en este caso dependerá del programa usado, pero siempre conviene hacerlo.

Poner las hojas de estilo al comienzo

Distintos browsers hacen cosas distintas con las hojas de estilo. Algunos, esperan a cargar la hoja de estilo antes de mostrar la página; antes de recibir la hoja de estilo sólo muestran el título y una página en blanco. Otros, muestran la página sin la hoja de estilo y apenas la han cargado, cambian el estilo de la página. En ambos casos, es mejor poner la hoja de estilo al comienzo de la página, dentro del elemento <head> … </head>.

Usar scripts externos y cuidar la forma en que se cargan

Scripts externos

Parece un poco de más en este punto, pero dado que se puede hacer caché muy agresivo de los CSS y del Javascript, es mejor usar por ejemplo:

<script type="text/javascript" src="scripts.js"> </script>

Que insertar directamente el código del Javascript dentro de la página. Además hay que tener cuidado de no poner dos veces el mismo script en una página para evitar cargarlo dos veces.

Minificar los scripts

Minificar en este contexto significa quitar todos los comentarios y espacio. El sitio Scriptalizer puede hacer esto por tí, pero hay varias herramientas que lo hacen. Lo apropiado es tener dos versiones de cada script, una sin minificar para desarrollo y una minificada para explotación. Además nota que algunas bibliotecas en Javascript se pueden descargar en versión minificada.

Los scripts bloquean la carga de la página

Otra cosa problemática con Javascript es que mientras un script no se carga lo que sigue más abajo en la página no se muestra. Esto es desconocido por muchos desarrolladores, pero se puede resolver fácilmente. La primera solución es poner los scripts al final de la página. La segunda solución es usar en el <head> … </head> de la página:

<script type="text/javascript">
	var se = document.createElement("script");
	se.src = "http://midominio.com/scripts.js";
	document.getElementsByTagName("head")[0].appendChild(se);
</script>

Este truco no bloquea la carga de la página y permite que la descarga del script comience inmediatamente.

Reducir el número de hosts distintos en la página

Si cada imagen, hoja de estilo y script está en un host distinto, o si los enlaces internos del sitio que los usuarios ocupan alternan entre distintos nombres de host, el requerimiento DNS que debe hacerse antes de la conexión quitará instantes valiosos de la experiencia del usuario.

Evitar las redirecciones

Las redirecciones múltiples ayudan a mantener un sitio, por ejemplo usando URLs cortas para referirse a objetos que en realidad tienen una URL más larga; pero quitan tiempo a los usuarios. Una solución es evitarlas del todo, o simplemente asegurarse de que las páginas intermedias son pequeñas y tienen fechas de expiración muy en el futuro.

Optimizar imágenes

Esta foto es de 1280×850 pixeles, y pesa 140 Kb originalmente. Reducida a 300×200, pesa 38 Kb si no se optimiza, y 7 Kb si se optimiza mucho; valores intermedios también son posibles. Obviamente en el caso de imagenes más grandes lo que se ahorra en tiempo de descarga es mucho más.

imagen sin optimizar
Sin optimizar (38 Kb)
imagen optimizada
Optimizado (7 Kb)

El programa GIMP tiene una ventana de diálogo al grabar archivos JPG que permite elegir el nivel de optimización y previsualizar el resultado. Si además usas JPG progresivo, recomendado para imágenes grandes, el usuario puede ver una versión de baja resolución de la imagen mientras esta se está cargando.

YSlow

YSlow es una herramienta para desarrolladores Web que evalúa estos aspectos en un sitio Web. En el fondo, contesta a la pregunta ¿por qué el sitio es lento? (why (“Y”) is it slow?”)

yslow screenshot

Fuentes: Steve Souders: High Performance Websites

Meneame Bitacoras

Publicado el 30/11/2009, última actualización 30/11/2009.

Autor: Tejedores del Web

URL: Tejedores del Web

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Cómo hacer un diseño web de carga rápida

    [...] esta página hallaremos una herramienta que resultará muy útil para evaluar el tiempo de carga de nuestro diseño. Para ello debemos hacer click en el siguiente enlace (Calcular el tiempo que tarda en cargar una [...]

    Jueves, 28 de enero 2010

  2. Comprimir el CSS y el JavaScript de tu página web para hacerla más rápida

    [...] de entender, pero que cumple bien su función de reducir el tamaño de los archivos y así reducir el tiempo de carga (y [...]

    Martes, 4 de mayo 2010

  3. Diego de Leon Tórtola

    Si, pero ¿cómo se aplica el Expires: Thu, 1 Jan 2015 12:00:00 GMT a una imagen en concreto?

    Jueves, 13 de mayo 2010

  4. Verónica Milán

    Diego, prueba con este artículo http://www.leegar.com.ar/especificar-expiracion-de-las-imagenes-en-cache/

    Un saludo.

    Lunes, 17 de mayo 2010

  5. edgar

    hola, excelente articulo, sobre todo el script para acelerar los javascript, lo cual agradezco, pero quisiera saber como puedo poner tiempo de expiracion al cache de blogger gratuito. Gracias por anticipado por la respuesta

    Jueves, 10 de noviembre 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios