¿Cómo mejorar la performance de un sitio web?
El correcto funcionamiento de una plataforma digital no solo determina la experiencia de los usuarios, también influye en el posicionamiento de los sitios y las conversiones. Compartimos algunas técnicas para mejorar el rendimiento web.
La velocidad de carga y navegación de un sitio web es un aspecto fundamental para el éxito de los proyectos digitales. Según datos de Nielsen Group, la mayoría de los usuarios abandonan una página de forma inmediata si tienen que esperar más de diez segundos para obtener una respuesta.
Pero la performance no solo tiene que ver con la experiencia de uso, también tiene directa relación con las conversiones y la monetización de la plataforma. A mayor velocidad, más ventas. Varias empresas, entre ellas Google, AOL, Yahoo y Mozilla, han hecho investigaciones que demuestran incrementos no menores a partir de mejoras pequeñas en el rendimiento.
Uno de los casos más dramáticos es el experimento de Google, en el que se ralentizó el despliegue de la página de resultados de 100 a 400 ms. Como resultado, el número de búsquedas por usuario disminuyó entre 0.2% y 0.6%, demostrando que incluso un cambio de menos de medio segundo puede marcar una diferencia. Otro ejemplo es el test A/B de Mozilla que demostró que al bajar el tiempo de carga 2.2 segundos, las conversiones mejoraban un 15.4%.
Hay muchas prácticas que afectan negativamente la performance. Los marcos (iframes o códigos insertados desde otros sitios), las imágenes mal optimizadas o en formatos no apropiados y los contenidos en Flash u otro plugin de terceros, entre muchas otras tecnologías obsoletas o mal aplicadas, impiden que las respuestas se desplieguen de forma óptima ante las interacciones de los usuarios.
Las técnicas de optimización del rendimiento web o web performance optimization (WPO) no solo te ayudarán a dejar contentos a tus usuarios, sino que también mejorarán la visibilidad de tu sitio web y las conversiones. Uno de los principales factores de ranking de los buscadores es precisamente que estos respondan de forma rápida y eficiente.
¿Qué elementos y factores influyen en el rendimiento?
La optimización del rendimiento se realiza desde el desarrollo front y back end. Los objetivos principales de estas medidas son disminuir lo más posible el peso, limitar los requerimientos al servidor, aumentar la velocidad de respuesta y mejorar el despliegue de las interfaces en los navegadores.
Algunas de las medidas que puedes tomar son:
Desarrollo front end
- Verifica el sitio: Controla el peso del HTML, CSS, JS, imágenes y su tiempo de carga.
- Guarda las imágenes de forma optimizada: Comprimir y organizar imágenes es fundamental. Considera además las capacidades de cada formato en cuanto a color, soporte de animaciones y tipo de compresión.
- Disminuye lo más posible el peso de CSS y JavaScript: Para lograr esto debes usar herramientas de minificación automáticas.
- Combina archivos para reducir las peticiones: Si tienes varios archivos CSS y JavaScript, unifícalos. A esto se le llama concatenación, unir todos los archivos del mismo tipo para disminuir los llamados HTTP. En términos de performance, un llamado extra es igual o peor que colocar una imagen de unos 700kb.
- Reduce las peticiones usando Sprites CSS: En vez de que el código use varios archivos de íconos y botones, puedes usar una plantilla Sprite que combine todas las imágenes en una para que se realice una sola petición y carga.
- Sube archivos y recursos fuera del sitio: Esta práctica se llama Content Delivery Network (CDN) y consiste en repartir llamados HTTP entre varios dominios para superar la debilidad del protocolo HTTP/1.1 que solo permite dos conexiones persistentes simultáneas a un dominio. Puede usar, por ejemplo, Flickr, Picasa o Amazon para las imágenes y archivos de descarga, y Google AJAX Libraries para librerías y frameworks como jQuery.
Desarrollo back end
- Usa herramientas para generar caché: Los caché mejoran considerablemente el rendimiento de un sitio al reducir los llamados y las cargas.
- Monitorea el rendimiento del servidor y crear puntos de referencia: Verifica periódicamente el funcionamiento para identificar problemas a tiempo.
- Comprime los archivos en el servidor: Reduce el tamaño del CSS y HTML para que el tráfico de información entre servidor y cliente sea menor. Puedes usar compresión Gzip y headers expires para los archivos estáticos.
- Evita usar marcos o iframes: Se trata de páginas completas que se cargan dentro de un sitio, lo que retrasa el evento window.load, el indicador principal de la performance.
Percepción de rapidez
El funcionamiento eficiente de una interfaz es importante, pero no lo es todo para las personas. La percepción de rapidez no solo depende del tiempo que se demora un elemento en responder, también está determinada por el tipo de respuesta visual que el usuario recibe. Es decir, no importa qué tan eficiente es un sitio si las acciones no se ven y sienten rápidas.
El ritmo y la velocidad con que ocurren los cambios deben definirse en el diseño de interacción. Las ayudas visuales complementan estas decisiones para optimizar la percepción de rapidez. Algunas medidas son:
- Agregar indicadores de estado a los botones: Según un estudio de Nielsen Group, si la reacción al accionar un botón se demora más de 100 milisegundos, el usuario sentirá que lo hacen esperar. Para evitar esto, es importante agregar en el diseño un cambio que demuestre una respuesta inmediata, aún cuando el resultado real siga cargando. Por ejemplo, un botón puede cambiar de color y mostrar un ícono de carga cuando el usuario hace clic.
- Aplicar el momentum en el scroll: En el caso del diseño para móviles, es importante que se incluya un pequeño rebote al final de los scroll. Este gesto indica que no hay más contenidos disponibles y evita que el usuario piensa que aún hay elementos cargando.
- Incluir barras de carga y procesos: Muéstrale al usuario en qué está trabajando el sistema para disminuir la ansiedad y la sensación de espera. Esto también le mostrará que sí se está generando una respuesta y que no ha ocurrido un error.
Además, existe un tercer tipo de performance que se mide a nivel de la interfaz de usuario (UI). Este se refiere a la optimización de procesos en la tarjeta de video, con el objetivo de que todas las animaciones e interacciones se generen de manera suave a 60fps. Esto hace que las interfaces se sientan rápidas y responsivas, dando como resultado una mejor experiencia.
Un buen rendimiento, real, percibido y a nivel de UI, transmitirá confianza a los usuarios, mejorará la imagen de tu empresa e incrementará la efectividad de tu negocio online. Esto es especialmente importante en los sitios donde se realizan transacciones o se ingresa información sensible, ya que las personas necesitan sentir que sus datos están protegidos y que no se perderán por un mal funcionamiento. Los ecommerce, la banca y los portales de universidades, son algunos ejemplos.
Si necesitas mejorar la performance de tu sitio web o quieres crear una nueva plataforma con estas características, contáctanos y cuéntanos tu idea.
Acerca del Autor
Agregar un comentario