La mayoría de organizaciones de marketing no suelen incluir la velocidad del sitio web para móviles de las marcas entre sus principales prioridades. De hecho, normalmente se piensa que depende más de los desarrolladores del sitio web que de los profesionales de marketing, pero no tiene por qué ser así. A veces las bonitas imágenes de marketing que dan vida al sitio web de una marca pueden reducir su velocidad si no se gestionan con cuidado. Además, se corre el riesgo de obtener porcentajes de rebote más altos y menos conversiones y, en consecuencia, de perder oportunidades para obtener ingresos.
Si quieres conseguir que tu sitio web para móviles sea más rápido, empieza por volver a analizar las imágenes que contiene. A continuación, te presentamos algunos consejos desde el punto de vista técnico para que los analices con tu desarrollador. Además, incluimos ejemplos de Google y Alphabet. Si los sigues, tu empresa se beneficiará de la optimización de imágenes, permitiendo, en definitiva, que tus usuarios tengan una experiencia móvil más rápida.
1. Priorizar las imágenes del sitio web de tu marca
Antes de optimizar las imágenes de tu sitio web, piensa si todas son necesarias. Pregúntate, por ejemplo, si realmente son necesarias todas esas fotos en alta resolución tan maravillosas, si se pueden simplificar los GIF animados a base de código o, incluso, si se pueden eliminar.
Eliminar los recursos que no son necesarios supone ahorrar en mantenimiento y se reduce la complejidad. Además, si puedes sustituir una imagen por texto o CSS (hojas de estilo en cascada usadas para definir estilos, formas y efectos en apenas unas líneas de código), tus desarrolladores disfrutarán del reto creativo y tus usuarios se beneficiarán de un menor tamaño de descarga.
Este método se ha usado en Verily, un sitio web de Alphabet. Ahora es más sencillo y ligero gracias a las técnicas de reducción de imagen que el equipo ha aplicado. En la sección hero, se ha usado una imagen animada de forma muy inteligente con gradiente de color y que solo tiene un píxel de ancho. El gradiente se podría haber hecho con código, pero planteaba problemas de rendimiento que eran más costosos y visualmente chirriantes. El diseñador y el desarrollador trabajaron juntos para encontrar el equilibrio perfecto entre la estética y el rendimiento.
En el móvil, esta animación se ha simplificado aún más a un color de fondo uniforme, que cambia gradualmente en una secuencia codificada. La simplicidad de estas animaciones permite que la página sea más ligera, que no tenga frameworks de JavaScript pesados ni tamaños de archivos excesivos. Incluso al simular una red 3G, la página principal se carga de forma casi inmediata y consigue una puntuación de rendimiento en Lighthouse de 92, a solo unos milisegundos de los sitios web de mayor rendimiento.
2. Seleccionar un formato de imagen eficiente
Con tantos formatos disponibles, puede ser difícil saber cuál es el más eficiente. Depende de cada caso, pero si se selecciona el formato correcto, se puede reducir el tamaño de la página. Te recomendamos que empieces usando WebP, ya que te permite comprimir imágenes fotográficas y translúcidas un 30 % más que el formato JPEG, sin perder la calidad de imagen. A continuación, ten en cuenta los siguientes aspectos para que el formato que selecciones sea totalmente compatible con los navegadores:
- JPEG: fotos sin transparencia
- PNG: fondos transparentes
- SVG: iconos y formas escalables
Este enfoque se ha utilizado en el sitio web Fighting Piracy, de Google. El equipo usó el formato SVG para crear animaciones fluidas y ligeras a partir de formas simples. El diseño anterior incluía GIF y vídeos de más de 300 kilobytes cada uno, más del doble del tamaño recomendado.
Sin embargo, al destinar un presupuesto por tamaño de página web como parte de su filosofía para mejorar el rendimiento, el equipo fue capaz de reducir diez veces el tamaño de las imágenes. Fue necesario que el desarrollador y el diseñador colaborasen estrechamente en la parte técnica, pero mereció la pena, ya que se lograron mejoras en la velocidad móvil.
3. Comprimir y modificar el tamaño de las imágenes
Optimizar las imágenes permite ahorrar la mayor cantidad de bytes en lo que respecta al tamaño de los sitios web para móviles, a la vez que permite mejorar mucho el rendimiento. Hasta las optimizaciones más básicas, como comprimir imágenes, eliminar metadatos (por ejemplo, la fecha y la hora) y probar diferentes ajustes de calidad, pueden ser de ayuda. Además, ahora es más fácil que nunca publicar imágenes adaptables, ya que los desarrolladores definen varios tamaños y el navegador elige el que se adapta mejor al tamaño de la pantalla del usuario.
Lo mejor de todo es que una gran parte se puede automatizar para ahorrar tiempo y que las imágenes siempre se optimicen. Por ejemplo, se puede modificar y comprimir el tamaño de tus cientos o miles de imágenes de forma automática con una secuencia de comandos. Así se reduce el trabajo manual de los diseñadores, que podrán dedicar más tiempo a tareas más interesantes.
Al crear una página Accelerated Mobile Page (AMP), las etiquetas de imágenes personalizadas automatizan muchas de estas optimizaciones. La caché de AMP de Google también limita las dimensiones máximas de las imágenes para evitar problemas con la memoria del navegador, y almacena en caché las imágenes para que carguen más rápido en el futuro.
En el caso de BMW, la marca de coches de lujo propuso un enfoque de alto rendimiento centrado en los móviles, pero manteniendo sus bonitas imágenes y vídeos. Gracias a las etiquetas de imágenes eficientes y otras funciones que aportan más velocidad, se consiguió que el nuevo sitio web AMP alcanzase un tiempo de carga hasta cuatro veces más rápido, lo que aumentó en un 50 % los usuarios móviles. Además, el sitio web combina la velocidad de AMP con funciones enriquecidas de las tecnologías de aplicaciones web progresivas (PWA) para ofrecer una experiencia web de alta calidad muy parecida a la de las aplicaciones.
4. Usar técnicas de carga
Comprimir y modificar el tamaño de las imágenes es lo primero que deberían hacer todos los diseñadores y desarrolladores. Además de eso, los desarrolladores pueden publicar diferentes versiones de una imagen en función del dispositivo del usuario, el tamaño de la pantalla o incluso la calidad de la red. De este modo, pueden crear un sitio web que cargue rápido para cualquier persona, sin importar en qué condiciones navegue cada una.
Una vez que se han optimizado con eficacia las imágenes, comprueba que se publican en el momento adecuado. Cuando los usuarios llegan a tu página, quieren ver al instante todo el contenido en el viewport, también denominado contenido de la mitad superior de la página. Existe una técnica que se denomina carga en diferido que permite a tu página web priorizar la carga de las primeras imágenes disponibles en esta vista limitada, mientras que las imágenes fuera de la pantalla se cargan cuando sea necesario.
La empresa de comercio electrónico alemana bücher.de solo carga las imágenes que aparecen en la zona que ve el usuario. Se da prioridad al contenido que se encuentra en la parte visible de la página para que cargue al instante. Gracias a esta y otras optimizaciones de la página, bücher.de ha conseguido aumentar la velocidad de su sitio web un 33 %, así como reducir el tiempo de carga a 3,5 segundos.
Cuando las imágenes grandes tardan más en cargar, es útil aplicar técnicas de carga progresiva, como marcadores de posición, indicadores de progreso o formatos eficaces como JPEG progresivo. Los usuarios tienen la impresión de que se está progresando; por tanto, se quedarán más tiempo en el sitio web. Tal y como indica el diseñador Mustafa Kurtuldu: "La idea es rellenar el espacio y ocupar el tiempo".
Pasos siguientes: convertir la velocidad del entorno móvil en un indicador clave de rendimiento
Optimizar las imágenes es un método sencillo y rentable de mejorar las tasas de conversión del sitio web de tu marca. Pero para optimizar la velocidad a largo plazo, esta debe convertirse un indicador clave de rendimiento en toda tu organización.
Para obtener más información sobre la velocidad de tu sitio web para móviles, prueba la herramienta actualizada Test My Site.
