Aunque podría ser tentador implementar algunos de los elementos más recientes de diseño en tu sitio web porque parecen ser llamativos, esto podría tener un efecto no deseado en el desempeño de tu sitio web, afectando de esta manera tu SEO (por sus siglas en inglés - Optimización de Motores de Búsqueda). En este post, vamos a describir cinco elementos y tendencias populares que pueden sobrecargar tu sitio y afectar su desempeño.
Como lo hemos mencionado en publicaciones anteriores, una buena experiencia de usuario conduce frecuentemente hacia mayores tasas de conversión. La velocidad de carga de un página web (“page speed”) es un componente significativo en la experiencia de usuario. Sabemos que a la gente no le gusta que una página web tome más de un pocos segundos para terminar de aparecer en pantalla. De acuerdo a estudios por parte de Google, casi la mitad de los usuarios de la web esperan que un sitio web cargue en dos segundos o menos, y los visitantes abandonarán el sitio si toma más de tres segundos. El tiempo de carga de una página no es sólo importante para la experiencia de usuario sino también para otros propósitos; por ejemplo, mejorar el posicionamiento de nuestro sitio web en Google. Google ha indicado que la velocidad de carga de una página web es una de las señales usadas por su algoritmo de posicionamiento, y en el caso de las búsquedas móviles, el tiempo de carga tiene un mayor peso en la determinación de la posición de un sitio, como lo hemos discutido en este blog (en inglés).
Varios factores pueden afectar el tiempo de carga de una página. Algunos de estos factores están fuera de nuestro control o del control del administrador de un sitio web; por ejemplo, la velocidad de la conexión de Internet de tus visitantes. Sin embargo, existen otros factores que sí podemos controlar y optimizar de forma fácil. Sorprendentemente, estos factores tienen que ver con elementos de diseño comunes que se encuentran presentes en muchos de los sitios web modernos. Algunas veces, los elementos más comunes de un página web se vuelven invisibles durante los esfuerzos de optimización al ser obvios. Por ejemplo, todo usuario de la web sabe que las imágenes son una parte indispensable de un sitio web. Sin embargo, las imágenes frecuentemente representan la mayor cantidad de bytes descargados de una página web. Existe una correlación directa entre la velocidad de carga de una página y su peso. Aun así, todavía es frecuente encontrar muchos sitios web con imágenes sin optimizar. Por lo tanto, las imágenes suelen ser la principal causa detrás de la lentitud de un sitio web.
En el entorno en línea de hoy en día, la optimización de imágenes es esencial para asegurar un experiencia de usuario positiva y un SEO efectivo. La regla básica es: no subas imágenes en su formato original. Te compartimos tres recomendaciones generales para optimizar las imágenes de tu sitio web:
- Reducir el tamaño de archivo de tus imágenes sin sacrificar su calidad.
- Especificar las dimensiones correctas de la imagen.
- Elegir el formato de imagen correcto.
Como ya lo mencionamos previamente, la velocidad de carga de una página depende principalmente de las imágenes en la página web. Sin embargo, el tiempo que una página web toma para cargarse completamente no es el único problema que surge con el uso de las imágenes; también debemos poner atención en cómo se comporta la página mientras se está cargando. Por ejemplo, ¿has notado cómo el contenido de una página web parece cambiar y moverse mientras la página todavía se está cargando o cuando te estás desplazando hacia abajo? aunque a primera vista esto pareciera una molestia menor, estos detalles podrían disuadir a los visitantes de quedarse más tiempo en tu sitio web. A continuación revisaremos otros elementos que afectan en forma negativa la velocidad de carga de una página y la experiencia de usuario:
1. Carruseles (“Sliders”)
Los carruseles de imágenes (también conocidos como diapositivas de imágenes o rotadores de imágenes) han sido una tendencia de diseño popular en los últimos años. Un carrusel consiste principalmente de un conjunto de imágenes con texto superpuesto que rota en el encabezado de la página principal. Los carruseles pueden ser una forma efectiva de mostrar productos y cualquier otro tipo de trabajo creativo (por ejemplo, trabajos de fotografía). Sin embargo, los carruseles pueden hacer que una página web cargue más lentamente. Para algunos sitios de firmas legales, las imágenes del carrusel suelen ser las imágenes más grandes (incluso en tamaño de archivo) en sus páginas. También, existe un debate continuo sobre el uso de carruseles en sitios web debido a su costo de desempeño y su efectividad. Un problema común con los carruseles que rotan automáticamente es que el tiempo promedio que un usuario está dispuesto a pasar en una página es típicamente mucho menor al tiempo que toma rotar todas las imágenes del carrusel.
Si decides que realmente necesitas un carrusel en tu sitio web, es crucial que se optimice para una carga más rápida. Recomendamos usar un máximo de cinco imágenes (menos de ser posible), y es importante optimizarlas (en otras palabras, al menos reducir su tamaño de archivo).
2. Efectos de Animación
Los efectos de animación pueden mejorar la experiencia de usuario cuando son implementados correctamente pero aun así pueden afectar el desempeño de un sitio web. Muchos diseñadores se apoyan en librerías de JavaScript como jQuery para agregar animación a su sitio web. El código JavaScript puede reducir el tiempo de carga de tu sitio web si no es implementado correctamente, puesto que toma tiempo descargalo, interpretarlo, y ejecutarlo. Una de las principales desventajas de usar librerías de JavaScript para crear efectos de animaciones es tener que descargar todos los componentes posibles de la librería aún cuando solamente terminarás utilizando dos o tres componentes (por ejemplo, un efecto de animación específico para un botón). Los navegadores modernos pueden animar elementos solamente utilizando HTML5 y CSS3, teniendo un impacto mínimo en el desempeño del sitio. Estos efectos de animación son de fácil acceso, poderosos, y rápidos.
IMPORTANTE: Si tu sitio web se encuentra dentro del 5% que todavía utiliza Flash para efectos de animación, busca otras alternativas con HTML5 y CSS3.
Los efectos de animación no deben ser usados para hacer un sitio web más llamativo; la animación debe usarse esporádicamente y sólo como apoyo en la interacción con el usuario. En otras palabras, no agregues animación a algo sólo porque puedes hacerlo. Cuando la animación es usada incorrectamente, puede llegar a molestar o frustrar a los usuarios, aparte de resultar en el aplazamiento de la carga de páginas. Así que si estás diseñando tu sitio web, se consciente de los efectos que las animaciones podrían tener en el desempeño de tu sitio.
Recuerda tener un propósito detrás de cada decisión de diseño. Siempre debería haber una buena razón para incorporar efectos de animación a tu página web.
3. Fuentes Web Personalizadas (“Custom Web Fonts”)
Las fuentes web personalizadas son fuentes que no se encuentran disponibles en la computadora del usuario de manera predeterminada. Así como otros elementos de diseño, las fuentes personalizadas pueden mejorar la apariencia de un sitio web y su experiencia de usuario. Sin embargo, tienen la desventaja que pueden disminuir la velocidad de las páginas de tu sitio al tener que descargar recursos adicionales pesados. Las fuentes personalizadas son recursos que pueden bloquear el renderizado (“render-blocking”), es decir, la página web no podrá desplegar el contenido apropiadamente sino hasta que hayan sido descargadas completamente. Los recursos que bloquean el renderizado son una de las razones más comunes para que una página cargue lentamente. Por lo mismo, las fuentes personalizadas deben ser usadas con precaución porque no solamente contribuyen al peso de la página, sino que también pueden bloquear el renderizado del texto y otros elementos en la página. Podría sonar como algo muy técnico, pero puedes reconocer este efecto secundario fácilmente, especialmente cuando estas conectado a un red móvil. Es ese efecto parpadeante inesperado que resulta cuando el navegador despliega el texto con una fuente predeterminada, como Arial, mientras termina de cargar la fuente personalizada, y cuando se encuentra lista, redibuja el texto con la nueva fuente.
Si consideras que los beneficios de una fuente personalizada supera las desventajas potenciales, existen algunas formas para mitigar los problemas de desempeño. Para comenzar, no uses más de dos fuentes personalizadas en una página, y sólo usa fuentes seguras para la web (“web-safe fonts”) cuando sea posible. Las fuentes seguras para la web son fuentes que ya se encuentra preinstaladas, dependiendo de tu dispositivo y sistema operativo. Por ejemplo, muchos sistemas operativos usan Arial en forma predeterminada, pero también cuentan con fuentes similares tales como Helvetica, Verdana, o Calibri. Si decides usar fuentes personalizadas, intenta usar fuentes que son utilizadas ampliamente en otros sitio web, de tal manera que posiblemente el usuario ya las tenga descargadas e instaladas en su navegador. Una lista de las fuentes personalizadas de Google más comunes puede ser encontrada aquí (en inglés). Por último, intenta reservar esas fuentes personalizadas sólo para elementos importantes de tu página web como el eslogan o los encabezados, donde tienen mayor posibilidad de lograr más impacto.
4. Complementos para Aplicaciones (“Plugins”)
Los complementos para aplicaciones son componentes de software diseñados para agregar nueva funcionalidad adicional a tu sitio web. Sin embargo, tener demasiados complementos en tu sitio web o usar complementos que no están optimizados puede alentar tu sitio web en forma dramática, afectando de esta manera la experiencia de usuario en forma negativa. Los complementos usualmente tienen que descargar código (por ejemplo, archivos de JavaScript o CSS) en cada página, y algunos complementos tienen que hacer llamadas a bases de datos remotas para rastrear la actividad del usuario. A mayor número de llamadas a bases de datos o recursos que el complemento tiene que hacer, más lento tu sitio web se volverá. Por lo tanto, es importante ponderar el valor potencial de la nueva funcionalidad que el complemento provee contra el impacto en el desempeño de tu sitio web.
Otros complementos pueden llevar a cabo solicitudes remotas a interfaces de programación de aplicaciones (“APIs”) de servicios de terceros. Cualquier llamada externa desde tu sitio hacia esos servicios para poder ejecutar el complemento puede impactar su desempeño. Este es el caso del API de Google Maps que permite mostrar mapas en tu sitio web. Google Maps puede alentar tu sitio web si no es implementado correctamente. Una forma rápida y sencilla de resolver este problema de desempeño es insertar un mapa estático de Google (en otras palabras, una imagen), y redirigir a los usuarios a Google Maps cada vez que den clic a la imagen.
No existe un número mágico para la cantidad máxima de complementos que deberías tener en tu sitio web. El número de complementos es menos importante que la calidad de los mismos. Te recomendamos ampliamente trabajar de la mano con tu equipo de TI para revisar cómo tu selección de complementos podría afectar el tiempo de carga de tus páginas web.
5. Aplicaciones para Redes Sociales (“Widgets”)
Una presencia sólida en redes sociales puede generar tráfico hacia el sitio web de tu firma legal, por lo que las aplicaciones de redes sociales (ya sea en la forma de botones para compatir, contadores, o agregadores de contenido) pueden resultar muy útiles. Sin embargo, algunas aplicaciones para redes sociales pueden retrasar la carga del contenido de tu sitio web. Muchas aplicaciones para redes sociales que se encuentran basadas en JavaScript permiten recuperar y desplegar datos desde diferentes redes sociales. Como lo comentamos en el punto anterior, algunas veces un complemento puede hacer llamadas a servicios de terceros que podrían impactar el desempeño de un sitio en forma significativa. También podrían causar errores de validación y problemas de seguridad. Los errores de validación pueden afectar en forma negativa la manera como tu sitio web se verá y comportará. Los sitios sin errores de validación tienden a ser mejor vistos en un mayor rango de navegadores y dispositivos.
Las aplicaciones para redes sociales son benéficas para tu sitio web cuando son usadas en forma inteligente. Recomendamos usar sólo unas pocas aplicaciones para redes sociales (de dos a cuatro). Después de todo, no es necesario agregar redes sociales a tu sitio web que no usas o necesitas realmente (por ejemplo, Pinterest). En la mayoría de los casos, un conjunto de botones de redes sociales (en otras palabras, simplemente íconos de redes sociales que se conectan con los sitios de las redes sociales) en el pie de página o en la barra lateral bastará. La próxima vez que te sientas tentado a incluir una nueva aplicación para redes sociales en tu sitio web, considera primero si realmente te ayudará a convertir visitantes en clientes. Es importante incluir sólo los perfiles de redes sociales que realmente mantienes y actualizas. De otra manera, podrías estar alejando visitantes que podrían estar siguiéndote si descubren que no publicas frecuentemente o no mantienes una comunicación efectiva con tus seguidores. Otra razón por la cual los visitantes se podrían sentir desalentados es descubrir que el contenido en tu perfil no es relevante para ellos.
EXPERIENCIA DE USUARIO EN DISPOSITIVOS MÓVILES
En esta era donde el acceso web por medio de dispositivos móviles predomina, es importante poner una atención especial al desempeño de tu sitio web en los dispositivos móviles. Debemos considerar que los sitios web usualmente cargan más lentamente en dispositivos móviles, debido a un ancho de banda bajo y una latencia alta en las conexiones de las redes celulares. Los usuarios móviles no siempre están conectados al Internet con conexiones de alta velocidad en la casa o en la oficina. También, los navegadores disponibles en dispositivos móviles tienden a ser más lentos en comparación a los navegadores de escritorio. Por lo mismo, la experiencia de usuario en dispositivos móviles tiende a ser más frustrantes en general si el sitio web no se encuentra optimizado adecuadamente. Con cada vez más gente usando un dispositivo móvil para encontrar información en línea, ha sido prioritario para Google adaptar los resultados de búsqueda para los usuarios móviles. Google no está interesado en enviar los usuarios hacia sitios web que no cargan rápidamente en sus dispositivos. De modo que la experiencia para el usuario móvil juega un rol importante en el posicionamiento de los sitios en los resultados de la búsqueda.
Los usuarios móviles en la web se distinguen por ser impacientes. La mayoría esperan que un sitio web cargue con la misma velocidad en sus dispositivos móviles como en sus computadoras de escritorio. Por lo tanto, no podemos simplemente aplicar las mismas decisiones de diseño utilizadas anteriormente en esta nueva era móvil. Como buena práctica, debemos reducir el número de elementos que puedan reducir la velocidad de carga para un página como pueden ser las imágenes de gran tamaño, videos de larga duracion, fuentes personalizadas, o librerías de animación. Si comparas los sitios diseñados para escritorio con de los diseñados para móviles, notaras que los sitios móviles usualmente tienen menos contenido visible en la página principal. Un buen sitio web móvil debe ser limpio y simple, pero aún así, ofrecer la misma funcionalidad esencial de la versión de escritorio. Y por supuesto, recomendamos tener una versión AMP (por sus siglas en inglés – páginas aceleradas para móviles) de tu sitio web en la red de distribución de contenidos (“Content Delivery Network (CDN)”) de Google.
Ve este video para obtener más información sobre las Páginas Móviles Aceleradas (en inglés).
Un último consejo es siempre probar tu sitio web bajo las mismas condiciones que la mayoría de tus visitantes experimenta (por ejemplo, una conexión móvil lenta). La mayoría de los sitios web han sido construidos usando una computadora de escritorio conectada a una conexión de alta velocidad y probados en la misma computadora bajo las mismas condiciones. Por lo mismo, la experiencia de usuario en dispositivos móviles es algo que no se toma en cuenta sino hasta más tarde, cuando los problemas comienzan a surgir.
CONCLUSIÓN
Para las firmas legales es esencial que sus sitios web ofrezcan una buena experiencia de usuario porque puede ayudar a crear una impresión positiva (o negativa) de sus marcas y servicios. Si tu sitio web carga lentamente, los visitantes podrían simplemente optar por visitar otro sitio. La velocidad de carga de un sitio web es un elemento crítico en el manejo exitoso de un sitio web. A pesar de estar conscientes al respecto, aún hay muchos diseñadores web que no lo tienen dentro de sus prioridades. En vez de eso, se enfocan en funcionalidades complejas para el sitio web y en diseños web sofisticados. Con la última actualización del algoritmo de Google sobre la velocidad de carga, es mejor que lo hagas tu prioridad desde ahora. Los elementos de diseño más comunes en tu sitio web son un buen punto de partida para comenzar a optimizar su desempeño.
