4 consejos claves para priorizar la velocidad de su página móvil
En la mayoría de las organizaciones de marketing, la velocidad móvil para el sitio web de la marca no siempre está en la parte superior de la lista de prioridades. De hecho, puede creer que está más en el ámbito del desarrollador de su sitio que en el ámbito del marketing . Pero eso no es necesariamente cierto. A veces, las hermosas imágenes de marketing que dan vida al sitio de una marca pueden reducir la velocidad del sitio móvil si no se manejan con cuidado. Y eso corre el riesgo de tasas de rebote más altas y menos conversiones , lo que se traduce en oportunidades de ingresos perdidas.Si está buscando ganancias de velocidad de página móvil, comience por reevaluar las imágenes en su sitio. Aquí hay algunos consejos más técnicos para trabajar con su desarrollador, incluidos ejemplos ilustrativos de Google y Alphabet. Estos consejos ayudarán a su empresa a aprovechar los beneficios de la optimización de imágenes y, en última instancia, a crear una experiencia móvil más rápida para sus usuarios.
1. Priorice las imágenes de su sitio de marca en orden de importancia
Antes de optimizar las imágenes en su sitio, considere si todas son necesarias. Claro, esa foto de alta resolución se ve genial, pero ¿realmente ayuda a transmitir el mensaje que está tratando de transmitir? ¿Puede ese GIF animado simplificarse en una animación más eficiente simplemente en código? O mejor aún, ¿se puede eliminar por completo?Eliminar activos innecesarios reduce el mantenimiento y la complejidad. Y si una imagen puede ser sustituida por texto o CSS (hojas de estilo en cascada utilizadas para definir estilos, formas y efectos en unas pocas líneas de código), entonces sus desarrolladores disfrutarán del desafío creativo y sus usuarios ahorrarán en tamaño de descarga.
En verdad , un sitio dentro de Alphabet, empleó este método. Es simple y liviano debido a las técnicas de reducción de imagen del equipo. La sección de héroe utiliza una imagen de degradado ingeniosamente animada que solo tiene un píxel de ancho. Si bien el gradiente podría haberse creado en código, esto planteaba problemas de rendimiento que eran más costosos y visualmente discordantes. El diseñador y el desarrollador trabajaron juntos para garantizar el equilibrio perfecto entre la estética y el rendimiento del sitio móvil.
En dispositivos móviles, esta animación se simplifica aún más a un color de fondo sólido, que cambia gradualmente en una secuencia codificada. La simplicidad de estas animaciones permite una página liviana sin marcos de JavaScript pesados o tamaños de archivo excesivos. Incluso al simular una red 3G, la página de inicio alcanza un tiempo de carga casi instantáneo y una puntuación de rendimiento de Lighthouse de 92. Esto está a solo unos pocos milisegundos de llegar al percentil superior de sitios de alto rendimiento.
2. Elija un formato de imagen eficiente
Con tantos formatos disponibles, puede ser difícil saber cuál es el más eficiente. Todo depende del caso de uso, pero elegir el formato correcto ya puede guardar algunos bytes del tamaño de su página. Apunte a comenzar con WebP, que puede usarse para imágenes fotográficas y translúcidas con un 30% más de compresión que JPEG, sin pérdida de calidad de imagen. Luego recurra a lo siguiente para obtener soporte completo del navegador:- JPEG: fotos sin transparencia
- PNG: fondos transparentes
- SVG: iconos y formas escalables
Dentro de Google, se a empleado este enfoque en el sitio Fighting Piracy, donde el equipo usó el formato SVG para crear animaciones suaves y livianas hechas de formas simples. Los conceptos de diseño anteriores de esta página incluían GIF y videos de más de 300 kilobytes cada uno, más del doble del tamaño recomendado.
Sin embargo, al aplicar presupuestos de peso de página como parte de su creciente cultura de rendimiento, el equipo pudo reducir diez veces el peso de las imágenes. Esto requirió una estrecha colaboración técnica entre el desarrollador y el diseñador, pero las mejoras en la velocidad móvil valieron la pena.
3. Comprime y cambia el tamaño de las imágenes
La optimización de imágenes puede ayudarlo a lograr el mayor ahorro de bytes y mejoras en el rendimiento del sitio móvil. Incluso las optimizaciones más básicas, como comprimir imágenes, eliminar metadatos (como la fecha y la hora) y experimentar con configuraciones de calidad, pueden ayudar. Y ahora, es más fácil que nunca ofrecer imágenes receptivas, ya que los desarrolladores definen múltiples tamaños de una imagen y el navegador elige la mejor opción para el tamaño de pantalla del usuario.Lo mejor de todo es que gran parte de esto se puede automatizar para ahorrar tiempo y garantizar que las imágenes siempre estén optimizadas. Por ejemplo, sus cientos o miles de imágenes podrían redimensionarse y comprimirse automáticamente con un script. Esto reduce el trabajo manual para los diseñadores, liberando su tiempo para un trabajo más emocionante.
Al crear una página móvil acelerada (AMP), las etiquetas de imagen personalizadas hacen que muchas de estas optimizaciones sean automáticas. Google AMP Cache también limita las dimensiones máximas de la imagen para evitar problemas de memoria del navegador y almacena en caché las imágenes para una carga futura más rápida.
En el caso de BMW , la marca de automóviles de lujo se propuso crear un enfoque de alto rendimiento, primero en dispositivos móviles, manteniendo sus bellas imágenes y videos. Gracias a las etiquetas de imagen eficientes de AMP y otras características rápidas, el nuevo sitio de AMP logró un tiempo de carga hasta 4 veces más rápido con un aumento del 50% en los usuarios móviles. Como beneficio adicional, el sitio web combina la velocidad de AMP con las ricas características de las tecnologías de Progressive Web App (PWA) para ofrecer una experiencia de alta calidad similar a una aplicación.
4. Utiliza técnicas de carga
Comprimir y cambiar el tamaño de las imágenes es el enfoque básico que todos los diseñadores y desarrolladores deben aplicar. Para ir un paso más allá, los desarrolladores pueden servir condicionalmente diferentes versiones de la imagen según el dispositivo del usuario, el tamaño de la pantalla o incluso la calidad de las condiciones de su red. Esto permite a los desarrolladores crear un sitio de carga rápida para todos, independientemente de sus condiciones de navegación únicas.Una vez que sus imágenes estén optimizadas de manera efectiva, asegúrese de que se entreguen en el momento adecuado. Cuando los usuarios acceden por primera vez a su página, desean ver instantáneamente todo el contenido dentro de su ventana gráfica, a menudo denominado contenido "por encima del pliegue". Con una técnica llamada carga diferida, puede habilitar su página web para priorizar la carga de las primeras imágenes disponibles en esta vista limitada, mientras que las imágenes fuera de la pantalla se cargan en el momento de necesidad.
La empresa alemana de comercio electrónico bücher.de solo carga imágenes si entran en el área visible para el usuario. El contenido en la parte visible de la página tiene prioridad para que se cargue al instante. A través de esta y otras optimizaciones de página, pudieron acelerar su sitio en un 33% y reducir el tiempo de carga a 3.5 segundos.
Cuando las imágenes grandes tardan más en cargarse, es útil implementar técnicas de carga progresiva como marcadores de posición, indicadores de progreso o formatos eficientes como JPEG progresivo. Esto les da a los usuarios la sensación de que se está progresando y los mantendrá involucrados en el sitio por más tiempo. Como dice el defensor del diseño Mustafa Kurtuldu : "La idea es llenar el espacio y ocupar tu tiempo".
Próximos pasos: Convertir la velocidad móvil en un KPI
Optimizar imágenes es una forma simple y rentable de mejorar las tasas de conversión en el sitio de su marca. Pero para que la optimización de la velocidad sea sostenible a largo plazo, la velocidad del sitio debe ser un KPI en toda su organización.Para obtener más información sobre la velocidad de la página móvil de su sitio, pruebe la herramienta renovada Test My Site .
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario