Velocidad de tiempo de carga en diseño web

Si hacemos caso a las estadísticas un 50% de los usuarios saldrán de una web que no cargue en 5 segundos. Yo no soy mucho de creer en las estadísticas, pero es lo que yo hago: navegando por mi timeline de Twitter me encuentro con muchos enlaces a los que le suelo echar un ojo. Como normalmente lo hago desde el móvil, dependo de mi 3G (3G =~ 3mpbs debajo de una antena repetidora) y ando un poco alerta a la transferencia – todos sabemos como a las empresas de telecomunicaciones les gusta sacarnos el dinerito apenas nos excedemos en uno de sus productos – soy de esos que si no carga rápido le doy a “back” y sigo navegando mi timeline.

Velocidad de Conexión

Si hay algo más de moda que Responsive Design son las redes sociales, el 60% de los usuarios de Twitter acceden a través de móvil y 157.000.000 de personas usan Facebook SOLO desde el móvil. Estoy seguro que siempre intentamos que nuestra web se “mueva” en las redes sociales, que compartimos links de nuestro último post del blog en Twitter y que publicamos el último producto en Facebook. Esas personas irán a tu sitio web desde un dispositivo móvil.

La navegación móvil es la que más problemas nos da con la velocidad de conexión (en segundo lugar después del WIFI de hotel ¬¬), teniendo en cuenta que los teléfonos móviles se comunican con las torres de señal por medio de un chips de radio, con tres estados: activo, esperando y libre. Cuando cambia de libre a activo tarda de 1 a 2 seg para activarse y empezar a recibir/enviar señales. Si hemos dicho que el usuario promedio deja la web en 5 segundos, tienes 3 segundos para cargar tu web =D

En 2008, cuando no vivíamos tan estresados y podíamos esperar por cargar una web, el grupo Aberdeen realizó un estudio para calcular el impacto del tiempo de carga en más de 160 organizaciones con un promedio de ganancias anuales de $1.3 billones. Un 7%. de pérdidas de conversión por un segundo más de tiempo de carga: $2.500.00 perdidos anualmente para los que hagan $100.000 al día.

Impacto en el retardo de carga de una web
Fuente: Strangeloop

El problema de todo esto es que aún reduciendo nuestra web a 20k de peso siguen habiendo factores que no son solo el peso de la web. Por ejemplo en 3g cuando apuntamos nuestro navegador a esa web de 20k el móvil tarda un apr de segundos en activar ese “chip de radio” + “DNS Lookup” + “Socket Connect” + “HTTP Request” + “Descarga del contenido” y en un proceso de 5 etapas solo podemos ayudar a mejorar una pero es importante que lo hagamos.

Reducir el tiempo de carga requiere sentido común:

No cargues Scripts que no vas a utilizar: ¿Cuántas veces no incluimos jQuery en el header y lo cargamos en todas las páginas? incluidas aquellas que no usan ningún plugin. No solo lo hacemos nosotros, muchos CMS te hacen 5 o 10 peticiones de Scripts que no utilizan: no les permitas cargar contenido inútil.

Optimiza las imágenes: Con la variedad de dispositivos y tamaños que tenemos hoy día, cargar la misma imágen para todos es imperdonable. ¿Porqué no cargar una para cada target? Un móvil requiere una imagen pequeña, una tablet una más grande, desktop puede requerir otra versión de la imagen y no nos olvidemos de los dispositivos retina. Si esto se te hace un lío, puede que un script llamado PictureFill te ayude. He puesto la versión de Joan León quien amablemente lo ha modificado y ha corregido un fallo del original, al no poder utilizar la etiqueta TITLE en las imágenes.

Optimiza tu contenido: Minimiza las HTTP Request que son, básicamente, la descarga de archivos necesarios para renderizar la página, esta es la clave para reducir tiempos de carga. Obviamente empieza por simplificar el diseño, como ya debemos saber el diseño es optimización y una página bien diseñada es una página rápida, entre otras cosas. Hay varias técnicas que podemos usar para reducir las llamadas a servidor, como por ejemplo los sprites, uniendo y minificando Scripts y CSS, etc…

Medir, testear, testear y testear:

Te dejo algunas herramientas para poder medir tu web y su tiempo de descarga:

Pr0tip:La consola de tu navegador también puede ayudarte a obtener el tiempo de carga.


var start = Date.now();
console.log("Page load took " + (Date.now() - start) + "milliseconds");

Via HTML5rocks

Espero que con esto podamos empezar a construir una web más rápida y accesible para todos aquellos que navegamos desde un 3G en la cola del banco o conectados al WIFI de un hotel. Si, la velocidad de carga no solo afecta móviles: desktops/laptops también se ven afectados por WIFI de hotel – en mi opinión Dante debió agregar un círculo más a su “inferno” y llamarle ‘WIFI de Hotel’ -.

Gracias por leer!

Daniel Martínez

4 comentarios - ¿Quieres opinar?
  1. El PictureFill sigue con el problema del title :/

  2. Le agregue | data-title=”” | para que no me aparezca el “null”. Algo es algo :P

  3. Pregunta: me estoy introduciendo de a poco y me convenció utilizar este script para optimizar para móviles. Quiere decir que tengo que hacer un apaño en “algún” lado para no tener ese “problema” del título???

  4. Hola Edgar, a que “título” te refieres? Y con respecto a los “apaños”, todos los básidos están en el artículo =D

Opiniones y preguntas:

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