16.07.17 |

El impacto de la velocidad de carga en la Experiencia de Usuario

Un loading interminable puede ser el inicio de una terrible relación con tus usuarios... y con Google. Sigue leyendo y descubre cómo pisar el acelerador de tu web.

La Experiencia de Usuario (UX) es el efecto general creado por las interacciones y percepciones que alguien tiene cuando usa un producto o un servicio.

Dentro del contexto web, la velocidad de carga o Web Performance es esencial para generar una experiencia positiva en tus usuarios. Nada afecta tanto esa experiencia como enfrentarse a una página lenta, sobre todo en dispositivos móviles donde hay limitaciones de memoria y conexión. Todo esto influye directamente en la percepción del usuario e incrementa el rebote de los visitantes.

Impacto en el usuario.

Según un estudio de Akamai, un 75 % de compradores online deciden no volver a comprar en un sitio web que se congela, se bloquea, es lento o implica un proceso de pago complejo. Por otro lado, un reporte de Double Click informa que un 53 % de visitantes abandonan un sitio móvil que demora más de tres segundos en cargar.

Esto demuestra que, si no tienes cuidado con la velocidad de carga, serán altas las probabilidades de que tus visitantes se vayan (es decir, reboten) o, incluso, que no vuelvan a visitarte. En otras palabras, ellos se llevarán una mal concepto y una desagradable experiencia con tu producto digital.

Impacto en los buscadores.

La velocidad de carga es uno de los factores para tu posicionamiento en buscadores. Es decir, si tu web tiene una velocidad de carga muy lenta, puede influir en la posición en los resultados del buscador.

Haciendo un diagnóstico.

Ahora, ¿cómo saber cuál es la velocidad de carga que tiene una web? La mejor forma de conocerla es usando alguna de las herramientas online que tienes a tu disposición. Aquí te enumero las principales:

Entre las más utilizadas y reconocidas del mercado, está la herramienta PageSpeed Insights, propiedad de Google.

Esta herramienta analiza todas las peticiones hechas y devuelve un score de 0 a 100, donde 80 es un valor superior considerado como excelente. Además de ello ofrece un listado de puntos identificados pendientes por resolver.

Compárate con la competencia

Ahora que sabes cuán importante es la velocidad de carga y qué tan sencillo es hacer un reporte sobre la misma, es recomendable hacer una tabla comparativa de tus competidores directos para tener una visión más macro del panorama.

En ella deberás colocar los scores de los servicios online que utilizas, además de los siguientes valores:

  • Server Response Time.
    Es el tiempo en que se recibe el primer byte el servidor. Se recomienda que debe ser menor a 100 milisegundos.
  • Load Time.
    Es el tiempo que demora en cargar completamente la página.
  • Page Size.
    Es la cantidad total de bytes que se cargan en la web. Incluye la carga de texto, imágenes, javascript, hojas de estilos, fuentes y demás componentes.
  • Total Requests.
    Es la cantidad total de peticiones que se realizan al servidor al cargar la página.

Esto te dará mayor visibilidad de los puntos que debes resolver y, además, te permitirá analizar cómo la competencia ha resuelto ya esos pendientes. Adicionalmente, trabajando de esa forma no te perderás ningún detalle, pues podrás resaltar en rojo los puntos críticos y en azul los valores óptimos.

Mejorando la velocidad de carga.

Utilizando las técnicas correctas es posible reducir drásticamente el tiempo de carga de una web, esto sin necesidad de afectar las funcionalidades propuesta por el equipo de Experiencia de Usuario y Diseño de interfaces.

En el libro High Performance Web Sites: Essential Knowledge for Front-End Engineers se explica la Performance Golden Rule:

Sólo el 10 % – 20 % del tiempo de respuesta se utiliza en descargar el documento HTML. El otro 80 % – 90 % está empleado en descargar todos los componentes en la página.

Esto significa que si te centras en reducir el impacto de los componentes de tu web, tendrás mayor probabilidad de reducir drásticamente la velocidad.

Estas son algunas de las recomendaciones propuestas por este libro:

  • Reducir las peticiones HTTP.
  • Agregar headers de Expiración.
  • Utilizar compresión Gzip.
  • Colocar los estilos en el header.
  • Colocar los scripts en el footer.
  • Poner JavaScript y CSS en archivos externos.
  • Reducir las búsquedas DNS.
  • Minificar o minimizar archivos JavaScript y CSS.
  • Evitar las redirecciones.
  • Configurar los eTags.
  • Eliminar scripts duplicados
  • Optimizar las imágenes.
  • Utilizar dominios libre de cookies.

Lo ideal es que el equipo de desarrollo trabaje desde el inicio del proyecto para asegurarse que estas reglas estén contempladas en la implementación de tu proyecto..

Conclusiones.

Es importante tener en cuenta el optimizar la velocidad de carga adecuadamente. Para ello, los equipos de Frontend y Backend deben trabajar en mejorar este punto.

Además, siempre recuerda que “optimizar” no significa reducir o eliminar funcionalidades, sino aplicar técnicas y métodos que mejoren el rendimiento sin afectar la usabilidad y contenido del sitio web.

Finalmente, asegúrate que los Equipos de Diseño mantengan un balance entre imágenes y contenido, de forma que se transmita adecuadamente el contenido sin incrementar la velocidad de carga.

Comentarios