En la mayoría de los equipos de marketing, la velocidad de los sitios móviles no siempre encabeza la lista de prioridades. De hecho, puede ser que pienses que la responsabilidad les corresponde a los desarrolladores. Pero eso no es necesariamente cierto. En algunas ocasiones, las imágenes que dan vida a las páginas web de las compañías pueden retrasar los tiempos de carga si no se administran con cuidado. Y eso implica el riesgo de tener tasas de rebote más altas y menos conversiones, lo que se traduce en la pérdida de ingresos.
Si buscas aumentar la velocidad de carga del sitio móvil de tu marca, comienza por reevaluar sus imágenes. A continuación, te ofrecemos cuatro sugerencias para que trabajes en conjunto con tu desarrollador, incluidos algunos ejemplos de Google y Alphabet, que te ayudarán a ofrecerles una experiencia más rápida a tus usuarios.
1. Prioriza las imágenes de tu sitio móvil
Antes de optimizar las imágenes de tu página web, evalúa si todas son necesarias. Esa foto de alta resolución luce increíble, pero ¿realmente comunica el mensaje que deseas? ¿Ese GIF puede simplificarse en una animación más eficiente? O, mejor aún, ¿se puede quitar por completo?
Retirar elementos innecesarios reduce el mantenimiento y la complejidad. Además, si se puede reemplazar una imagen con texto u hojas de estilo (CSS) –que definen la apariencia de un documento escrito a través de ciertos códigos–, tus desarrolladores disfrutarán del desafío creativo y tus usuarios se ahorrarán los tiempos de carga.
Alphabet implementó esta estrategia en el sitio de la empresa Verily. En la actualidad, es simple y liviano gracias a las técnicas de reducción de imágenes aplicadas. La primera que se muestra en la página de inicio tiene un degradado animado de manera ingeniosa de un píxel de ancho. Si bien podría haberse creado en código, esto hubiera causado problemas de rendimiento costosos y visualmente molestos. El diseñador y el desarrollador trabajaron juntos para garantizar el equilibrio perfecto entre la estética y la performance.
En los dispositivos móviles, esta animación se simplificó aún más con un color de fondo sólido que cambia gradualmente en una secuencia codificada. La sencillez de estas técnicas permite tener un sitio liviano sin marcos de JavaScript pesados o archivos excesivamente grandes. Incluso, al simular una red 3G, la página principal logra un tiempo de carga casi instantáneo y una puntuación de rendimiento en Lighthouse de 92 milisegundos, lo que la posiciona entre las páginas con mejor performance.
2. Elije un formato de imagen eficiente
Con tantos formatos disponibles puede resultar difícil saber cuál es el más eficiente. Todo depende de su uso, pero elegir el correcto puede ahorrarte algunos bytes en tu página. Intenta comenzar con el WebP, que puede emplearse para imágenes fotográficas y translúcidas con un 30% más de compresión que el JPG, sin perder su calidad. Luego, recurre a los demás para aumentar la compatibilidad con tu navegador:
- JPG: fotos sin transparencias
- PNG: fondos transparentes
- SVG: íconos y formas escalables
Implementamos este enfoque en nuestra página Fighting Piracy, donde el equipo de Google utilizó el formato SVG para crear animaciones livianas y fluidas a partir de formas simples. Los conceptos de diseño anteriores incluían GIF y videos de más de 300 KB en ambos casos, más del doble del tamaño recomendado. Sin embargo, se pudo reducir diez veces el peso de las imágenes. Esto requirió una estrecha colaboración entre el desarrollador y el diseñador, pero las mejoras en la velocidad de carga del sitio móvil realmente valieron la pena.
3. Comprime y redimensiona las imágenes
Optimizar las imágenes puede ahorrarte bytes y potenciar el rendimiento de tu sitio de manera significativa. Incluso, es posible que las mejoras más básicas, como comprimirlas, quitar metadatos (por ejemplo, la fecha y la hora) y experimentar con la configuración de calidad, resulten eficaces. Hoy es más fácil que nunca que sean responsivas, ya que los desarrolladores definen varios tamaños y el navegador elige el que mejor se adapta a la pantalla del usuario.
Muchas de estas acciones se pueden automatizar para ahorrar tiempo y garantizar que las imágenes estén siempre optimizadas. Por ejemplo, es posible que se compriman y se redimensionen a través de un script. Esto reduce el trabajo manual de los diseñadores y les permite realizar tareas más importantes.
Al crear una Accelerated Mobile Page (AMP), las etiquetas de imagen personalizadas automatizan muchas de estas optimizaciones. El caché de estos sitios también limita sus dimensiones máximas para evitar problemas con la memoria del navegador y las almacena con la intención de acelerar los tiempos de carga en el futuro.
En el caso de BMW, la marca de automóviles de lujo se propuso desarrollar un enfoque de alto rendimiento orientado a los dispositivos móviles, que además mantuviera sus imágenes y videos. Gracias a las etiquetas de AMP y otras herramientas que aumentan la velocidad, el nuevo sitio logró un tiempo de carga hasta cuatro veces más rápido, con un incremento del 50% en los usuarios de smartphones. Como beneficio adicional, la página ofrece una experiencia de gran calidad similar a la de una aplicación.
4. Utiliza técnicas de carga
Comprimir y redimensionar las imágenes es el enfoque básico que todos los diseñadores y desarrolladores deben aplicar. Para dar un paso más, los segundos pueden publicar distintas versiones de la imagen según el dispositivo del usuario, el tamaño de la pantalla o, incluso, las condiciones de su red.
Dicho de otra manera, tu sitio web puede publicar una imagen más pequeña para pantallas más chicas y una más comprimida (o ninguna) para redes más lentas. Esto permite a los desarrolladores crear una página que se cargue rápidamente para todos, independientemente de las condiciones específicas del navegador que utilicen.
Una vez que las imágenes hayan sido optimizadas, asegúrate de que se muestren en el momento adecuado. Cuando los usuarios visitan tu sitio por primera vez desean mirar instantáneamente todo el contenido de la “mitad superior de la página”. Con una técnica llamada carga diferida, puedes priorizar los primeros elementos disponibles en esta vista limitada, mientras que los que se encuentren fuera de la pantalla se enseñarán cuando sea necesario.
La empresa alemana de comercio electrónico bücher.de solo carga imágenes si aparecen en el área visible para el usuario. Mediante esta y otras optimizaciones en su página pudo aumentar su velocidad un 33% y reducir su tiempo de carga a 3.5 segundos.
Cuando las imágenes tardan más en cargarse, resulta útil implementar técnicas como marcadores de posición, indicadores de progreso o formatos eficientes (por ejemplo, el JPG). Esto, al menos, da a los usuarios la sensación de que se está avanzando y ayuda a mantenerlos en el sitio durante más tiempo. Como dice el defensor del diseño Mustafa Kurtuldu: “La idea es llenar el espacio y ocupar su tiempo”.
Próximos pasos: establece la velocidad como un indicador clave de rendimiento
Optimizar las imágenes es una forma simple y rentable de mejorar las tasas de conversiones en el sitio móvil de tu marca. Pero, para que el incremento de la velocidad sea sostenible a largo plazo, debe ser un indicador clave de rendimiento para toda tu empresa.
Para obtener más información sobre la velocidad de los sitios móviles te recomendamos la nueva herramienta Prueba Mi Sitio.
