Categorías: Herramientas, HTML, Tutoriales

Cómo reducir el tiempo de carga de tu página web

Publicado el 23 diciembre 2009 por .

Sé que tengo ancho de banda de sobras, sé que el servidor donde hospedo mi web tiene capacidad de sobras y tampoco estoy bajando archivos del tamaño de una Wikipedia. Sin embargo, al cargar mi página web parece que mi conexión va a pedales. ¿Qué está pasando?

¿Sabes si tu página web está optimizada para que cargue como un tiro? Page Speed es tu juguete para estas navidades.

Somos impacientes. Queremos páginas rápidas

Si hay algo que nos desespera mientras navegamos por Internet es toparnos con una web que tarda en cargar.

Según recientes estudios en la materia, tenemos una tolerancia de 2 segundos antes de abandonar una página si esta no se ha cargado. Si bien este valor me parece un tanto excesivo, si es cierto que reducir al máximo el tiempo de carga de una página mejora de forma directa la experiencia de navegación. Sin embargo, una carga lenta no sólo afecta a la experiencia del usuario sino al grado de confianza que este depositará en el sitio web y, por extensión, en la marca.

Puede parecer que la velocidad de carga de una web sólo depende de factores como el ancho de banda con el que navegamos o la capacidad del servidor donde la web esté hospedada. Sin embargo, optimizar el propio sitio web ayuda a reducir drásticamente su tiempo de carga.

Si quieres que tu web “vuele”, puedes probar utilizando Page Speed.

Page Speed, test de velocidad y diagnóstico.

Page Speed es un Add-on para Firefox que nos permite realizar tests de rendimiento sobre páginas web. Esta evaluación de rendimiento se basa en la medición del tiempo de carga de la página y una vez que concluye mostrará un listado de las incidencias encontradas así como una serie de consejos para su solución.

El test realiza una serie de comprobaciones a fin de validar que se están cumpliendo las mejores prácticas para el rendimiento de la web. Un resumen:

  • Uso de la caché: validará si estamos permitiendo que algunos elementos del sitio web, como CSS, imágenes o JavaScript, sean almacenados en la caché del navegador.
  • Tiempos de respuesta: validaciones con el fin de reducir los tiempos de respuesta cliente/servidor.
  • Tamaño de cookies: verifica que el tamaño de las cookies a enviar tienen un tamaño adecuado.
  • Tamaño de paquetes: comprobaciones sobre el tamaño de los datos que se transmiten. Page Speed validará, por ejemplo, si estamos usando ficheros JavaScript y CSS compactados o si las imágenes han sido escaladas y optimizadas para la web.
  • Rendering de la página: comprueba la simplicidad del código para que este sea eficientemente interpretado por el navegador.

El resumen de incidencias se presenta en forma de lista ordenada según prioridad de cambio.

Veamos un ejemplo.

Caso práctico

Para poder utilizar Page Speed es necesario haber instalado antes FireBug para Firefox.

Para realizar un test, primero hay que ir a la página que se quiere evaluar. Una vez que el navegador haya cargado la página podremos lanzar el test: Abrir FireBug > Pulsar sobre la pestaña “Page Speed” > Pulsar en “Analyze Performance”.

Los resultados del análisis de rendimiento se presentan del siguiente modo:

La herramienta, además de especificar el grado de repercusión para cada incidencia, también explicita que ratio de mejora comportaría la solución.

Por ejemplo, en la imagen inferior se ven los detalles para la incidencia “Minify CSS”. En primer término tenemos un resumen donde ya podemos ver un par de datos interesantes: el tamaño total que podríamos ahorrar en caso de solucionar la incidencia, así como el porcentaje de optimización que supone. Esta información también se detalla para cada una de las sub-incidencias, en este caso para cada una de las hojas de estilo afectadas. No sólo eso, sino que para hacernos la vida más fácil, Page Speed nos da un enlace directo a la versión optimizada para cada CSS, JavaScript e incluso imagen pendiente de ser optimizada para la web.

En resumen…

Descarga Page Speed y échale un vistazo. Muy probablemente, estrenes el 2010 con una web más rápida de lo que era hasta ahora ;)

Bonus

Si quieres jugar a ver quién es el más rápido, prueba con Website Speed Test. Puedes poner varios dominios a la vez y la herramienta comprobará cuales son los tiempos de carga. Ojo, google.com suele hacer pole.

¡Esperamos vuestros comentarios! Puedes seguirme en twitter @drodriguezlopez ;)

Tags: ,

2 Comentarios

  1. Edu Barredo Dice:

    Bienvenido Dani! Esperamos más artículos tuyos tan buenos como el de tu debut! ;)

    Un abrazo

  2. Witi Dice:

    Hola, tengo un blog en el que subo la mayor parte de contenido visual (imágenes o vídeos) y casi nada de texto, y la página me tarda unos 5-6 segundos en cargar. Probaré lo que recomiendas, aunque no me gustaría tener que reducir la calidad de las imágenes (que es lo que me suelen recomendar otros sitios). Si tienes alguna idea para mejorar el tiempo sin tocar las imágenes me vendría bien

2 Trackbacks

  1. 6 trucos para incrementar las conversiones web en un 300% | Trucos Optimización Dice:

    [...] Reduce la velocidad de carga Las conversiones descienden un 1% por cada 0.1 segundos de disminución en el tiempo de respuesta. Un 18% de compradores online aseguran que abandonaron el commerce donde intentaban comprar debido a tiempos de carga lentos. Sin embargo, el siguiente estudio demuestra como la optimización del tiempo de carga puede llegar a incrementar las conversiones en un 66% (Slow Shopping Cart Pages Are Killing Conversions. An Optimized Page Got a 66% Conversion Lift!) Otra cifra referencia es la que sugiere Amazon, cuando asegura que las conversiones desciende un 1% por cada 0,1 segundos de disminución en el tiempo de carga de una web (Why a Fast Website Kills Two Conversion Birds With One Stone). Otra de las ventajas de reducir el tiempo de carga de tu página web es que Google lo tendrá en cuenta a la hora de posicionarte en sus resultados de búsqueda. Mientras más rápido cargue una página web, más fácil es que esta ocupe primeras posiciones en los resultados de búsqueda de Google. Puedes optimizar el tiempo de carga de tu página web con PageSpeed. [...]

  2. creacion paginas web, diseño webs, diseño web corporativa | Basicum Creativos Web » Aumentar las Conversiones Web Dice:

    [...] Reduce la velocidad de carga Las conversiones descienden un 1% por cada 0.1 segundos de disminución en el tiempo de respuesta. Un 18% de compradores online aseguran que abandonaron el commerce donde intentaban comprar debido a tiempos de carga lentos. Sin embargo, el siguiente estudio demuestra como la optimización del tiempo de carga puede llegar a incrementar las conversiones en un 66% (Slow Shopping Cart Pages Are Killing Conversions. An Optimized Page Got a 66% Conversion Lift!) Otra cifra referencia es la que sugiere Amazon, cuando asegura que las conversiones desciende un 1% por cada 0,1 segundos de disminución en el tiempo de carga de una web (Why a Fast Website Kills Two Conversion Birds With One Stone). Otra de las ventajas de reducir el tiempo de carga de tu página web es que Google lo tendrá en cuenta a la hora de posicionarte en sus resultados de búsqueda. Mientras más rápido cargue una página web, más fácil es que esta ocupe primeras posiciones en los resultados de búsqueda de Google. Puedes optimizar el tiempo de carga de tu página web con PageSpeed. [...]

Deja tu comentario