No todo lo que tiene que ver que Experiencia de Usuario es visual. Un factor invisible como el tiempo que tarda en cargar una página web es críticos en el diseño de UX para hacerla más usable y aumentar sus conversiones.
Aunque los usuarios pueden tener acceso a conexiones a Internet cada vez más rápidas y a dispositivos con mejores procesadores, el tiempo de carga de una página web todavía se encuentra en un promedio de 12 segundos de carga, en la mayoría de los casos por malas prácticas de diseño y desarrollo. Mejorar este tiempo de carga y las causas que lo origina impacta la usabilidad percibida del usuario.
Un estudio de Google encontró una relación inversamente proporcional entre el tiempo de carga de una página y la probabilidad de que su usuario la abandone. Si la página tarda:
- 1 a 3 segundos la probabilidad de abandono aumenta un 32%
- 1 a 5 segundos la probabilidad de abandono aumenta un 90%
- 1 a 6 segundos la probabilidad de abandono aumenta un 106%
- 1 a 10 segundos la probabilidad de abandono aumenta un 123%
De forma similar, si el número de elementos en la página -texto, títulos, imágenes— sube de 400 a 6,000, la probabilidad de conversión (de que el usuario termine lo que está haciendo) cae un 95%.
Como se puede notar en la gráfica, el tiempo de carga ideal para un usuario es debajo de los 3.3 segundos, que corresponde con el mayor índice de conversiones.
Factores del tiempo de carga de una página web
Aunque el ancho de banda juega un papel importante, es necesario reconocer que no es posible para los dueños del sitio (y a veces tampoco para el usuario) controlar el ancho de banda al que tiene acceso. Es mejor asumir que los usuarios tendrán anchos de banda lentos o limitados y enfocarnos en los factores que están bajo nuestro control.
Al contrario de lo que se asume comúnmente, el tiempo de carga de un sitio aumenta debido a malas prácticas de diseño y desarrollo web, y a una mala gestión del servidor donde la página se hospeda. Entre los errores y problemas más comunes se encuentran:
- Imágenes demasiado grandes o poco optimizadas,
- Carga de elementos visuales con contenido como imágenes de carruseles o publicidad,
- Falta de uso del cache del usuario para reducir la carga en sesiones subsecuentes,
- Carga de scripts de JavaScript muy grandes,
- Hojas de estilo CSS sin optimizar,
- Falta de compresión desde el servidor web,
- Carga de elementos de sitios de terceros que son más lentos,
Un factor importante es que no todos los sitios están correctamente optimizados para dispositivos móviles, a pesar que sabemos que más de la mitad del tráfico de un sitio web se origina en smartphones:
Consciente del aumento del tráfico desde dispositivos móviles, Google anunció la liberación de su Mobile-First Index, lo que significa desde 2018 las páginas web optimizadas para móviles tendrán una mejor posición en los resultados orgánicos del buscador que las que estén enfocadas a pantallas grandes en computadoras de escritorio.
Métricas de medición de tiempo de carga
La medición y optimización del tiempo de carga de un sitio no depende de un factor único. Para poder darle seguimiento y de la misma manera en que se hace en los estudios de usabilidad, es necesario definir métricas de desempeño que nos ayuden a planear de manera cuantitativa.
Algunas métricas indispensables son:
- Tiempo de interacción. Es el tiempo que tarda la página en reaccionar a una acción del usuario, por ejemplo, clic o tap en un botón para mostrar contenido, para comenzar a abrir una página nueva o para descargar un archivo.
- Tiempo de carga mínimo (primer byte). Mide el tiempo que tarda en establecerse la conexión entre el usuario y el servidor y comenzar a descargar los elementos estáticos de la página, después del rederizado en el servidor.
- Peso de la página. Es el tamaño completo de los elementos estáticos de la página (en Kilobytes) que se necesitan descargar para ver la página completa.
- Tiempo para iniciar renderizado. Es el tiempo que le toma al navegador interpretar los elementos que ha descargado (HTML, CSS, JavaScript, imágenes, etc.) para comenzar a «dibujar» la página web.
- Número de solicitudes. Mide el número de peticiones que una página hace a un servidor (propio o de un tercero) durante su carga.
- Tiempo de carga. Es el tiempo total promedio que toman todos los elementos de una página para descargarse al usuario.
- SpeedRank. Es una medida del tiempo de carga de la página comparado con otros sitios similares, que se mide en puntos porcentuales (0-100%).
Herramientas para medición y optimización de sitios web
Google ha creado algunas herramientas para poder hacer análisis del tiempo y la experiencia de carga de una página web para optimizarlas:
PageSpeed Insights
PageSpeed Insights analiza el contenido de una página web y crea sugerencias para hacerla más rápida, además de que permite medir algunas métricas de tiempo de carga.
Google Test My Site
Test My Site mide la velocidad de todas las páginas que conforman tu sitio en función de datos del mundo real recopilados mediante el Informe sobre la experiencia de usuario en Chrome (Chrome User Experience Report). Este informe se actualiza todos los meses y está disponible de forma pública y es la fuente de datos históricos y actuales. Los datos se muestran por país y tipo de conexión efectiva.
Conclusión
Comprendiendo de manera cuantitativa los factores que aumentan el tiempo de carga de una página, podremos trabajar en un plan de mejora para llevar nuestras páginas y aplicaciones a más usuarios en menos tiempo para ayudarlos a lograr sus objetivos.
